#light-mode-to-dark-mode-toggle {
  margin: 12px 10px;
}
@media (min-width: 768px) {
  #light-mode-to-dark-mode-toggle {
    margin: 22px 10px;
  }
}
#light-mode-to-dark-mode-toggle #light-dark-toggle {
  background-color: var(--color-tom-thumb);
  border: 2px solid transparent;
  border-radius: 30px;
  width: 55px;
  height: 28px;
  position: relative;
  transition: background-color 0.5s;
}
@media (min-width: 768px) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle {
    width: 70px;
    height: 35px;
  }
}
#light-mode-to-dark-mode-toggle #light-dark-toggle:focus-visible {
  outline: 3px solid var(--color-tom-thumb);
  outline-offset: 3px;
}
#light-mode-to-dark-mode-toggle #light-dark-toggle .toggle-icon {
  background-image: url("../img/mobile-sun.svg");
  width: 15.5px;
  height: 15.5px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.5s;
}
@media (min-width: 768px) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle .toggle-icon {
    background-image: url("../img/desktop-sun.svg");
    width: 22.5px;
    height: 22.5px;
  }
}
@media (hover: hover) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle:hover {
    background-color: var(--color-pearl-bush);
    border-color: var(--color-tom-thumb);
  }
}
@media (hover: hover) and (min-width: 768px) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle:hover .toggle-icon {
    background-image: url("../img/desktop-sun-hover.svg");
  }
}
#light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true] {
  background-color: var(--color-pearl-bush);
}
#light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true]:focus-visible {
  outline-color: var(--color-pearl-bush);
}
#light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true] .toggle-icon {
  background-image: url("../img/mobile-moon.svg");
  width: 15.44px;
  height: 15.5px;
  left: 32px;
}
@media (min-width: 768px) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true] .toggle-icon {
    background-image: url("../img/desktop-moon.svg");
    width: 22px;
    height: 23px;
    left: 36px;
  }
}
@media (hover: hover) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true]:hover {
    background-color: var(--color-tom-thumb);
    border-color: var(--color-pearl-bush);
  }
}
@media (hover: hover) and (min-width: 768px) {
  #light-mode-to-dark-mode-toggle #light-dark-toggle[aria-pressed=true]:hover .toggle-icon {
    background-image: url("../img/desktop-moon-hover.svg");
  }
}/*# sourceMappingURL=toggle.css.map */