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: 7.5em;
    --top-offset: 86.36vh;
    --fall-duration: 6.402s;
    --fall-delay: 5.249s;
  }
  .star:nth-child(2) {
    --star-tail-length: 7.04em;
    --top-offset: 61.52vh;
    --fall-duration: 9.754s;
    --fall-delay: 4.411s;
  }
  .star:nth-child(3) {
    --star-tail-length: 6.44em;
    --top-offset: 15.92vh;
    --fall-duration: 6.148s;
    --fall-delay: 9.869s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.85em;
    --top-offset: 30.46vh;
    --fall-duration: 7.224s;
    --fall-delay: 5.64s;
  }
  .star:nth-child(5) {
    --star-tail-length: 5.39em;
    --top-offset: 46.4vh;
    --fall-duration: 6.885s;
    --fall-delay: 0.051s;
  }
  .star:nth-child(6) {
    --star-tail-length: 7.33em;
    --top-offset: 16.56vh;
    --fall-duration: 8.809s;
    --fall-delay: 7.231s;
  }
  .star:nth-child(7) {
    --star-tail-length: 6.71em;
    --top-offset: 55.27vh;
    --fall-duration: 11.143s;
    --fall-delay: 9.803s;
  }
  .star:nth-child(8) {
    --star-tail-length: 7.23em;
    --top-offset: 21.66vh;
    --fall-duration: 10.355s;
    --fall-delay: 2.397s;
  }
  .star:nth-child(9) {
    --star-tail-length: 6.18em;
    --top-offset: 42.49vh;
    --fall-duration: 7.498s;
    --fall-delay: 5.782s;
  }
  .star:nth-child(10) {
    --star-tail-length: 7.11em;
    --top-offset: 45.85vh;
    --fall-duration: 6.691s;
    --fall-delay: 9.995s;
  }
  .star:nth-child(11) {
    --star-tail-length: 5.54em;
    --top-offset: 48.36vh;
    --fall-duration: 7.485s;
    --fall-delay: 2.297s;
  }
  .star:nth-child(12) {
    --star-tail-length: 7.05em;
    --top-offset: 60.91vh;
    --fall-duration: 10.165s;
    --fall-delay: 0.059s;
  }
  .star:nth-child(13) {
    --star-tail-length: 6.26em;
    --top-offset: 85.86vh;
    --fall-duration: 11.56s;
    --fall-delay: 5.705s;
  }
  .star:nth-child(14) {
    --star-tail-length: 6.91em;
    --top-offset: 4.61vh;
    --fall-duration: 10.048s;
    --fall-delay: 7.466s;
  }
  .star:nth-child(15) {
    --star-tail-length: 5.26em;
    --top-offset: 92.71vh;
    --fall-duration: 8.159s;
    --fall-delay: 1.585s;
  }
  .star:nth-child(16) {
    --star-tail-length: 7.47em;
    --top-offset: 66.86vh;
    --fall-duration: 11.89s;
    --fall-delay: 3.138s;
  }
  .star:nth-child(17) {
    --star-tail-length: 6.95em;
    --top-offset: 99.95vh;
    --fall-duration: 10.704s;
    --fall-delay: 1.953s;
  }
  .star:nth-child(18) {
    --star-tail-length: 6.75em;
    --top-offset: 14.05vh;
    --fall-duration: 6.833s;
    --fall-delay: 5.796s;
  }
  .star:nth-child(19) {
    --star-tail-length: 7.38em;
    --top-offset: 76.61vh;
    --fall-duration: 6.655s;
    --fall-delay: 2.863s;
  }
  .star:nth-child(20) {
    --star-tail-length: 6em;
    --top-offset: 98.92vh;
    --fall-duration: 11.361s;
    --fall-delay: 8.629s;
  }
  .star:nth-child(21) {
    --star-tail-length: 5.09em;
    --top-offset: 67.91vh;
    --fall-duration: 8.395s;
    --fall-delay: 5.452s;
  }
  .star:nth-child(22) {
    --star-tail-length: 5em;
    --top-offset: 63.11vh;
    --fall-duration: 6.994s;
    --fall-delay: 9.083s;
  }
  .star:nth-child(23) {
    --star-tail-length: 7.31em;
    --top-offset: 67.82vh;
    --fall-duration: 11.887s;
    --fall-delay: 4.72s;
  }
  .star:nth-child(24) {
    --star-tail-length: 6.81em;
    --top-offset: 64.26vh;
    --fall-duration: 10.516s;
    --fall-delay: 4.266s;
  }
  .star:nth-child(25) {
    --star-tail-length: 5.98em;
    --top-offset: 55.76vh;
    --fall-duration: 11.057s;
    --fall-delay: 2.362s;
  }
  .star:nth-child(26) {
    --star-tail-length: 5.34em;
    --top-offset: 59.58vh;
    --fall-duration: 11.624s;
    --fall-delay: 5.344s;
  }
  .star:nth-child(27) {
    --star-tail-length: 6.86em;
    --top-offset: 42.67vh;
    --fall-duration: 8.941s;
    --fall-delay: 4.531s;
  }
  .star:nth-child(28) {
    --star-tail-length: 6.11em;
    --top-offset: 62.72vh;
    --fall-duration: 9.308s;
    --fall-delay: 7.75s;
  }
  .star:nth-child(29) {
    --star-tail-length: 6.43em;
    --top-offset: 90.5vh;
    --fall-duration: 10.215s;
    --fall-delay: 4.58s;
  }
  .star:nth-child(30) {
    --star-tail-length: 5.66em;
    --top-offset: 58.72vh;
    --fall-duration: 7.949s;
    --fall-delay: 7.88s;
  }
  .star:nth-child(31) {
    --star-tail-length: 6.5em;
    --top-offset: 32.74vh;
    --fall-duration: 6.351s;
    --fall-delay: 0.645s;
  }
  .star:nth-child(32) {
    --star-tail-length: 5.22em;
    --top-offset: 26.81vh;
    --fall-duration: 10.449s;
    --fall-delay: 5.285s;
  }
  .star:nth-child(33) {
    --star-tail-length: 7.15em;
    --top-offset: 93.55vh;
    --fall-duration: 9.723s;
    --fall-delay: 1.698s;
  }
  .star:nth-child(34) {
    --star-tail-length: 5.28em;
    --top-offset: 71.38vh;
    --fall-duration: 6.94s;
    --fall-delay: 7.689s;
  }
  .star:nth-child(35) {
    --star-tail-length: 5.58em;
    --top-offset: 98.07vh;
    --fall-duration: 7.73s;
    --fall-delay: 2.884s;
  }
  .star:nth-child(36) {
    --star-tail-length: 5.62em;
    --top-offset: 47.76vh;
    --fall-duration: 9.187s;
    --fall-delay: 0.58s;
  }
  .star:nth-child(37) {
    --star-tail-length: 7.1em;
    --top-offset: 80.62vh;
    --fall-duration: 10.627s;
    --fall-delay: 2.19s;
  }
  .star:nth-child(38) {
    --star-tail-length: 6.44em;
    --top-offset: 95.53vh;
    --fall-duration: 9.545s;
    --fall-delay: 1.066s;
  }
  .star:nth-child(39) {
    --star-tail-length: 7.11em;
    --top-offset: 55.54vh;
    --fall-duration: 9.183s;
    --fall-delay: 6.278s;
  }
  .star:nth-child(40) {
    --star-tail-length: 6.2em;
    --top-offset: 59.05vh;
    --fall-duration: 8.034s;
    --fall-delay: 1.618s;
  }
  .star:nth-child(41) {
    --star-tail-length: 7.03em;
    --top-offset: 69.06vh;
    --fall-duration: 6.42s;
    --fall-delay: 3.131s;
  }
  .star:nth-child(42) {
    --star-tail-length: 5.62em;
    --top-offset: 2.9vh;
    --fall-duration: 11.568s;
    --fall-delay: 7.98s;
  }
  .star:nth-child(43) {
    --star-tail-length: 7.43em;
    --top-offset: 85.97vh;
    --fall-duration: 6.325s;
    --fall-delay: 9.864s;
  }
  .star:nth-child(44) {
    --star-tail-length: 5.64em;
    --top-offset: 30.59vh;
    --fall-duration: 11.647s;
    --fall-delay: 8.166s;
  }
  .star:nth-child(45) {
    --star-tail-length: 6.7em;
    --top-offset: 93.38vh;
    --fall-duration: 10.072s;
    --fall-delay: 8.553s;
  }
  .star:nth-child(46) {
    --star-tail-length: 7.07em;
    --top-offset: 77.95vh;
    --fall-duration: 9.693s;
    --fall-delay: 2.227s;
  }
  .star:nth-child(47) {
    --star-tail-length: 5.04em;
    --top-offset: 52.91vh;
    --fall-duration: 10.39s;
    --fall-delay: 2.445s;
  }
  .star:nth-child(48) {
    --star-tail-length: 7.03em;
    --top-offset: 54.4vh;
    --fall-duration: 11.976s;
    --fall-delay: 5.213s;
  }
  .star:nth-child(49) {
    --star-tail-length: 6.24em;
    --top-offset: 70.37vh;
    --fall-duration: 9.052s;
    --fall-delay: 8.904s;
  }
  .star:nth-child(50) {
    --star-tail-length: 5.07em;
    --top-offset: 86.12vh;
    --fall-duration: 7.596s;
    --fall-delay: 7.168s;
  }
  .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;
    }
  }