<div class="sun"></div>

html:before {
  content: "";
  position: fixed;
  animation: planet 35s infinite alternate;
  right: 100px;
  bottom: 120px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-image: radial-gradient(
    circle at 30% 40%,
    rgb(255, 0, 0),
    rgb(0, 0, 0)
  );
  box-shadow:inset 0 0 25px rgba(0,0,0,0.5);
}
@keyframes planet {
  0% {
    transform: translate(-60vw, -80vh) scale(0.1) rotate(-360deg);
    opacity: 0;
  }

  20% {
    opacity: 0.9;
  }
  100% {
    transform: translate(20vw, 20vh) scale(10) rotate(360deg);
  }
}
body {
  background-color: #191231;
  background-image: radial-gradient(
      1px 1px at 25px 5px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 75px 125px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 100px 75px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
  background-size: 300px 200px, 500px 500px;
}
body:before,
body:after {
  content: "";
  position: fixed;
  z-index: -1;
  left: -50vw;
  right: -50vw;
  top: -50vh;
  bottom: -50vh;
  background-image: radial-gradient(
      1px 1px at 25px 5px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(1px 1px at 50px 25px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1px 1px at 125px 20px, white, rgba(255, 255, 255, 0)),
    radial-gradient(1.5px 1.5px at 50px 75px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 15px 125px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 110px 80px, white, rgba(255, 255, 255, 0));
  background-size: 300px 200px, 500px 500px;
  animation: stars 45s infinite alternate;
}
body:after {
  background-image: radial-gradient(
      1px 1px at 100px 75px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(1.5px 1.5px at 199px 100px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2px 2px at 20px 50px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 100px 5px, white, rgba(255, 255, 255, 0)),
    radial-gradient(2.5px 2.5px at 5px 5px, white, rgba(255, 255, 255, 0));
  animation: stars2 55s infinite alternate;
}
@keyframes stars {
  100% {
    transform: translate(-20vw, -10vh);
  }
}
@keyframes stars2 {
  100% {
    transform: translate(30vw, 10vh);
  }
}

/* Below is all that is needed for the sun. All the above is eye candy */
.sun {
  margin: 2rem;
  position: relative;
  width: 30%;
  padding-top: 30%;
  background: linear-gradient(
    #fbed20 0%,
    #fd8427 30%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 30.5%,
    #ff8427 30.5%,
    #fe6928 38%,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0) 39%,
    #fe6928 39%,
    #fe5430 45%,
    rgba(0, 0, 0, 0) 44%,
    rgba(0, 0, 0, 0) 46.5%,
    #fe5430 46.5%,
    #fe4b38 52%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0) 53.5%,
    #fe4b38 53.5%,
    #fe3446 59%,
    rgba(0, 0, 0, 0) 59%,
    rgba(0, 0, 0, 0) 61%,
    #fe3446 61%,
    #fe2558 66%,
    rgba(0, 0, 0, 0) 66%,
    rgba(0, 0, 0, 0) 69%,
    #fe2558 69%,
    #fe1f5f 74%,
    rgba(0, 0, 0, 0) 74%,
    rgba(0, 0, 0, 0) 77%,
    #fe1f5f 77%,
    #fe1967 84%,
    rgba(0, 0, 0, 0) 84%,
    rgba(0, 0, 0, 0) 88%,
    #fe1967 88%,
    #fe126f 92%,
    rgba(0, 0, 0, 0) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 50%;
  box-shadow: 0px -50px 50px rgba(255, 13, 119, 0.686);
}

.sun:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 13, 119, 0.686), rgba(0, 0, 0, 0));
}