.allstars {
  width: 100%;
  height: 100%;
  border-radius: 0;
  position: absolute;
  left: 0;
  top: 0;
}
.allstars .star1 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius:50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Right1 4s infinite;
  left: 60%;
  top: 10%; 
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
  background-color: rgb(255, 192, 49); 
  display: none;
}
@keyframes Right1 {

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-89px, 326px);
  }

  to {
    transform: translate(-20px, -50px);
  }
}

.allstars .star2 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Left1 6s infinite;
  left: 50%;
  top: 10%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}
@keyframes Left1 {

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(-180px, -50px);
  }
}

.allstars .star3 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Right2 8s infinite;
  left: 55%;
  top: 20%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Right2{

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-50px, 150px);
  }

  to {
    transform: translate(-20px, -50px);
  }
}
.allstars .star4 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Left2 10s infinite;
  left: 52%;
  top: 5%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Left2 {

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(-120px, -40px);
  }
}
.allstars .star5 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Right3 12s infinite;
  left: 60%;
  top: 20%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Right3 {

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(50px, -20px);
  }
}
.allstars .star6 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Left3 4s infinite;
  left: 50%;
  top: 20%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Left3 {

  0% {
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(-200px, -20px);
  }
}
.allstars .star7 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Right4 6s infinite;
  left: 60%;
  top: 20%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Right4 {

 0% {
   opacity: 0;
   height: 15px;
   width: 15px;
 }

 100% {
   opacity: 1;
   height: 30px;
   width: 30px;
 }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(20px, -60px);
  }
}
.allstars .star8 {
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  opacity: 0.8;
  filter: blur(3px);
  animation: Left4 7s infinite;
  left: 50%;
  top: 25%;
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
  background-color: rgb(255, 192, 49);
  display: none;
}

@keyframes Left4 {

  0%{
    opacity: 0;
    height: 15px;
    width: 15px;
  }

  100% {
    opacity: 1;
    height: 30px;
    width: 30px;
  }

  from {
    transform: translate(-100px, 200px);
  }

  to {
    transform: translate(-250px, -20px);
  }
}