.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    transform: rotate(-45deg);
  }
  
  .star {
    --star-color: var(--primary-color);
    --star-tail-length: 6em;
    --star-tail-height: 2px;
    --star-width: calc(var(--star-tail-length) / 6);
    --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);
    color: white; 
    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: 7.36em;
    --top-offset: 38.13vh;
    --fall-duration: 10.137s;
    --fall-delay: 6.584s;
  }
  .star:nth-child(2) {
    --star-tail-length: 5.58em;
    --top-offset: 1.42vh;
    --fall-duration: 6.964s;
    --fall-delay: 7.04s;
  }
  .star:nth-child(3) {
    --star-tail-length: 5.34em;
    --top-offset: 98.2vh;
    --fall-duration: 8.08s;
    --fall-delay: 7.121s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.53em;
    --top-offset: 85.94vh;
    --fall-duration: 7.665s;
    --fall-delay: 0.258s;
  }
  .star:nth-child(5) {
    --star-tail-length: 6.06em;
    --top-offset: 94.61vh;
    --fall-duration: 6.64s;
    --fall-delay: 3.175s;
  }
  .star:nth-child(6) {
    --star-tail-length: 5.78em;
    --top-offset: 82.68vh;
    --fall-duration: 8.341s;
    --fall-delay: 3.712s;
  }
  .star:nth-child(7) {
    --star-tail-length: 5.29em;
    --top-offset: 53.13vh;
    --fall-duration: 9.613s;
    --fall-delay: 6.995s;
  }
  .star:nth-child(8) {
    --star-tail-length: 6.4em;
    --top-offset: 84.87vh;
    --fall-duration: 10.781s;
    --fall-delay: 0.139s;
  }
  .star:nth-child(9) {
    --star-tail-length: 6.16em;
    --top-offset: 62.87vh;
    --fall-duration: 11.601s;
    --fall-delay: 5.782s;
  }
  .star:nth-child(10) {
    --star-tail-length: 6.37em;
    --top-offset: 36.08vh;
    --fall-duration: 8.84s;
    --fall-delay: 6.991s;
  }
  .star:nth-child(11) {
    --star-tail-length: 5.03em;
    --top-offset: 3.7vh;
    --fall-duration: 9.962s;
    --fall-delay: 8.798s;
  }
  .star:nth-child(12) {
    --star-tail-length: 7.03em;
    --top-offset: 98.93vh;
    --fall-duration: 11.579s;
    --fall-delay: 4.973s;
  }
  .star:nth-child(13) {
    --star-tail-length: 7.32em;
    --top-offset: 35.16vh;
    --fall-duration: 9.607s;
    --fall-delay: 5.611s;
  }
  .star:nth-child(14) {
    --star-tail-length: 5.22em;
    --top-offset: 58.51vh;
    --fall-duration: 6.468s;
    --fall-delay: 8.278s;
  }
  .star:nth-child(15) {
    --star-tail-length: 7.21em;
    --top-offset: 57.96vh;
    --fall-duration: 11.239s;
    --fall-delay: 0.905s;
  }
  .star:nth-child(16) {
    --star-tail-length: 5.8em;
    --top-offset: 26.52vh;
    --fall-duration: 10.191s;
    --fall-delay: 1.494s;
  }
  .star:nth-child(17) {
    --star-tail-length: 6.53em;
    --top-offset: 82.71vh;
    --fall-duration: 11.334s;
    --fall-delay: 4.568s;
  }
  .star:nth-child(18) {
    --star-tail-length: 6.96em;
    --top-offset: 11.08vh;
    --fall-duration: 9.627s;
    --fall-delay: 4.413s;
  }
  .star:nth-child(19) {
    --star-tail-length: 7.44em;
    --top-offset: 98.98vh;
    --fall-duration: 11.514s;
    --fall-delay: 4.964s;
  }
  .star:nth-child(20) {
    --star-tail-length: 7.47em;
    --top-offset: 98.7vh;
    --fall-duration: 6.675s;
    --fall-delay: 3.98s;
  }
  .star:nth-child(21) {
    --star-tail-length: 7.17em;
    --top-offset: 21.4vh;
    --fall-duration: 11.556s;
    --fall-delay: 5.263s;
  }
  .star:nth-child(22) {
    --star-tail-length: 7.16em;
    --top-offset: 56.62vh;
    --fall-duration: 8.351s;
    --fall-delay: 3.271s;
  }
  .star:nth-child(23) {
    --star-tail-length: 5.89em;
    --top-offset: 10.24vh;
    --fall-duration: 9.23s;
    --fall-delay: 7.192s;
  }
  .star:nth-child(24) {
    --star-tail-length: 7.25em;
    --top-offset: 28.66vh;
    --fall-duration: 8.661s;
    --fall-delay: 7.993s;
  }
  .star:nth-child(25) {
    --star-tail-length: 7.38em;
    --top-offset: 75.76vh;
    --fall-duration: 10.746s;
    --fall-delay: 0.973s;
  }
  .star:nth-child(26) {
    --star-tail-length: 6.54em;
    --top-offset: 25.15vh;
    --fall-duration: 8.56s;
    --fall-delay: 8.191s;
  }
  .star:nth-child(27) {
    --star-tail-length: 5.41em;
    --top-offset: 52.96vh;
    --fall-duration: 9.98s;
    --fall-delay: 8.791s;
  }
  .star:nth-child(28) {
    --star-tail-length: 5.36em;
    --top-offset: 27.99vh;
    --fall-duration: 8.061s;
    --fall-delay: 6.263s;
  }
  .star:nth-child(29) {
    --star-tail-length: 5.66em;
    --top-offset: 6.32vh;
    --fall-duration: 8.254s;
    --fall-delay: 5.906s;
  }
  .star:nth-child(30) {
    --star-tail-length: 6.34em;
    --top-offset: 47.36vh;
    --fall-duration: 9.373s;
    --fall-delay: 1.355s;
  }
  .star:nth-child(31) {
    --star-tail-length: 6.54em;
    --top-offset: 94.53vh;
    --fall-duration: 8.783s;
    --fall-delay: 0.734s;
  }
  .star:nth-child(32) {
    --star-tail-length: 6.04em;
    --top-offset: 7.57vh;
    --fall-duration: 8.282s;
    --fall-delay: 1.087s;
  }
  .star:nth-child(33) {
    --star-tail-length: 5.64em;
    --top-offset: 3.25vh;
    --fall-duration: 6.07s;
    --fall-delay: 3.15s;
  }
  .star:nth-child(34) {
    --star-tail-length: 5.48em;
    --top-offset: 49.04vh;
    --fall-duration: 7.471s;
    --fall-delay: 4.424s;
  }
  .star:nth-child(35) {
    --star-tail-length: 5.58em;
    --top-offset: 89.11vh;
    --fall-duration: 6.438s;
    --fall-delay: 9.59s;
  }
  .star:nth-child(36) {
    --star-tail-length: 6.42em;
    --top-offset: 60.89vh;
    --fall-duration: 7.705s;
    --fall-delay: 9.598s;
  }
  .star:nth-child(37) {
    --star-tail-length: 5.9em;
    --top-offset: 22.21vh;
    --fall-duration: 7.244s;
    --fall-delay: 4.45s;
  }
  .star:nth-child(38) {
    --star-tail-length: 5.18em;
    --top-offset: 40.42vh;
    --fall-duration: 11.457s;
    --fall-delay: 2.633s;
  }
  .star:nth-child(39) {
    --star-tail-length: 6.46em;
    --top-offset: 87.19vh;
    --fall-duration: 7.733s;
    --fall-delay: 1.331s;
  }
  .star:nth-child(40) {
    --star-tail-length: 5.98em;
    --top-offset: 29.8vh;
    --fall-duration: 6.783s;
    --fall-delay: 2.5s;
  }
  .star:nth-child(41) {
    --star-tail-length: 6.68em;
    --top-offset: 0.59vh;
    --fall-duration: 11.707s;
    --fall-delay: 7.179s;
  }
  .star:nth-child(42) {
    --star-tail-length: 6em;
    --top-offset: 91.22vh;
    --fall-duration: 9.645s;
    --fall-delay: 5.711s;
  }
  .star:nth-child(43) {
    --star-tail-length: 7.23em;
    --top-offset: 44.74vh;
    --fall-duration: 11.78s;
    --fall-delay: 5.192s;
  }
  .star:nth-child(44) {
    --star-tail-length: 7.36em;
    --top-offset: 94.27vh;
    --fall-duration: 6.843s;
    --fall-delay: 4.243s;
  }
  .star:nth-child(45) {
    --star-tail-length: 7.39em;
    --top-offset: 43.27vh;
    --fall-duration: 7.817s;
    --fall-delay: 1.502s;
  }
  .star:nth-child(46) {
    --star-tail-length: 6.26em;
    --top-offset: 98.67vh;
    --fall-duration: 10.774s;
    --fall-delay: 4.1s;
  }
  .star:nth-child(47) {
    --star-tail-length: 5.02em;
    --top-offset: 82.41vh;
    --fall-duration: 7.719s;
    --fall-delay: 7.265s;
  }
  .star:nth-child(48) {
    --star-tail-length: 6.51em;
    --top-offset: 7.59vh;
    --fall-duration: 9.183s;
    --fall-delay: 9.153s;
  }
  .star:nth-child(49) {
    --star-tail-length: 5.02em;
    --top-offset: 88vh;
    --fall-duration: 8.875s;
    --fall-delay: 9.435s;
  }
  .star:nth-child(50) {
    --star-tail-length: 6.56em;
    --top-offset: 83.96vh;
    --fall-duration: 11.588s;
    --fall-delay: 1.263s;
  }
  .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;
    }
  }