.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  transform: rotate(-45deg);
  pointer-events: none;
}

.star {
  --star-color: var(--primary-color);
  opacity: 20%;
  --star-tail-length: 1em;
  --star-tail-height: 2px;
  --star-width: calc(var(--star-tail-length) / 20);
  --fall-duration: 9s;
  --tail-fade-duration: var(--fall-duration);
  position: absolute;
  top: var(--top-offset);
  left: 0;
  width: var(--star-tail-length);
  height: var(--star-tail-height);
  color: var(--star-color);
  background: linear-gradient(45deg, currentColor, transparent);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px currentColor);
  transform: translate3d(104em, 0, 0);
  animation: fall var(--fall-duration) var(--fall-delay) linear infinite,
    tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
  .star {
    animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  }
}
.star:nth-child(1) {
  --star-tail-length: 3.78em;
  --top-offset: 36.32vh;
  --fall-duration: 10.065s;
  --fall-delay: 1.052s;
}
.star:nth-child(2) {
  --star-tail-length: 5.18em;
  --top-offset: 85.61vh;
  --fall-duration: 9.331s;
  --fall-delay: 7.791s;
}
.star:nth-child(3) {
  --star-tail-length: 4.6em;
  --top-offset: 54.95vh;
  --fall-duration: 6.564s;
  --fall-delay: 10.83s;
}
.star:nth-child(4) {
  --star-tail-length: 5.56em;
  --top-offset: 15.66vh;
  --fall-duration: 8.074s;
  --fall-delay: 8.703s;
}
.star:nth-child(5) {
  --star-tail-length: 5.81em;
  --top-offset: 98vh;
  --fall-duration: 6.29s;
  --fall-delay: 9.198s;
}
.star:nth-child(6) {
  --star-tail-length: 5.43em;
  --top-offset: 36.27vh;
  --fall-duration: 10.681s;
  --fall-delay: 7.899s;
}
.star:nth-child(7) {
  --star-tail-length: 7.41em;
  --top-offset: 37.55vh;
  --fall-duration: 9.769s;
  --fall-delay: 5.59s;
}
.star:nth-child(8) {
  --star-tail-length: 6.14em;
  --top-offset: 40.88vh;
  --fall-duration: 11.657s;
  --fall-delay: 4.535s;
}
.star:nth-child(9) {
  --star-tail-length: 5.12em;
  --top-offset: 37.09vh;
  --fall-duration: 9.038s;
  --fall-delay: 0.678s;
}
.star:nth-child(10) {
  --star-tail-length: 6.85em;
  --top-offset: 46.23vh;
  --fall-duration: 10.451s;
  --fall-delay: 2.454s;
}
.star:nth-child(11) {
  --star-tail-length: 6.86em;
  --top-offset: 42.27vh;
  --fall-duration: 7.769s;
  --fall-delay: 2.306s;
}
.star:nth-child(12) {
  --star-tail-length: 5.65em;
  --top-offset: 95.04vh;
  --fall-duration: 6.447s;
  --fall-delay: 3.082s;
}
.star:nth-child(13) {
  --star-tail-length: 5.78em;
  --top-offset: 36.35vh;
  --fall-duration: 7.387s;
  --fall-delay: 1.614s;
}
.star:nth-child(14) {
  --star-tail-length: 6.48em;
  --top-offset: 72.46vh;
  --fall-duration: 11.619s;
  --fall-delay: 6.25s;
}
.star:nth-child(15) {
  --star-tail-length: 7.44em;
  --top-offset: 19.52vh;
  --fall-duration: 9.577s;
  --fall-delay: 2.949s;
}
.star:nth-child(16) {
  --star-tail-length: 6.71em;
  --top-offset: 51.44vh;
  --fall-duration: 8.711s;
  --fall-delay: 5.665s;
}
.star:nth-child(17) {
  --star-tail-length: 6.57em;
  --top-offset: 51.53vh;
  --fall-duration: 7.57s;
  --fall-delay: 9.187s;
}
.star:nth-child(18) {
  --star-tail-length: 6.58em;
  --top-offset: 9.65vh;
  --fall-duration: 10.637s;
  --fall-delay: 6.589s;
}
.star:nth-child(19) {
  --star-tail-length: 6.62em;
  --top-offset: 7.69vh;
  --fall-duration: 8.844s;
  --fall-delay: 4.757s;
}
.star:nth-child(20) {
  --star-tail-length: 5.99em;
  --top-offset: 83.5vh;
  --fall-duration: 8.598s;
  --fall-delay: 2.817s;
}
.star:nth-child(21) {
  --star-tail-length: 7.16em;
  --top-offset: 73.83vh;
  --fall-duration: 10.042s;
  --fall-delay: 9.128s;
}
.star:nth-child(22) {
  --star-tail-length: 5.56em;
  --top-offset: 94.04vh;
  --fall-duration: 10.041s;
  --fall-delay: 4.297s;
}
.star:nth-child(23) {
  --star-tail-length: 7.09em;
  --top-offset: 12.66vh;
  --fall-duration: 8.4s;
  --fall-delay: 1.395s;
}
.star:nth-child(24) {
  --star-tail-length: 7.21em;
  --top-offset: 18.38vh;
  --fall-duration: 6.495s;
  --fall-delay: 2.17s;
}
.star:nth-child(25) {
  --star-tail-length: 6.78em;
  --top-offset: 4.7vh;
  --fall-duration: 8.459s;
  --fall-delay: 2.701s;
}
.star:nth-child(26) {
  --star-tail-length: 7.18em;
  --top-offset: 3.98vh;
  --fall-duration: 11.017s;
  --fall-delay: 2.956s;
}
.star:nth-child(27) {
  --star-tail-length: 5.45em;
  --top-offset: 52.28vh;
  --fall-duration: 10.743s;
  --fall-delay: 7.586s;
}
.star:nth-child(28) {
  --star-tail-length: 5.27em;
  --top-offset: 93.87vh;
  --fall-duration: 10.375s;
  --fall-delay: 7.511s;
}
.star:nth-child(29) {
  --star-tail-length: 6.27em;
  --top-offset: 78.78vh;
  --fall-duration: 11.396s;
  --fall-delay: 1.589s;
}
.star:nth-child(30) {
  --star-tail-length: 5.73em;
  --top-offset: 51.36vh;
  --fall-duration: 8.307s;
  --fall-delay: 5.433s;
}
.star:nth-child(31) {
  --star-tail-length: 6.11em;
  --top-offset: 9.73vh;
  --fall-duration: 10.296s;
  --fall-delay: 6.635s;
}
.star:nth-child(32) {
  --star-tail-length: 6.74em;
  --top-offset: 98.16vh;
  --fall-duration: 10.367s;
  --fall-delay: 1.287s;
}
.star:nth-child(33) {
  --star-tail-length: 5.61em;
  --top-offset: 10.67vh;
  --fall-duration: 8.129s;
  --fall-delay: 4.987s;
}
.star:nth-child(34) {
  --star-tail-length: 6.96em;
  --top-offset: 32.02vh;
  --fall-duration: 9.876s;
  --fall-delay: 7.887s;
}
.star:nth-child(35) {
  --star-tail-length: 6.47em;
  --top-offset: 65.53vh;
  --fall-duration: 10.859s;
  --fall-delay: 3.32s;
}
.star:nth-child(36) {
  --star-tail-length: 5.07em;
  --top-offset: 37.97vh;
  --fall-duration: 6.992s;
  --fall-delay: 5.096s;
}
.star:nth-child(37) {
  --star-tail-length: 7.48em;
  --top-offset: 24.11vh;
  --fall-duration: 9.941s;
  --fall-delay: 0.508s;
}
.star:nth-child(38) {
  --star-tail-length: 6.47em;
  --top-offset: 42.86vh;
  --fall-duration: 10.298s;
  --fall-delay: 1.918s;
}
.star:nth-child(39) {
  --star-tail-length: 5.75em;
  --top-offset: 74.52vh;
  --fall-duration: 9.999s;
  --fall-delay: 7.155s;
}
.star:nth-child(40) {
  --star-tail-length: 6.09em;
  --top-offset: 64.95vh;
  --fall-duration: 7.294s;
  --fall-delay: 6.1s;
}
.star:nth-child(41) {
  --star-tail-length: 7.27em;
  --top-offset: 89.57vh;
  --fall-duration: 8.194s;
  --fall-delay: 2.092s;
}
.star:nth-child(42) {
  --star-tail-length: 6.41em;
  --top-offset: 99.54vh;
  --fall-duration: 8.009s;
  --fall-delay: 5.396s;
}
.star:nth-child(43) {
  --star-tail-length: 5.22em;
  --top-offset: 89.95vh;
  --fall-duration: 6.338s;
  --fall-delay: 1.141s;
}
.star:nth-child(44) {
  --star-tail-length: 5.47em;
  --top-offset: 32.93vh;
  --fall-duration: 6.059s;
  --fall-delay: 3.635s;
}
.star:nth-child(45) {
  --star-tail-length: 6.37em;
  --top-offset: 31.41vh;
  --fall-duration: 8.585s;
  --fall-delay: 2.891s;
}
.star:nth-child(46) {
  --star-tail-length: 7.21em;
  --top-offset: 4.49vh;
  --fall-duration: 9.525s;
  --fall-delay: 4.283s;
}
.star:nth-child(47) {
  --star-tail-length: 7.48em;
  --top-offset: 41.26vh;
  --fall-duration: 8.856s;
  --fall-delay: 4.403s;
}
.star:nth-child(48) {
  --star-tail-length: 6.46em;
  --top-offset: 41.4vh;
  --fall-duration: 6.455s;
  --fall-delay: 7.004s;
}
.star:nth-child(49) {
  --star-tail-length: 7.2em;
  --top-offset: 51.07vh;
  --fall-duration: 8.383s;
  --fall-delay: 8.058s;
}
.star:nth-child(50) {
  --star-tail-length: 6.82em;
  --top-offset: 86.99vh;
  --fall-duration: 7.568s;
  --fall-delay: 9.866s;
}
.star::before,
.star::after {
  position: absolute;
  content: "";
  top: 0;
  left: calc(var(--star-width) / -2);
  width: var(--star-width);
  height: 100%;
  background: linear-gradient(45deg, transparent, currentColor, transparent);
  border-radius: inherit;
  animation: blink 2s linear infinite;
}
.star::before {
  transform: rotate(45deg);
}
.star::after {
  transform: rotate(-45deg);
}

@keyframes fall {
  to {
    transform: translate3d(-30em, 0, 0);
  }
}

@keyframes tail-fade {
  0%,
  50% {
    width: var(--star-tail-length);
    opacity: 1;
  }
  70%,
  80% {
    width: 0;
    opacity: 0.4;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0.6;
  }
}