body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  overflow: hidden;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: white;
}

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  transform: rotate(-90deg);
}

.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: 6.74em;
  --top-offset: 16.51vh;
  --fall-duration: 8.215s;
  --fall-delay: 7.03s;
}

.star:nth-child(2) {
  --star-tail-length: 6.48em;
  --top-offset: 6.79vh;
  --fall-duration: 11.6s;
  --fall-delay: 5.724s;
}
.star:nth-child(3) {
  --star-tail-length: 5.55em;
  --top-offset: 98.5vh;
  --fall-duration: 6.937s;
  --fall-delay: 0.618s;
}
.star:nth-child(4) {
  --star-tail-length: 5.52em;
  --top-offset: 17.77vh;
  --fall-duration: 11.662s;
  --fall-delay: 1.191s;
}
.star:nth-child(5) {
  --star-tail-length: 6.83em;
  --top-offset: 50.24vh;
  --fall-duration: 11.282s;
  --fall-delay: 9.498s;
}
.star:nth-child(6) {
  --star-tail-length: 5.52em;
  --top-offset: 93.39vh;
  --fall-duration: 8.082s;
  --fall-delay: 3.268s;
}
.star:nth-child(7) {
  --star-tail-length: 6.48em;
  --top-offset: 55.58vh;
  --fall-duration: 7.071s;
  --fall-delay: 1.914s;
}
.star:nth-child(8) {
  --star-tail-length: 6.16em;
  --top-offset: 7.89vh;
  --fall-duration: 6.137s;
  --fall-delay: 8.088s;
}
.star:nth-child(9) {
  --star-tail-length: 7.39em;
  --top-offset: 16.46vh;
  --fall-duration: 6.373s;
  --fall-delay: 2.497s;
}
.star:nth-child(10) {
  --star-tail-length: 6.58em;
  --top-offset: 22.71vh;
  --fall-duration: 8.813s;
  --fall-delay: 3.374s;
}
.star:nth-child(11) {
  --star-tail-length: 5.03em;
  --top-offset: 72.02vh;
  --fall-duration: 7.372s;
  --fall-delay: 3.083s;
}
.star:nth-child(12) {
  --star-tail-length: 6.29em;
  --top-offset: 58.85vh;
  --fall-duration: 7.825s;
  --fall-delay: 6.312s;
}
.star:nth-child(13) {
  --star-tail-length: 6.03em;
  --top-offset: 90.41vh;
  --fall-duration: 8.383s;
  --fall-delay: 6.125s;
}
.star:nth-child(14) {
  --star-tail-length: 5.05em;
  --top-offset: 42.5vh;
  --fall-duration: 11.937s;
  --fall-delay: 3.882s;
}
.star:nth-child(15) {
  --star-tail-length: 5.36em;
  --top-offset: 94.67vh;
  --fall-duration: 7.969s;
  --fall-delay: 7.234s;
}
.star:nth-child(16) {
  --star-tail-length: 6.63em;
  --top-offset: 1.23vh;
  --fall-duration: 6.6s;
  --fall-delay: 5.987s;
}
.star:nth-child(17) {
  --star-tail-length: 7.05em;
  --top-offset: 16.23vh;
  --fall-duration: 10.72s;
  --fall-delay: 9.833s;
}
.star:nth-child(18) {
  --star-tail-length: 5.29em;
  --top-offset: 77.97vh;
  --fall-duration: 8.411s;
  --fall-delay: 3.871s;
}
.star:nth-child(19) {
  --star-tail-length: 5.65em;
  --top-offset: 40.85vh;
  --fall-duration: 8.376s;
  --fall-delay: 0.121s;
}
.star:nth-child(20) {
  --star-tail-length: 5.13em;
  --top-offset: 46.06vh;
  --fall-duration: 8.926s;
  --fall-delay: 6.269s;
}
.star:nth-child(21) {
  --star-tail-length: 7.25em;
  --top-offset: 35.85vh;
  --fall-duration: 11.648s;
  --fall-delay: 6.47s;
}
.star:nth-child(22) {
  --star-tail-length: 5.86em;
  --top-offset: 35.51vh;
  --fall-duration: 10.566s;
  --fall-delay: 9.546s;
}
.star:nth-child(23) {
  --star-tail-length: 5.99em;
  --top-offset: 46.23vh;
  --fall-duration: 11.642s;
  --fall-delay: 9.81s;
}
.star:nth-child(24) {
  --star-tail-length: 5.99em;
  --top-offset: 37.81vh;
  --fall-duration: 11.738s;
  --fall-delay: 8.437s;
}
.star:nth-child(25) {
  --star-tail-length: 7.45em;
  --top-offset: 62.43vh;
  --fall-duration: 11.376s;
  --fall-delay: 9.573s;
}
.star:nth-child(26) {
  --star-tail-length: 6.8em;
  --top-offset: 47.2vh;
  --fall-duration: 8.894s;
  --fall-delay: 2.119s;
}
.star:nth-child(27) {
  --star-tail-length: 6.09em;
  --top-offset: 10.81vh;
  --fall-duration: 6.788s;
  --fall-delay: 1.952s;
}
.star:nth-child(28) {
  --star-tail-length: 6.65em;
  --top-offset: 80.25vh;
  --fall-duration: 11.251s;
  --fall-delay: 1.897s;
}
.star:nth-child(29) {
  --star-tail-length: 6.25em;
  --top-offset: 18.97vh;
  --fall-duration: 6.853s;
  --fall-delay: 5.406s;
}
.star:nth-child(30) {
  --star-tail-length: 5.18em;
  --top-offset: 75.99vh;
  --fall-duration: 8.87s;
  --fall-delay: 7.766s;
}
.star:nth-child(31) {
  --star-tail-length: 5.91em;
  --top-offset: 65.34vh;
  --fall-duration: 7.456s;
  --fall-delay: 9.141s;
}
.star:nth-child(32) {
  --star-tail-length: 5.37em;
  --top-offset: 83.89vh;
  --fall-duration: 7.735s;
  --fall-delay: 1.436s;
}
.star:nth-child(33) {
  --star-tail-length: 6.35em;
  --top-offset: 97.86vh;
  --fall-duration: 10.791s;
  --fall-delay: 2.755s;
}
.star:nth-child(34) {
  --star-tail-length: 5.22em;
  --top-offset: 3.51vh;
  --fall-duration: 11.875s;
  --fall-delay: 7.21s;
}
.star:nth-child(35) {
  --star-tail-length: 6.05em;
  --top-offset: 61.37vh;
  --fall-duration: 10.293s;
  --fall-delay: 5.432s;
}
.star:nth-child(36) {
  --star-tail-length: 6.35em;
  --top-offset: 20.35vh;
  --fall-duration: 6.082s;
  --fall-delay: 6.288s;
}
.star:nth-child(37) {
  --star-tail-length: 5.85em;
  --top-offset: 70.45vh;
  --fall-duration: 9.726s;
  --fall-delay: 1.064s;
}
.star:nth-child(38) {
  --star-tail-length: 5.5em;
  --top-offset: 78.49vh;
  --fall-duration: 10.181s;
  --fall-delay: 4.56s;
}
.star:nth-child(39) {
  --star-tail-length: 5.19em;
  --top-offset: 18.75vh;
  --fall-duration: 8.659s;
  --fall-delay: 5.2s;
}
.star:nth-child(40) {
  --star-tail-length: 6.15em;
  --top-offset: 44.55vh;
  --fall-duration: 10.891s;
  --fall-delay: 2.475s;
}
.star:nth-child(41) {
  --star-tail-length: 5.08em;
  --top-offset: 51.82vh;
  --fall-duration: 8.445s;
  --fall-delay: 1.572s;
}
.star:nth-child(42) {
  --star-tail-length: 6.2em;
  --top-offset: 20.34vh;
  --fall-duration: 9.162s;
  --fall-delay: 7.591s;
}
.star:nth-child(43) {
  --star-tail-length: 5.58em;
  --top-offset: 77.97vh;
  --fall-duration: 8.417s;
  --fall-delay: 8.039s;
}
.star:nth-child(44) {
  --star-tail-length: 5.77em;
  --top-offset: 18.21vh;
  --fall-duration: 7.067s;
  --fall-delay: 8.492s;
}
.star:nth-child(45) {
  --star-tail-length: 5.89em;
  --top-offset: 34.86vh;
  --fall-duration: 9.473s;
  --fall-delay: 3.364s;
}
.star:nth-child(46) {
  --star-tail-length: 6.48em;
  --top-offset: 9.83vh;
  --fall-duration: 8.459s;
  --fall-delay: 7.243s;
}
.star:nth-child(47) {
  --star-tail-length: 5.44em;
  --top-offset: 14.96vh;
  --fall-duration: 6.563s;
  --fall-delay: 9.412s;
}
.star:nth-child(48) {
  --star-tail-length: 5.13em;
  --top-offset: 4.79vh;
  --fall-duration: 11.339s;
  --fall-delay: 5.259s;
}

.star:nth-child(49) {
  --star-tail-length: 7.48em;
  --top-offset: 28.98vh;
  --fall-duration: 9.577s;
  --fall-delay: 0.93s;
}
.star:nth-child(50) {
  --star-tail-length: 5.28em;
  --top-offset: 16.55vh;
  --fall-duration: 6.739s;
  --fall-delay: 9.151s;
}
.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;
  }
}