.star-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1200;
  pointer-events: none;
}

.small-star {
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 50px;
  transform: translateY(-100vh);
}

.small-star img {
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
}

body.loaded .star-animation .small-star {
  animation: fallingSmallStar 2s ease-in-out forwards;
}

body.loaded .star-animation .small-star img {
  animation: rotate 2s linear forwards;
}

body.loaded .small-star.small-star01 {
  left: 5%;
  animation-delay: 0.5s;
}
body.loaded .small-star.small-star01 img {
  animation-delay: 0.5s;
}

body.loaded .small-star.small-star02 {
  left: 20%;
  animation-delay: 0.7s;
}
body.loaded .small-star.small-star02 img {
  animation-delay: 0.7s;
}

body.loaded .small-star.small-star03 {
  left: 35%;
  animation-delay: 0.1s;
}
body.loaded .small-star.small-star03 img {
  animation-delay: 0.1s;
}

body.loaded .small-star.small-star04 {
  left: 50%;
  animation-delay: 0.9s;
}
body.loaded .small-star.small-star04 img {
  animation-delay: 0.9s;
}

body.loaded .small-star.small-star05 {
  left: 65%;
  animation-delay: 0.3s;
}
body.loaded .small-star.small-star05 img {
  animation-delay: 0.3s;
}

body.loaded .small-star.small-star06 {
  left: 80%;
  animation-delay: 1.1s;
}
body.loaded .small-star.small-star06 img {
  animation-delay: 1.1s;
}

body.loaded .small-star.small-star07 {
  left: 95%;
  animation-delay: 0.5s;
}
body.loaded .small-star.small-star07 img {
  animation-delay: 0.5s;
}

@keyframes rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

@keyframes fallingSmallStar {
  0% { transform: translateY(-100vh); }
  60% { opacity: 1; }
  100% { transform: translateY(calc(-13vh)); opacity: 0; }
}



@media (max-width: 768px) {

}