.sun {
  width: 80px;
  height: 80px;
  background-color: #ffde00;
  border-radius: 50%;
  box-shadow: 0 0 0 10px #ffde0080, 0 0 0 15px #ffde0040, 0 0 0 20px #ffde0020,
    0 0 0 25px #ffde0010, 0 0 0 30px #ffde0000, 0 0 20px 30px #ffde0010;
  animation: sunrise 2s infinite linear forwards, rays 2s 2s infinite linear;
}

@keyframes sunrise {
  0% {
    box-shadow: none;
  }
}

@keyframes rays {
  0% {
    box-shadow: 0 0 0 0 #ffde0080, 0 0 0 10px #ffde0080, 0 0 0 15px #ffde0040,
      0 0 0 20px #ffde0020, 0 0 0 25px #ffde0010, 0 0 15px 30px #ffde0010;
  }
  100% {
    box-shadow: 0 0 0 10px #ffde0080, 0 0 0 15px #ffde0040, 0 0 0 20px #ffde0020,
      0 0 0 25px #ffde0010, 0 0 0 30px #ffde0000, 0 0 15px 30px #ffde0010;
  }
}

.moon {
  width: 80px;
  height: 80px;
  background: #c7cbd0;
  border-radius: 50%;
  box-shadow: inset -10px 0px 0 0px #9098a1;
}

.moon li {
  position: absolute;
  list-style: none;
  background: #737277;
  border-radius: 50%;
}

.moon li:nth-child(1) {
  left: 10px;
  top: 24px;
  width: 20px;
  height: 20px;
  box-shadow: inset 6px -2px 0 0px #414043;
}

.moon li:nth-child(2) {
  left: 60px;
  top: 20px;
  width: 10px;
  height: 10px;
  box-shadow: inset 3px -1px 0 0px #414043;
}

.moon li:nth-child(3) {
  left: 40px;
  top: 60px;
  width: 10px;
  height: 10px;
  box-shadow: inset 3px -1px 0 0px #414043;
}

.moon li:nth-child(4) {
  left: 20px;
  top: 60px;
  width: 5px;
  height: 5px;
  box-shadow: inset 2.4px -0.8px 0 0px #414043;
}

.moon li:nth-child(5) {
  left: 35px;
  top: 10.66666667px;
  width: 5px;
  height: 5px;
  box-shadow: inset 2.4px -0.8px 0 0px #414043;
}

.moon li:nth-child(6) {
  right: 30px;
  top: 32px;
  width: 5px;
  height: 5px;
  box-shadow: inset 2.4px -0.8px 0 0px #414043;
}

.moon li:nth-child(7) {
  left: 72.7272px;
  top: 40px;
  width: 5px;
  height: 5px;
  box-shadow: inset 2.4px -0.8px 0 0px #414043;
}

.orbital {
  position: fixed;
  display: flex;
  justify-content: center;
  bottom: -80px;
  left: 50%;
  height: 50vw;
  transform: translate(-50%);
  transform-origin: bottom;
}

@media screen and (max-width: 768px) {
  .orbital {
    bottom: 0;
  }
}

@media screen and (max-width: 400px) {
  .orbital {
    bottom: 80px;
    height: 80vw;
  }
}