/* EXACT DEMO SHAPE, but navbar-safe */
.tdnn {
  margin: 0;                 /* was margin: 0 auto */
  position: relative;
  height: var(--toggleHeight);
  width: var(--toggleWidth);
  border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: var(--bgColor--night);
  cursor: pointer;

  /* IMPORTANT: lock the scale like the demo */
  font-size: 2px;          /* demo 30% of 16px ≈ 4.8px */
}

.tdnn.day {
  background: #FFBF71;
}

.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: var(--bgColor--night);

  box-shadow:
    3em 2.5em 0 0em var(--mooncolor) inset,
    rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
    rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
    rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}

.moon.sun {
  top: 4.5em;
  left: 18em;
  transform: rotate(0deg);
  width: 7em;
  height: 7em;
  background: #fff;

  box-shadow: 3em 3em 0 5em #fff inset,
    0 -5em 0 -2.7em #fff,
    3.5em -3.5em 0 -3em #fff,
    5em 0 0 -2.7em #fff,
    3.5em 3.5em 0 -3em #fff,
    0 5em 0 -2.7em #fff,
    -3.5em 3.5em 0 -3em #fff,
    -5em 0 0 -2.7em #fff,
    -3.5em -3.5em 0 -3em #fff;
}