body{
  background-color: black;
  color: white;
}

.sun{
  z-index: 0;
  box-shadow: 0 0 100px 50px rgba(255, 141, 0, 1);
  border-radius: 50%;
  background: red;
  width: 200px;
  height: 200px;
  position: absolute;
}

.stars {
  z-index: -100;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: #fff;
  border-radius: 50%;
}

.planet{
  position: absolute;
  border-radius: 50%;
}

.mercury {
  background-color: #ff9933;
  width: 10px;
  height: 10px;
  z-index: -1;
}

.venus {
  background-color: #ffff66;
  width: 21px;
  height: 21px;
  z-index: -1;
}

.earth {
  background-color: #0052cc;
  box-shadow: 0 0 5px 5px rgb(86, 134, 179);
  width: 23px;
  height: 23px;
  z-index: -1;
}

.mars {
  background-color: #cc0000;
  width: 7px;
  height: 7px;
  z-index: -1;
}

.jupiter {
  background-color: #ffcc00;
  width: 69px;
  height: 69px;
  z-index: -1;
}

.saturn {
  background-color: beige;
  width: 49px;
  height: 49px;
  z-index: -1;
}

.uranus {
  background-color: #66ccff;
  width: 33px;
  height: 33px;
  z-index: -1;
}

.neptune {
  background-color: #0000cc;
  width: 31px;
  height: 31px;
  z-index: -1;
}

.pluto {
  background-color: grey;
  width: 4px;
  height: 4px;
  z-index: -1;
}

@keyframes zoom {
  0%{
      transform: scale(1);
  }
  100%{
      transform: scale(.25);
  }
}