:root {
  --trans: all 0.6s ease-in-out;
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background-image: url("../img/1.png");
  transition: var(--trans);
}
body:has(#switch input:checked) {
  background-image: url("../img/2.jpg");
}

#imgs {
  display: none;
}

#switch {
  position: absolute;
  display: block;
  bottom: 20px;
  left: 20px;
  width: 150px;
  height: 60px;
  border-radius: 30px;
  transition: 0.3s all ease-in-out;
  overflow: hidden;
}
#switch > input {
  display: none;
}
#switch div {
  width: 100%;
  height: 100%;
  transition: var(--trans);
  border-radius: 30px;
}
#switch > div {
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(0, 0, 0, 0.6);
}
#switch > div > svg {
  transition: var(--trans);
}
#switch #sunMoon {
  overflow: hidden;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 50px;
  height: 50px;
  background: #e5e15a;
  border-radius: 100%;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), inset 3px 3px 3px rgba(255, 255, 255, 0.6), inset -3px -3px 3px rgba(0, 0, 0, 0.2);
}
#switch .sky {
  background-size: 300px;
}
#switch #day {
  opacity: 1;
  position: absolute;
  --hue: 210;
  background-image: radial-gradient(circle, hsl(var(--hue), 100%, 90%) 0%, hsl(var(--hue), 100%, 90%) 30%, hsl(var(--hue), 100%, 85%) 32%, hsl(var(--hue), 100%, 85%) 40%, hsl(var(--hue), 100%, 80%) 42%, hsl(var(--hue), 100%, 80%) 50%, hsl(var(--hue), 100%, 75%) 52%, hsl(var(--hue), 100%, 75%) 60%, hsl(var(--hue), 100%, 70%) 62%, hsl(var(--hue), 100%, 70%) 100%);
  background-position-x: 170px;
}
#switch #day svg {
  transform-origin: left top;
  transform: rotate(0deg);
}
#switch #night {
  opacity: 0;
  position: absolute;
  --hue: 210;
  background-image: radial-gradient(circle, hsl(var(--hue), 0%, 50%) 0%, hsl(var(--hue), 0%, 50%) 30%, hsl(var(--hue), 0%, 45%) 32%, hsl(var(--hue), 0%, 45%) 40%, hsl(var(--hue), 0%, 40%) 42%, hsl(var(--hue), 0%, 40%) 50%, hsl(var(--hue), 0%, 35%) 52%, hsl(var(--hue), 0%, 35%) 60%, hsl(var(--hue), 0%, 30%) 62%, hsl(var(--hue), 0%, 30%) 100%);
  background-position-x: -170px;
}
#switch #night svg {
  transform-origin: 500px 60px;
  transform: rotate(6deg);
}
#switch #moon {
  background: #bbb;
  position: relative;
  opacity: 0.8;
  left: 120%;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), inset 3px 3px 3px rgba(255, 255, 255, 0.6), inset -3px -3px 3px rgba(0, 0, 0, 0.2);
}
#switch:has(input:checked) #day {
  opacity: 0;
  background-position-x: 300px;
}
#switch:has(input:checked) #day svg {
  transform: rotate(15deg);
}
#switch:has(input:checked) #night {
  opacity: 1;
  background-position-x: -20px;
}
#switch:has(input:checked) #night svg {
  transform: rotate(0deg);
}
#switch:has(input:checked) #sunMoon {
  left: 95px;
}
#switch:has(input:checked) #moon {
  left: 0;
  opacity: 1;
}/*# sourceMappingURL=1.css.map */