body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
    overflow: hidden;
  }
  
  .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);
    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: 5.4em;
    --top-offset: 85.45vh;
    --fall-duration: 7.667s;
    --fall-delay: 9.819s;
  }
  .star:nth-child(2) {
    --star-tail-length: 6.94em;
    --top-offset: 79.94vh;
    --fall-duration: 7.225s;
    --fall-delay: 9.145s;
  }
  .star:nth-child(3) {
    --star-tail-length: 5.62em;
    --top-offset: 91.8vh;
    --fall-duration: 7.936s;
    --fall-delay: 5.285s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.18em;
    --top-offset: 47.87vh;
    --fall-duration: 11.026s;
    --fall-delay: 5.582s;
  }
  .star:nth-child(5) {
    --star-tail-length: 5.51em;
    --top-offset: 90.28vh;
    --fall-duration: 6.526s;
    --fall-delay: 2.035s;
  }
  .star:nth-child(6) {
    --star-tail-length: 6.93em;
    --top-offset: 98.9vh;
    --fall-duration: 11.876s;
    --fall-delay: 0.755s;
  }
  .star:nth-child(7) {
    --star-tail-length: 6.31em;
    --top-offset: 84.45vh;
    --fall-duration: 11.539s;
    --fall-delay: 6.149s;
  }
  .star:nth-child(8) {
    --star-tail-length: 6.9em;
    --top-offset: 3.84vh;
    --fall-duration: 8.033s;
    --fall-delay: 9.749s;
  }
  .star:nth-child(9) {
    --star-tail-length: 7.44em;
    --top-offset: 1.64vh;
    --fall-duration: 8.738s;
    --fall-delay: 3.626s;
  }
  .star:nth-child(10) {
    --star-tail-length: 5.75em;
    --top-offset: 22.61vh;
    --fall-duration: 9.262s;
    --fall-delay: 7.932s;
  }
  .star:nth-child(11) {
    --star-tail-length: 6.37em;
    --top-offset: 65.12vh;
    --fall-duration: 9.207s;
    --fall-delay: 2.483s;
  }
  .star:nth-child(12) {
    --star-tail-length: 6.27em;
    --top-offset: 22.67vh;
    --fall-duration: 6.644s;
    --fall-delay: 6.805s;
  }
  .star:nth-child(13) {
    --star-tail-length: 6.06em;
    --top-offset: 50.89vh;
    --fall-duration: 10.315s;
    --fall-delay: 0.786s;
  }
  .star:nth-child(14) {
    --star-tail-length: 5.77em;
    --top-offset: 32.84vh;
    --fall-duration: 7.5s;
    --fall-delay: 9.785s;
  }
  .star:nth-child(15) {
    --star-tail-length: 7.48em;
    --top-offset: 62.93vh;
    --fall-duration: 10.41s;
    --fall-delay: 5.593s;
  }
  .star:nth-child(16) {
    --star-tail-length: 6.63em;
    --top-offset: 94.53vh;
    --fall-duration: 11.425s;
    --fall-delay: 3.043s;
  }
  .star:nth-child(17) {
    --star-tail-length: 6.82em;
    --top-offset: 88.97vh;
    --fall-duration: 8.261s;
    --fall-delay: 9.955s;
  }
  .star:nth-child(18) {
    --star-tail-length: 7.16em;
    --top-offset: 21.43vh;
    --fall-duration: 7.458s;
    --fall-delay: 1.694s;
  }
  .star:nth-child(19) {
    --star-tail-length: 6.47em;
    --top-offset: 95.97vh;
    --fall-duration: 10.825s;
    --fall-delay: 3.941s;
  }
  .star:nth-child(20) {
    --star-tail-length: 7.13em;
    --top-offset: 43.6vh;
    --fall-duration: 6.481s;
    --fall-delay: 2.942s;
  }
  .star:nth-child(21) {
    --star-tail-length: 5.29em;
    --top-offset: 1.58vh;
    --fall-duration: 9.436s;
    --fall-delay: 3.457s;
  }
  .star:nth-child(22) {
    --star-tail-length: 5.66em;
    --top-offset: 48.86vh;
    --fall-duration: 11.299s;
    --fall-delay: 6.801s;
  }
  .star:nth-child(23) {
    --star-tail-length: 6.85em;
    --top-offset: 46.39vh;
    --fall-duration: 10.693s;
    --fall-delay: 3.913s;
  }
  .star:nth-child(24) {
    --star-tail-length: 6.16em;
    --top-offset: 15.47vh;
    --fall-duration: 11.543s;
    --fall-delay: 4.804s;
  }
  .star:nth-child(25) {
    --star-tail-length: 6.87em;
    --top-offset: 7.21vh;
    --fall-duration: 8.615s;
    --fall-delay: 9.354s;
  }
  .star:nth-child(26) {
    --star-tail-length: 6.5em;
    --top-offset: 5.88vh;
    --fall-duration: 10.46s;
    --fall-delay: 7.662s;
  }
  .star:nth-child(27) {
    --star-tail-length: 6.85em;
    --top-offset: 86vh;
    --fall-duration: 6.546s;
    --fall-delay: 8.707s;
  }
  .star:nth-child(28) {
    --star-tail-length: 7.26em;
    --top-offset: 35.93vh;
    --fall-duration: 6.928s;
    --fall-delay: 7.306s;
  }
  .star:nth-child(29) {
    --star-tail-length: 5.97em;
    --top-offset: 59.95vh;
    --fall-duration: 10.692s;
    --fall-delay: 5.064s;
  }
  .star:nth-child(30) {
    --star-tail-length: 6.48em;
    --top-offset: 55.95vh;
    --fall-duration: 6.253s;
    --fall-delay: 8.542s;
  }
  .star:nth-child(31) {
    --star-tail-length: 6.07em;
    --top-offset: 98.36vh;
    --fall-duration: 11.903s;
    --fall-delay: 2.916s;
  }
  .star:nth-child(32) {
    --star-tail-length: 5.56em;
    --top-offset: 12.76vh;
    --fall-duration: 8.085s;
    --fall-delay: 4.289s;
  }
  .star:nth-child(33) {
    --star-tail-length: 5.74em;
    --top-offset: 69.58vh;
    --fall-duration: 7.45s;
    --fall-delay: 4.375s;
  }
  .star:nth-child(34) {
    --star-tail-length: 6em;
    --top-offset: 41.73vh;
    --fall-duration: 10.482s;
    --fall-delay: 6.241s;
  }
  .star:nth-child(35) {
    --star-tail-length: 6.25em;
    --top-offset: 70.14vh;
    --fall-duration: 9.265s;
    --fall-delay: 7.167s;
  }
  .star:nth-child(36) {
    --star-tail-length: 5.21em;
    --top-offset: 97.51vh;
    --fall-duration: 6.263s;
    --fall-delay: 7.063s;
  }
  .star:nth-child(37) {
    --star-tail-length: 6.59em;
    --top-offset: 42.45vh;
    --fall-duration: 9.426s;
    --fall-delay: 2.742s;
  }
  .star:nth-child(38) {
    --star-tail-length: 7.07em;
    --top-offset: 46.86vh;
    --fall-duration: 7.215s;
    --fall-delay: 1.483s;
  }
  .star:nth-child(39) {
    --star-tail-length: 6.59em;
    --top-offset: 97.05vh;
    --fall-duration: 10.938s;
    --fall-delay: 5.464s;
  }
  .star:nth-child(40) {
    --star-tail-length: 6.73em;
    --top-offset: 32.63vh;
    --fall-duration: 11.87s;
    --fall-delay: 0.072s;
  }
  .star:nth-child(41) {
    --star-tail-length: 6.51em;
    --top-offset: 35.45vh;
    --fall-duration: 10.199s;
    --fall-delay: 8.579s;
  }
  .star:nth-child(42) {
    --star-tail-length: 5.46em;
    --top-offset: 28.84vh;
    --fall-duration: 6.043s;
    --fall-delay: 0.812s;
  }
  .star:nth-child(43) {
    --star-tail-length: 5.52em;
    --top-offset: 83.71vh;
    --fall-duration: 8.649s;
    --fall-delay: 5.109s;
  }
  .star:nth-child(44) {
    --star-tail-length: 6.6em;
    --top-offset: 81.14vh;
    --fall-duration: 9.045s;
    --fall-delay: 9.268s;
  }
  .star:nth-child(45) {
    --star-tail-length: 7.45em;
    --top-offset: 97.86vh;
    --fall-duration: 11.93s;
    --fall-delay: 6.257s;
  }
  .star:nth-child(46) {
    --star-tail-length: 5.64em;
    --top-offset: 1.73vh;
    --fall-duration: 6.99s;
    --fall-delay: 3.093s;
  }
  .star:nth-child(47) {
    --star-tail-length: 5.42em;
    --top-offset: 3.08vh;
    --fall-duration: 11.238s;
    --fall-delay: 7.297s;
  }
  .star:nth-child(48) {
    --star-tail-length: 6.5em;
    --top-offset: 69.84vh;
    --fall-duration: 7.361s;
    --fall-delay: 0.69s;
  }
  .star:nth-child(49) {
    --star-tail-length: 5.08em;
    --top-offset: 22.45vh;
    --fall-duration: 6.082s;
    --fall-delay: 6.707s;
  }
  .star:nth-child(50) {
    --star-tail-length: 7.25em;
    --top-offset: 58.86vh;
    --fall-duration: 7.534s;
    --fall-delay: 6.185s;
  }
  .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;
    }
  }