index.css

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
:root {
  --transition: all 1s ease;
}
body {
  width: 100vw;
  height: 100vh;
  background-color: #e1e2e3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toggle-button {
  width: 20em;
  height: 7em;
  box-shadow: 0.075em 0.075em 0.225em 0.1em #ffffffee;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 12em;
  cursor: pointer;
}
.toggle-button::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-shadow: inset 0.15em 0.15em 0.5em 0.05em #000000bb;
  position: absolute;
  z-index: 1;
  border-radius: 12em;
  pointer-events: none;
}
.light, .dark {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.content {
  width: 100%;
  height: 100%;
  background-color: #2e83bf;
  position: relative;
  isolation: isolate;
  transition: var(--transition);
}
#dark:target {
  pointer-events: none;
}
#light:target {
  pointer-events: none;
}
#dark:target ~ .content {
  background-color: #1f2234;
}
#light:target ~ .content {
  background-color: #2e83bf;
}
.satallite {
  width: 6em;
  height: 6em;
  position: absolute;
  top: 7.5%;
  left: 5%;
  border-radius: 50%;
  isolation: isolate;
  z-index: 1;
  transition: var(--transition);
}
#dark:target ~ .content > .satallite {
  left: 65%;
}
#light:target ~ .content > .satallite {
  left: 5%;
}
.satallite::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: transparent;
  box-shadow:
    inset 0.1em 0.1em 0.15em #ffffff88,
    -0.1em -0.1em 0.15em #ffffff88,
    inset -0.1em -0.1em 0.15em #00000066,
    0.1em 0.1em 0.15em #00000066,
    0.075em 0.075em 0.5em 0.2em #00000039;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 2;
}
.sun {
  width: 100%;
  height: 100%;
  background-color: #fbc72d;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 50%;
}
.moon {
  width: 100%;
  height: 100%;
  background-color: #cccfd9;
  box-shadow:
    inset 0.1em 0.1em 0.15em #ffffff88,
    -0.1em -0.1em 0.15em #ffffff88,
    inset -0.1em -0.1em 0.15em #00000066,
    0.1em 0.1em 0.15em #00000066,
    0.075em 0.075em 0.5em 0.2em #00000039;
  position: absolute;
  top: 0;
  left: 100%;
  transform: rotate(60deg);
  border-radius: 50%;
  transition: var(--transition);
}
#dark:target ~ .content .moon {
  left: 0%;
  transform: rotate(0deg);
}
#light:target ~ .content .moon {
  left: 100%;
  transform: rotate(60deg);
}
.dot {
  width: 18%;
  height: 18%;
  background-color: #9da8bc;
  position: absolute;
  border-radius: 50%;
}
.dot1 {
  top: 20%;
  left: 45%;
}
.dot2 {
  top: 50%;
  left: 25%;
  transform: scale(2);
}
.dot3 {
  top: 60%;
  left: 62%;
  transform: scale(1.2);
}
.rays {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: var(--transition);
}
#dark:target ~ .content .rays {
  transform: scale(0.85);
}
#light:target ~ .content .rays {
  transform: scale(1);
}
.ray {
  width: 100%;
  height: 100%;
  background-color: #ffffff1a;
  backdrop-filter: blur(0.0075em);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.ray1 {
  transform: scale(2);
}
.ray2 {
  transform: scale(2.9);
}
.ray3 {
  transform: scale(3.8);
}
.stars {
  width: 70%;
  height: 100%;
  position: absolute;
  top: -100%;
  transition: var(--transition);
}
#dark:target ~ .content .stars {
  top: 0%;
}
#light:target ~ .content .stars {
  top: -100%;
}
.star {
  width: 1.25em;
  height: 1.25em;
  background-color: #f8fcff;
  -webkit-clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  position: absolute;
}
.star1 {
  top: 12%;
  left: 25%;
}
.star2 {
  top: 30%;
  left: 10%;
  transform: scale(0.4);
}
.star3 {
  top: 35%;
  left: 60%;
  transform: scale(0.3);
}
.star4 {
  top: 25%;
  left: 77.5%;
  transform: scale(1.1);
}
.star5 {
  top: 45%;
  left: 27.5%;
  transform: scale(0.3);
}
.star6 {
  top: 50%;
  left: 58.5%;
  transform: scale(0.2);
}
.star7 {
  top: 55%;
  left: 77.5%;
  transform: scale(0.3);
}
.star8 {
  top: 65%;
  left: 18%;
  transform: scale(0.2);
}
.star9 {
  top: 72.5%;
  left: 15%;
  transform: scale(0.2);
}
.star10 {
  top: 80%;
  left: 30%;
  transform: scale(0.24);
}
.star11 {
  top: 75%;
  left: 62.5%;
  transform: scale(0.5);
}
.clouds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  isolation: isolate;
  transition: var(--transition);
}
#dark:target ~ .content .clouds {
  top: 100%;
}
#light:target ~ .content .clouds {
  top: 0;
}
.cloudset {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: -15%;
  right: -10%;
}
.cloud {
  width: 3.25em;
  height: 3.25em;
  background-color: #f5faff;
  position: absolute;
  bottom: -24%;
  transform: scale(1);
  border-radius: 50%;
}
.cloud2 {
  bottom: -20%;
  left: 14%;
  transform: scale(1.3);
}
.cloud3 {
  bottom: -15%;
  left: 27.5%;
  transform: scale(1.3);
}
.cloud4 {
  bottom: -12%;
  left: 40%;
  transform: scale(0.9);
}
.cloud5 {
  bottom: -7.5%;
  left: 52.5%;
  transform: scale(1.1);
}
.cloud6 {
  bottom: 0%;
  left: 67.5%;
  transform: scale(1.3);
}
.cloud7 {
  bottom: 25%;
  left: 80%;
  transform: scale(1.55);
}
.cloudset1 {
  z-index: 1;
}
.cloudset2 {
  bottom: 0%;
  right: -6%;
  transform: rotate(-5deg);
}
.cloudset2 .cloud {
  background-color: #a7cbea;
}
.cloudset2 .cloud2 {
  bottom: -18%;
  left: 15%;
}
.cloudset2 .cloud3 {
  bottom: -7.5%;
  left: 29%;
}
.cloudset2 .cloud5 {
  bottom: -1%;
}
.cloudset2 .cloud6 {
  bottom: 4%;
}