:root {
  --toggleHeight: 16em;
  --toggleWidth: 30em;
  --toggleBtnRadius: 10em;

  --bgColor--night: #423966;
  --mooncolor: #D9FBFF;
  --bgColor--day: #9ee3fb;
}

.light{
  background: var(--lightbg);
  color: var(--lightt);
}
.tdnn {
  font-size: 12%;
  position: relative;
  height: var(--toggleHeight);
  width: var(--toggleWidth);
  border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: #070b3b;
}
.theme-light .tdnn {
  background: #0071dc;
}
.moon {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: all 400ms ease-in-out;
  top: 3em;
  left: 3em;
  transform: rotate(-75deg);
  width: var(--toggleBtnRadius);
  height: var(--toggleBtnRadius);
  background: #070b3b;
  box-shadow: 3em 2.5em 0 0em #ffffff inset, rgba(255, 255, 255, 0.5) 3em 7em 0 -4.5em, rgba(255, 255, 255, 0.5) 2em 13em 0 -4em, rgba(255, 255, 255, 0.5) 6em 2em 0 -4.1em, rgba(255, 255, 255, 0.5) 8em 8em 0 -4.5em, rgba(255, 255, 255, 0.5) 6em 13em 0 -4.5em, rgba(255, 255, 255, 0.5) -4em 7em 0 -4.5em, rgba(255, 255, 255, 0.5) -1em 10em 0 -4.5em;
}
.theme-light .moon {
  top: 4.5em;
  left: 18em;
  transform: rotate(0deg);
  width: 7em;
  height: 7em;
  background: #FFE87C;
  box-shadow: 3em 3em 0 5em #FFE87C inset,
    0 -5em 0 -2.7em #FFE87C,
    3.5em -3.5em 0 -3em #FFE87C,
    5em 0 0 -2.7em #FFE87C,
    3.5em 3.5em 0 -3em #FFE87C,
    0 5em 0 -2.7em #FFE87C,
    -3.5em 3.5em 0 -3em #FFE87C,
    -5em 0 0 -2.7em #FFE87C,
    -3.5em -3.5em 0 -3em #FFE87C;
}

.tdnn input{
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
}

@media screen and (max-width: 992px) {
  .tdnn{
    margin-left: 16px;
  }
  .tdnn, 
  .moon{
    background-color: #252525;
  }
}