.theme-switch-wrapper {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  z-index: 9999;
}

.theme-switch {
  display: inline-block;
  height: 26px;
  position: relative;
  width: 50px;
}

.theme-switch input { display: none; }

.slider {
  background-color: #3749BB;
  bottom: 0; cursor: pointer; left: 0;
  position: absolute; right: 0; top: 0;
  transition: .4s; border-radius: 34px;
}

.slider:before {
  background-color: #fff;
  bottom: 3px; content: "";
  height: 20px; left: 4px;
  position: absolute; transition: .4s;
  width: 20px; border-radius: 50%;
}

input:checked + .slider { background-color: #1E3A8A; }
input:checked + .slider:before { transform: translateX(22px); }

/* DARK MODE GLOBAL */
.dark-mode body {
  background-color: #121212;
  color: #e0e0e0;
}

.dark-mode header,
.dark-mode nav,
.dark-mode footer {
  background-color: #1e1e1e;
}

.dark-mode a {
  color: #90caf9;
}
/* Biar emoji bisa ditaruh di dalam slider */
.slider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  font-size: 12px;
}

/* Emoji */
.sun, .moon {
  pointer-events: none;
  z-index: 0;
}

/* Biar bulatan putih tetap di atas emoji */
.slider:before {
  z-index: 2;
}