.wrapper {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.toggleIcon {
  position: absolute;
  width: 2.5rem;
  height: auto;
}

.colorToggleThumb {
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 99px;
  transform: translateX(0);
  transition: left 0.3s ease;
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.colorToggleThumb.dark {
  left: calc(50px - 25px);
}

.planets {
  position: absolute;
  /* border: 1px solid white; */
  width: 300px;
  height: 300px;
  top: 0;
  left: -80%;
}

/* Top corner */
.moon1 {
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

/* Right corner */
.sun2 {
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  fill: aqua;
}

/* Bottom corner */
.moon2 {
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

/* Left corner */
.sun1 {
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
}
