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: #1b4264;
    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: 6.62em;
    --top-offset: 69.96vh;
    --fall-duration: 10.279s;
    --fall-delay: 9.466s;
  }
  .star:nth-child(2) {
    --star-tail-length: 6.41em;
    --top-offset: 71.92vh;
    --fall-duration: 7.962s;
    --fall-delay: 7.346s;
  }
  .star:nth-child(3) {
    --star-tail-length: 6.37em;
    --top-offset: 70.56vh;
    --fall-duration: 8.935s;
    --fall-delay: 3.85s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.47em;
    --top-offset: 66.84vh;
    --fall-duration: 9.006s;
    --fall-delay: 1.618s;
  }
  .star:nth-child(5) {
    --star-tail-length: 5.15em;
    --top-offset: 54.46vh;
    --fall-duration: 6.251s;
    --fall-delay: 8.818s;
  }
  .star:nth-child(6) {
    --star-tail-length: 6.32em;
    --top-offset: 79.73vh;
    --fall-duration: 9.575s;
    --fall-delay: 3.856s;
  }
  .star:nth-child(7) {
    --star-tail-length: 6.27em;
    --top-offset: 34.62vh;
    --fall-duration: 11.003s;
    --fall-delay: 3.612s;
  }
  .star:nth-child(8) {
    --star-tail-length: 6.76em;
    --top-offset: 52.64vh;
    --fall-duration: 11.74s;
    --fall-delay: 2.302s;
  }
  .star:nth-child(9) {
    --star-tail-length: 6.6em;
    --top-offset: 59vh;
    --fall-duration: 9.628s;
    --fall-delay: 9.228s;
  }
  .star:nth-child(10) {
    --star-tail-length: 7.29em;
    --top-offset: 79.25vh;
    --fall-duration: 10.003s;
    --fall-delay: 1.248s;
  }
  .star:nth-child(11) {
    --star-tail-length: 6.84em;
    --top-offset: 39.85vh;
    --fall-duration: 9.912s;
    --fall-delay: 8.534s;
  }
  .star:nth-child(12) {
    --star-tail-length: 6.82em;
    --top-offset: 87.33vh;
    --fall-duration: 9.984s;
    --fall-delay: 5.98s;
  }
  .star:nth-child(13) {
    --star-tail-length: 6.77em;
    --top-offset: 93.22vh;
    --fall-duration: 10.887s;
    --fall-delay: 5.352s;
  }
  .star:nth-child(14) {
    --star-tail-length: 7.01em;
    --top-offset: 74.95vh;
    --fall-duration: 6.748s;
    --fall-delay: 6.079s;
  }
  .star:nth-child(15) {
    --star-tail-length: 7.04em;
    --top-offset: 96.08vh;
    --fall-duration: 7.074s;
    --fall-delay: 7.155s;
  }
  .star:nth-child(16) {
    --star-tail-length: 6.89em;
    --top-offset: 71.86vh;
    --fall-duration: 11.336s;
    --fall-delay: 3.632s;
  }
  .star:nth-child(17) {
    --star-tail-length: 6.59em;
    --top-offset: 15.57vh;
    --fall-duration: 7.77s;
    --fall-delay: 6.821s;
  }
  .star:nth-child(18) {
    --star-tail-length: 6.3em;
    --top-offset: 28.76vh;
    --fall-duration: 11.281s;
    --fall-delay: 9.58s;
  }
  .star:nth-child(19) {
    --star-tail-length: 5.33em;
    --top-offset: 70.3vh;
    --fall-duration: 6.099s;
    --fall-delay: 7.619s;
  }
  .star:nth-child(20) {
    --star-tail-length: 5.18em;
    --top-offset: 31vh;
    --fall-duration: 6.861s;
    --fall-delay: 1.351s;
  }
  .star:nth-child(21) {
    --star-tail-length: 5.65em;
    --top-offset: 66.18vh;
    --fall-duration: 7.614s;
    --fall-delay: 1.044s;
  }
  .star:nth-child(22) {
    --star-tail-length: 5.15em;
    --top-offset: 90.6vh;
    --fall-duration: 11.828s;
    --fall-delay: 3.783s;
  }
  .star:nth-child(23) {
    --star-tail-length: 5.49em;
    --top-offset: 33.22vh;
    --fall-duration: 9.201s;
    --fall-delay: 8.618s;
  }
  .star:nth-child(24) {
    --star-tail-length: 5.4em;
    --top-offset: 51.59vh;
    --fall-duration: 11.668s;
    --fall-delay: 3.659s;
  }
  .star:nth-child(25) {
    --star-tail-length: 5.25em;
    --top-offset: 13.67vh;
    --fall-duration: 11.899s;
    --fall-delay: 6.815s;
  }
  .star:nth-child(26) {
    --star-tail-length: 5.45em;
    --top-offset: 34.24vh;
    --fall-duration: 8.07s;
    --fall-delay: 3.625s;
  }
  .star:nth-child(27) {
    --star-tail-length: 5.65em;
    --top-offset: 51.48vh;
    --fall-duration: 6.039s;
    --fall-delay: 8.226s;
  }
  .star:nth-child(28) {
    --star-tail-length: 6.08em;
    --top-offset: 48.48vh;
    --fall-duration: 10.911s;
    --fall-delay: 6.315s;
  }
  .star:nth-child(29) {
    --star-tail-length: 5.55em;
    --top-offset: 72.88vh;
    --fall-duration: 11.415s;
    --fall-delay: 9.858s;
  }
  .star:nth-child(30) {
    --star-tail-length: 6.62em;
    --top-offset: 70.83vh;
    --fall-duration: 8.511s;
    --fall-delay: 8.686s;
  }
  .star:nth-child(31) {
    --star-tail-length: 7.01em;
    --top-offset: 93.35vh;
    --fall-duration: 6.497s;
    --fall-delay: 7.973s;
  }
  .star:nth-child(32) {
    --star-tail-length: 5.54em;
    --top-offset: 71.72vh;
    --fall-duration: 7.357s;
    --fall-delay: 6.809s;
  }
  .star:nth-child(33) {
    --star-tail-length: 7.34em;
    --top-offset: 54.11vh;
    --fall-duration: 10.891s;
    --fall-delay: 4.835s;
  }
  .star:nth-child(34) {
    --star-tail-length: 6.65em;
    --top-offset: 88.21vh;
    --fall-duration: 7.569s;
    --fall-delay: 7.051s;
  }
  .star:nth-child(35) {
    --star-tail-length: 5.6em;
    --top-offset: 65.71vh;
    --fall-duration: 7.797s;
    --fall-delay: 7.111s;
  }
  .star:nth-child(36) {
    --star-tail-length: 5.4em;
    --top-offset: 66.56vh;
    --fall-duration: 6.723s;
    --fall-delay: 4.074s;
  }
  .star:nth-child(37) {
    --star-tail-length: 5.52em;
    --top-offset: 49.49vh;
    --fall-duration: 6.801s;
    --fall-delay: 6.083s;
  }
  .star:nth-child(38) {
    --star-tail-length: 7.04em;
    --top-offset: 75.17vh;
    --fall-duration: 8.12s;
    --fall-delay: 7.047s;
  }
  .star:nth-child(39) {
    --star-tail-length: 5.47em;
    --top-offset: 72.46vh;
    --fall-duration: 11.466s;
    --fall-delay: 9.757s;
  }
  .star:nth-child(40) {
    --star-tail-length: 7.21em;
    --top-offset: 7.8vh;
    --fall-duration: 11.725s;
    --fall-delay: 7.171s;
  }
  .star:nth-child(41) {
    --star-tail-length: 6.13em;
    --top-offset: 57.86vh;
    --fall-duration: 8.971s;
    --fall-delay: 3.316s;
  }
  .star:nth-child(42) {
    --star-tail-length: 7.09em;
    --top-offset: 79.38vh;
    --fall-duration: 8.317s;
    --fall-delay: 6.114s;
  }
  .star:nth-child(43) {
    --star-tail-length: 7.15em;
    --top-offset: 71.02vh;
    --fall-duration: 8.275s;
    --fall-delay: 3.273s;
  }
  .star:nth-child(44) {
    --star-tail-length: 6.41em;
    --top-offset: 38.44vh;
    --fall-duration: 6.926s;
    --fall-delay: 9.601s;
  }
  .star:nth-child(45) {
    --star-tail-length: 5.23em;
    --top-offset: 82.28vh;
    --fall-duration: 9.645s;
    --fall-delay: 8.333s;
  }
  .star:nth-child(46) {
    --star-tail-length: 5.97em;
    --top-offset: 41.99vh;
    --fall-duration: 10.491s;
    --fall-delay: 5.553s;
  }
  .star:nth-child(47) {
    --star-tail-length: 5.65em;
    --top-offset: 43.76vh;
    --fall-duration: 7.948s;
    --fall-delay: 6.45s;
  }
  .star:nth-child(48) {
    --star-tail-length: 7.06em;
    --top-offset: 45.22vh;
    --fall-duration: 10.281s;
    --fall-delay: 5.736s;
  }
  .star:nth-child(49) {
    --star-tail-length: 5.09em;
    --top-offset: 36.23vh;
    --fall-duration: 11.355s;
    --fall-delay: 7.199s;
  }
  .star:nth-child(50) {
    --star-tail-length: 6.19em;
    --top-offset: 4.38vh;
    --fall-duration: 8.666s;
    --fall-delay: 0.553s;
  }
  .star::before, .star::after {
    position: absolute;
    content: "";
    top: 0;
    left: calc(var(--star-width) / -2);
    width: var(--star-width);
    height: 100%;
    background: #1b4264;
    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;
    }
  }