

.starLayer1{
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0; top: 0;
    animation: slide 120s linear infinite;
    font-size: 0.04em;
}

.starLayer2{
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0; top: 0;
    animation: slide 90s linear infinite;
  font-size: 0.075em;
  opacity: 0.6;
}

.starLayer3{
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0; top: 0;
    animation: slide 190s linear infinite;
  font-size: 0.02em;
  opacity: 1;
}

 @keyframes slide {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-50%);
   }
 }

.roundStar{
  display: block;
  position: absolute;
  width: 1em; height: 1em;
  border-radius: 50%;
  background: #fff;
}

.five-pointed-star {
 --star-color:#fff;
 margin:1em auto;
 font-size:5em;
 position: absolute;
 display: block;
 width: 0px;
 height: 0px;
 border-right: 1em solid transparent;
 border-bottom: 0.8em solid var(--star-color);
 border-left: 1em solid transparent;
 left: 90%; top: 65%;
}
.five-pointed-star:before {
 border-bottom: 0.8em solid var(--star-color);
 border-left: 0.3em solid transparent;
 border-right: 0.3em solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -0.45em;
 left: -0.65em;
 display: block;
 content:"";
 transform: rotate(-35deg);
}
.five-pointed-star:after {
 position: absolute;
 display: block;
 top: 0.03em;
 left: -1.05em;
 width: 0;
 height: 0;
 border-right: 1em solid transparent;
 border-bottom: 0.8em solid var(--star-color);
 border-left: 1em solid transparent;
 transform: rotate(-70deg);
 content:"";
}


@-webkit-keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

.rotating1 {
    -webkit-animation: rotating 15s linear infinite;
}

.rotating2 {
    -webkit-animation: rotating 15s linear infinite;
}

.rotating3 {
    -webkit-animation: rotating 12s linear infinite;
}


@media only screen and (max-width: 1200px){


  .starLayer1{

      animation: none;

  }

  .starLayer2{

      animation: none;

  }

  .starLayer3{

      animation: none;

  }


  .rotating1 {
      -webkit-animation: none;
  }

  .rotating2 {
      -webkit-animation: none;
  }

  .rotating3 {
      -webkit-animation: none;
  }


}
