.bgArea {
  width: 100%;
  height: 300px;
  background-color: rgb(0, 4, 128);
  overflow: hidden;
  position: relative;
}

.star {
  border-radius: 50%;
  background: rgb(237, 237, 132);
  position: absolute;
  animation: star linear infinite;
}
.star:nth-child(1) {
  width: 8px;
  height: 8px;
  animation-duration: 16s;
  animation-delay: -1s;
  top: 48%;
}
.star:nth-child(2) {
  width: 4px;
  height: 4px;
  animation-duration: 6s;
  animation-delay: -24s;
  top: 80%;
}
.star:nth-child(3) {
  width: 7px;
  height: 7px;
  animation-duration: 16s;
  animation-delay: -38s;
  top: 59%;
}
.star:nth-child(4) {
  width: 10px;
  height: 10px;
  animation-duration: 7s;
  animation-delay: -7s;
  top: 34%;
}
.star:nth-child(5) {
  width: 7px;
  height: 7px;
  animation-duration: 22s;
  animation-delay: -10s;
  top: 78%;
}
.star:nth-child(6) {
  width: 9px;
  height: 9px;
  animation-duration: 18s;
  animation-delay: -8s;
  top: 81%;
}
.star:nth-child(7) {
  width: 8px;
  height: 8px;
  animation-duration: 19s;
  animation-delay: -23s;
  top: 74%;
}
.star:nth-child(8) {
  width: 9px;
  height: 9px;
  animation-duration: 20s;
  animation-delay: -15s;
  top: 4%;
}
.star:nth-child(9) {
  width: 9px;
  height: 9px;
  animation-duration: 12s;
  animation-delay: -28s;
  top: 15%;
}
.star:nth-child(10) {
  width: 7px;
  height: 7px;
  animation-duration: 21s;
  animation-delay: 0s;
  top: 92%;
}
.star:nth-child(11) {
  width: 5px;
  height: 5px;
  animation-duration: 31s;
  animation-delay: -15s;
  top: 100%;
}
.star:nth-child(12) {
  width: 9px;
  height: 9px;
  animation-duration: 34s;
  animation-delay: -16s;
  top: 55%;
}
.star:nth-child(13) {
  width: 8px;
  height: 8px;
  animation-duration: 11s;
  animation-delay: -31s;
  top: 4%;
}
.star:nth-child(14) {
  width: 4px;
  height: 4px;
  animation-duration: 26s;
  animation-delay: -35s;
  top: 85%;
}
.star:nth-child(15) {
  width: 8px;
  height: 8px;
  animation-duration: 19s;
  animation-delay: -16s;
  top: 56%;
}
.star:nth-child(16) {
  width: 4px;
  height: 4px;
  animation-duration: 25s;
  animation-delay: -22s;
  top: 23%;
}
.star:nth-child(17) {
  width: 7px;
  height: 7px;
  animation-duration: 34s;
  animation-delay: -3s;
  top: 70%;
}
.star:nth-child(18) {
  width: 7px;
  height: 7px;
  animation-duration: 11s;
  animation-delay: -4s;
  top: 87%;
}
.star:nth-child(19) {
  width: 5px;
  height: 5px;
  animation-duration: 27s;
  animation-delay: -16s;
  top: 94%;
}
.star:nth-child(20) {
  width: 9px;
  height: 9px;
  animation-duration: 34s;
  animation-delay: -5s;
  top: 7%;
}
.star:nth-child(21) {
  width: 5px;
  height: 5px;
  animation-duration: 29s;
  animation-delay: -35s;
  top: 25%;
}
.star:nth-child(22) {
  width: 9px;
  height: 9px;
  animation-duration: 23s;
  animation-delay: -22s;
  top: 73%;
}
.star:nth-child(23) {
  width: 6px;
  height: 6px;
  animation-duration: 34s;
  animation-delay: -20s;
  top: 69%;
}
.star:nth-child(24) {
  width: 10px;
  height: 10px;
  animation-duration: 17s;
  animation-delay: -3s;
  top: 58%;
}
.star:nth-child(25) {
  width: 9px;
  height: 9px;
  animation-duration: 6s;
  animation-delay: -21s;
  top: 84%;
}
.star:nth-child(26) {
  width: 10px;
  height: 10px;
  animation-duration: 14s;
  animation-delay: -15s;
  top: 74%;
}
.star:nth-child(27) {
  width: 5px;
  height: 5px;
  animation-duration: 17s;
  animation-delay: -11s;
  top: 41%;
}
.star:nth-child(28) {
  width: 5px;
  height: 5px;
  animation-duration: 26s;
  animation-delay: -27s;
  top: 37%;
}
.star:nth-child(29) {
  width: 8px;
  height: 8px;
  animation-duration: 33s;
  animation-delay: -7s;
  top: 6%;
}
.star:nth-child(30) {
  width: 4px;
  height: 4px;
  animation-duration: 35s;
  animation-delay: -2s;
  top: 43%;
}

@keyframes star {
  from {
    transform: translate(-100%, 0);
  }
  to {
    transform: translate(500px, 0);
  }
}

@media screen and (min-width: 740px) {
  .bgArea {
    width: 500px;
  }
}