@charset "UTF-8";
:root {
  --darkbg: #251D29;
  --darkt: #FFD1F7;
  --lightbg: #fff;
  --lightt: #D43370;
  --toggleHeight: 25px;
  --toggleWidth: 48px;
  --toggleBtnRadius: 10em;
  --bgColor--night: #423966;
  --toggleBtn-bgColor--night: var(--bgColor--night);
  --mooncolor: #D9FBFF;
  --bgColor--day: #9ee3fb;
  --toggleBtn-bgColor--day: var(--bgColor--day);
}

.tdnn {
  /* Sabit boyutlar kullanıyoruz */
  position: fixed;
  z-index: 999;
  right: 10px;
  bottom: 10px;
  height: var(--toggleHeight);
  width: var(--toggleWidth);
  border-radius: var(--toggleHeight);
  transition: all 500ms ease-in-out;
  background: var(--bgColor--night);
}

.day {
  background: #FFBF71;
}

.moon {
  position: absolute;
  display: block;
  border-radius: 50%;
  transition: all 400ms ease-in-out;
  /* px birimleriyle sabit boyutlar */
  top: 3px;
  left: 3px;
  transform: rotate(-75deg);
  width: 19px;
  height: 19px;
  background: var(--bgColor--night);
  box-shadow: 6px 5px 0 0 var(--mooncolor) inset, rgba(255, 255, 255, 0.1) 0 -14px 0 -9px, rgba(255, 255, 255, 0.1) 6px 14px 0 -9px, rgba(255, 255, 255, 0.1) 4px 26px 0 -8px, rgba(255, 255, 255, 0.1) 12px 4px 0 -8.2px, rgba(255, 255, 255, 0.1) 16px 16px 0 -9px, rgba(255, 255, 255, 0.1) 12px 26px 0 -9px, rgba(255, 255, 255, 0.1) -8px 14px 0 -9px, rgba(255, 255, 255, 0.1) -2px 20px 0 -9px;
}

.sun {
  top: 7.2px; /* 4.5em = 7.2px */
  left: 28.8px; /* 18em = 28.8px */
  transform: rotate(0deg);
  width: 11.2px; /* 7em = 11.2px */
  height: 11.2px; /* 7em = 11.2px */
  background: #fff;
  box-shadow: 4.8px 4.8px 0 8px #fff inset, 0 -8px 0 -4.32px #fff, 5.6px -5.6px 0 -4.8px #fff, 8px 0 0 -4.32px #fff, 5.6px 5.6px 0 -4.8px #fff, 0 8px 0 -4.32px #fff, -5.6px 5.6px 0 -4.8px #fff, -8px 0 0 -4.32px #fff, -5.6px -5.6px 0 -4.8px #fff; /* -3.5em -3.5em 0 -3em */
}