html {
  background-color: #07031d;
  background-image: linear-gradient(
    43deg,
    #07031d 0%,
    #120a31 22%,
    #1d1350 49%,
    #10084d 75%,
    #0c0342 100%
  );
}

body {
  background-color: transparent;
  overflow: hidden;
}

.star {
  background: #c2c2c2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
}
.glow {
  background: white;
  width: 60px;
  height: 60px;
  background-position: center center;
  background-size: cover;
  animation: glitter 10s linear 0s infinite normal;
  -webkit-animation: glitter 10s linear 0s infinite normal;
  -moz-animation: glitter 10s linear 0s infinite normal;
  -ms-animation: glitter 10s linear 0s infinite normal;
  -o-animation: glitter 10s linear 0s infinite normal;
}
.one {
  background-image: url(images/1.jpg);
  top: 20%;
  left: 33%;
  animation-delay: -2s;
}
.two {
  background-image: url(images/2.jpg);
  top: 19%;
  left: 41%;
  animation-delay: -1.7142857143s;
}
.three {
  background-image: url(images/3.jpg);
  top: 30%;
  left: 49%;
  animation-delay: -1.4285714286s;
}
.four {
  background-image: url(images/4.jpg);
  top: 40%;
  left: 57%;
  animation-delay: -1.4285714286s;
}
.five {
  background-image: url(images/5.jpg);
  top: 47%;
  left: 71%;
  animation-delay: -0.8571428571s;
}
.six {
  background-image: url(images/6.jpg);
  top: 66%;
  left: 65%;
  animation-delay: -0.5714285714s;
}
.seven {
  background-image: url(images/7.jpg);
  top: 59%;
  left: 55%;
  animation-delay: -0.2857142857s;
}

.polaris {
  background-image: url(images/8.jpg);
  width: 70px;
  height: 70px;
  top: 3%;
  left: 83%;
  animation-delay: 0;
}
.moon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ddd;
  box-shadow: inset 10px -10px 0 0 #b9b9b9, 0px 0px 40px 20px #203a87;
}
.crater {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
}
.crater1 {
  top: 30px;
  right: 30px;
  box-shadow: inset -1px 2px 0 0 #969696;
}
.crater2 {
  width: 20px;
  height: 20px;
  top: 15px;
  right: 10px;
  box-shadow: inset -2px 4px 0 0 #aaa;
}
.crater3 {
  width: 5px;
  height: 5px;
  top: 10px;
  right: 30px;
}
@keyframes glitter {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0px 0px 10px 5px #535fed;
  }
  25% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0px 0px 10px 5px #535fed;
  }
  75% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0px 0px 10px 5px #535fed;
  }
}