body {
    display: flex;
    justify-content: center;
    -align-items: center;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #ffffff 80%, #c4c4c4 100%);
    overflow: hidden;
  }
  
  .stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    transform: rotate(-45deg);
  }
  
  .star {
    --star-color: #d60fbc;
    --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.23em;
    --top-offset: 73.79vh;
    --fall-duration: 8.871s;
    --fall-delay: 6.268s;
  }
  .star:nth-child(2) {
    --star-tail-length: 7.36em;
    --top-offset: 64.04vh;
    --fall-duration: 6.213s;
    --fall-delay: 6.255s;
  }
  .star:nth-child(3) {
    --star-tail-length: 5.77em;
    --top-offset: 87.2vh;
    --fall-duration: 11.268s;
    --fall-delay: 3.054s;
  }
  .star:nth-child(4) {
    --star-tail-length: 6.59em;
    --top-offset: 40.41vh;
    --fall-duration: 11.594s;
    --fall-delay: 0.033s;
  }
  .star:nth-child(5) {
    --star-tail-length: 5.65em;
    --top-offset: 17.81vh;
    --fall-duration: 6.472s;
    --fall-delay: 1.502s;
  }
  .star:nth-child(6) {
    --star-tail-length: 7.47em;
    --top-offset: 71.57vh;
    --fall-duration: 7.443s;
    --fall-delay: 0.624s;
  }
  .star:nth-child(7) {
    --star-tail-length: 6.93em;
    --top-offset: 92.38vh;
    --fall-duration: 9.216s;
    --fall-delay: 3.286s;
  }
  .star:nth-child(8) {
    --star-tail-length: 6.55em;
    --top-offset: 84vh;
    --fall-duration: 7.873s;
    --fall-delay: 6.775s;
  }
  .star:nth-child(9) {
    --star-tail-length: 5.53em;
    --top-offset: 23.3vh;
    --fall-duration: 6.26s;
    --fall-delay: 0.83s;
  }
  .star:nth-child(10) {
    --star-tail-length: 6.97em;
    --top-offset: 52.84vh;
    --fall-duration: 9.211s;
    --fall-delay: 2.955s;
  }
  .star:nth-child(11) {
    --star-tail-length: 6.75em;
    --top-offset: 13.46vh;
    --fall-duration: 8.305s;
    --fall-delay: 0.532s;
  }
  .star:nth-child(12) {
    --star-tail-length: 5.25em;
    --top-offset: 22.99vh;
    --fall-duration: 6.625s;
    --fall-delay: 3.364s;
  }
  .star:nth-child(13) {
    --star-tail-length: 6.79em;
    --top-offset: 77.14vh;
    --fall-duration: 7.901s;
    --fall-delay: 2.986s;
  }
  .star:nth-child(14) {
    --star-tail-length: 6.75em;
    --top-offset: 29.12vh;
    --fall-duration: 6.524s;
    --fall-delay: 5.346s;
  }
  .star:nth-child(15) {
    --star-tail-length: 7.13em;
    --top-offset: 94.33vh;
    --fall-duration: 10.425s;
    --fall-delay: 1.55s;
  }
  .star:nth-child(16) {
    --star-tail-length: 6.02em;
    --top-offset: 70.91vh;
    --fall-duration: 10.295s;
    --fall-delay: 2.835s;
  }
  .star:nth-child(17) {
    --star-tail-length: 7.05em;
    --top-offset: 71.61vh;
    --fall-duration: 8.019s;
    --fall-delay: 4.341s;
  }
  .star:nth-child(18) {
    --star-tail-length: 5.05em;
    --top-offset: 64.04vh;
    --fall-duration: 9.115s;
    --fall-delay: 6.208s;
  }
  .star:nth-child(19) {
    --star-tail-length: 7.24em;
    --top-offset: 75.47vh;
    --fall-duration: 7.215s;
    --fall-delay: 6.835s;
  }
  .star:nth-child(20) {
    --star-tail-length: 5.68em;
    --top-offset: 52.38vh;
    --fall-duration: 8.953s;
    --fall-delay: 3.217s;
  }
  .star:nth-child(21) {
    --star-tail-length: 7.21em;
    --top-offset: 70.39vh;
    --fall-duration: 6.788s;
    --fall-delay: 5.618s;
  }
  .star:nth-child(22) {
    --star-tail-length: 6.74em;
    --top-offset: 21.74vh;
    --fall-duration: 8.458s;
    --fall-delay: 8.092s;
  }
  .star:nth-child(23) {
    --star-tail-length: 7.44em;
    --top-offset: 98.24vh;
    --fall-duration: 7.489s;
    --fall-delay: 2.285s;
  }
  .star:nth-child(24) {
    --star-tail-length: 5.47em;
    --top-offset: 27.76vh;
    --fall-duration: 11.911s;
    --fall-delay: 1.558s;
  }
  .star:nth-child(25) {
    --star-tail-length: 6.81em;
    --top-offset: 81.84vh;
    --fall-duration: 6.74s;
    --fall-delay: 4.924s;
  }
  .star:nth-child(26) {
    --star-tail-length: 5.14em;
    --top-offset: 66.2vh;
    --fall-duration: 8.645s;
    --fall-delay: 7.64s;
  }
  .star:nth-child(27) {
    --star-tail-length: 5.47em;
    --top-offset: 51.16vh;
    --fall-duration: 7.405s;
    --fall-delay: 7.928s;
  }
  .star:nth-child(28) {
    --star-tail-length: 7.16em;
    --top-offset: 88.08vh;
    --fall-duration: 8.668s;
    --fall-delay: 3.846s;
  }
  .star:nth-child(29) {
    --star-tail-length: 5.36em;
    --top-offset: 30.91vh;
    --fall-duration: 7.594s;
    --fall-delay: 4.885s;
  }
  .star:nth-child(30) {
    --star-tail-length: 5.05em;
    --top-offset: 72.91vh;
    --fall-duration: 11.64s;
    --fall-delay: 6.037s;
  }
  .star:nth-child(31) {
    --star-tail-length: 7.04em;
    --top-offset: 35.38vh;
    --fall-duration: 9.516s;
    --fall-delay: 5.009s;
  }
  .star:nth-child(32) {
    --star-tail-length: 5.63em;
    --top-offset: 94.81vh;
    --fall-duration: 11.68s;
    --fall-delay: 4.925s;
  }
  .star:nth-child(33) {
    --star-tail-length: 7.01em;
    --top-offset: 8.27vh;
    --fall-duration: 11.129s;
    --fall-delay: 9.596s;
  }
  .star:nth-child(34) {
    --star-tail-length: 6.49em;
    --top-offset: 62.37vh;
    --fall-duration: 10.852s;
    --fall-delay: 3.067s;
  }
  .star:nth-child(35) {
    --star-tail-length: 7.32em;
    --top-offset: 10.62vh;
    --fall-duration: 11.198s;
    --fall-delay: 1.235s;
  }
  .star:nth-child(36) {
    --star-tail-length: 7.49em;
    --top-offset: 39.65vh;
    --fall-duration: 7.721s;
    --fall-delay: 1.383s;
  }
  .star:nth-child(37) {
    --star-tail-length: 6.57em;
    --top-offset: 30.8vh;
    --fall-duration: 8.426s;
    --fall-delay: 7.513s;
  }
  .star:nth-child(38) {
    --star-tail-length: 6.94em;
    --top-offset: 66.46vh;
    --fall-duration: 7.055s;
    --fall-delay: 3.109s;
  }
  .star:nth-child(39) {
    --star-tail-length: 6.18em;
    --top-offset: 81.32vh;
    --fall-duration: 9.188s;
    --fall-delay: 3.627s;
  }
  .star:nth-child(40) {
    --star-tail-length: 6.85em;
    --top-offset: 94.52vh;
    --fall-duration: 6.556s;
    --fall-delay: 0.092s;
  }
  .star:nth-child(41) {
    --star-tail-length: 5.99em;
    --top-offset: 15.88vh;
    --fall-duration: 10.555s;
    --fall-delay: 3.8s;
  }
  .star:nth-child(42) {
    --star-tail-length: 5.6em;
    --top-offset: 60.27vh;
    --fall-duration: 8.176s;
    --fall-delay: 0.708s;
  }
  .star:nth-child(43) {
    --star-tail-length: 5.28em;
    --top-offset: 73.84vh;
    --fall-duration: 11.463s;
    --fall-delay: 8.436s;
  }
  .star:nth-child(44) {
    --star-tail-length: 6.26em;
    --top-offset: 4.25vh;
    --fall-duration: 6.729s;
    --fall-delay: 8.404s;
  }
  .star:nth-child(45) {
    --star-tail-length: 5.79em;
    --top-offset: 29.21vh;
    --fall-duration: 10.102s;
    --fall-delay: 7.679s;
  }
  .star:nth-child(46) {
    --star-tail-length: 7.44em;
    --top-offset: 26.01vh;
    --fall-duration: 10.447s;
    --fall-delay: 1.444s;
  }
  .star:nth-child(47) {
    --star-tail-length: 5.55em;
    --top-offset: 79.03vh;
    --fall-duration: 9.178s;
    --fall-delay: 0.86s;
  }
  .star:nth-child(48) {
    --star-tail-length: 7.5em;
    --top-offset: 23.48vh;
    --fall-duration: 8.196s;
    --fall-delay: 7.249s;
  }
  .star:nth-child(49) {
    --star-tail-length: 5.05em;
    --top-offset: 50.89vh;
    --fall-duration: 11.751s;
    --fall-delay: 6.615s;
  }
  .star:nth-child(50) {
    --star-tail-length: 7.35em;
    --top-offset: 63.68vh;
    --fall-duration: 8.701s;
    --fall-delay: 6.639s;
  }
  .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;
    }
  }