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

/* Light theme background */
@media (prefers-color-scheme: light) {
  body {
    background: radial-gradient(ellipse at bottom, #dbe7ff 0%, #f0f4ff 100%);
  }
}

html[data-theme="light"] body {
  background: radial-gradient(ellipse at bottom, #dbe7ff 0%, #f0f4ff 100%);
}

html[data-theme="dark"] body {
  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
}

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

:root {
  --star-color: #5eb3ff;
}

@media (prefers-color-scheme: light) {
  :root {
    --star-color: #4a9eff;
  }
}

html[data-theme="light"] {
  --star-color: #4a9eff;
}

html[data-theme="dark"] {
  --star-color: #5eb3ff;
}

.star {
  --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.54em;
  --top-offset: 75.01vh;
  --fall-duration: 6.244s;
  --fall-delay: 6.382s;
}
.star:nth-child(2) {
  --star-tail-length: 6.39em;
  --top-offset: 2.63vh;
  --fall-duration: 11.947s;
  --fall-delay: 6.027s;
}
.star:nth-child(3) {
  --star-tail-length: 6.94em;
  --top-offset: 54.21vh;
  --fall-duration: 11.678s;
  --fall-delay: 3.377s;
}
.star:nth-child(4) {
  --star-tail-length: 7.44em;
  --top-offset: 82.58vh;
  --fall-duration: 8.295s;
  --fall-delay: 8.247s;
}
.star:nth-child(5) {
  --star-tail-length: 6.09em;
  --top-offset: 11.85vh;
  --fall-duration: 7.386s;
  --fall-delay: 3.566s;
}
.star:nth-child(6) {
  --star-tail-length: 7.07em;
  --top-offset: 16.1vh;
  --fall-duration: 6.013s;
  --fall-delay: 6.49s;
}
.star:nth-child(7) {
  --star-tail-length: 5.52em;
  --top-offset: 8.81vh;
  --fall-duration: 7.098s;
  --fall-delay: 9.302s;
}
.star:nth-child(8) {
  --star-tail-length: 6.9em;
  --top-offset: 93.01vh;
  --fall-duration: 6.764s;
  --fall-delay: 4.139s;
}
.star:nth-child(9) {
  --star-tail-length: 5.11em;
  --top-offset: 88.61vh;
  --fall-duration: 10.744s;
  --fall-delay: 1.124s;
}
.star:nth-child(10) {
  --star-tail-length: 7.26em;
  --top-offset: 59.39vh;
  --fall-duration: 10.765s;
  --fall-delay: 7.785s;
}
.star:nth-child(11) {
  --star-tail-length: 5em;
  --top-offset: 69.06vh;
  --fall-duration: 7.138s;
  --fall-delay: 7.849s;
}
.star:nth-child(12) {
  --star-tail-length: 6.95em;
  --top-offset: 66.46vh;
  --fall-duration: 9.753s;
  --fall-delay: 9.191s;
}
.star:nth-child(13) {
  --star-tail-length: 6.62em;
  --top-offset: 63.15vh;
  --fall-duration: 6.197s;
  --fall-delay: 0.613s;
}
.star:nth-child(14) {
  --star-tail-length: 5.45em;
  --top-offset: 32.91vh;
  --fall-duration: 7.77s;
  --fall-delay: 8.11s;
}
.star:nth-child(15) {
  --star-tail-length: 6.26em;
  --top-offset: 32.65vh;
  --fall-duration: 10.625s;
  --fall-delay: 1.764s;
}
.star:nth-child(16) {
  --star-tail-length: 5.05em;
  --top-offset: 33.41vh;
  --fall-duration: 6.48s;
  --fall-delay: 6.224s;
}
.star:nth-child(17) {
  --star-tail-length: 7.2em;
  --top-offset: 56.39vh;
  --fall-duration: 10.787s;
  --fall-delay: 8.879s;
}
.star:nth-child(18) {
  --star-tail-length: 6.88em;
  --top-offset: 73.04vh;
  --fall-duration: 6.995s;
  --fall-delay: 1.368s;
}
.star:nth-child(19) {
  --star-tail-length: 6.73em;
  --top-offset: 46.97vh;
  --fall-duration: 9.314s;
  --fall-delay: 0.423s;
}
.star:nth-child(20) {
  --star-tail-length: 5.25em;
  --top-offset: 55.34vh;
  --fall-duration: 10.495s;
  --fall-delay: 0.917s;
}
.star:nth-child(21) {
  --star-tail-length: 6.37em;
  --top-offset: 58.17vh;
  --fall-duration: 8.475s;
  --fall-delay: 3.243s;
}
.star:nth-child(22) {
  --star-tail-length: 6.06em;
  --top-offset: 94.49vh;
  --fall-duration: 9.544s;
  --fall-delay: 1.376s;
}
.star:nth-child(23) {
  --star-tail-length: 5.69em;
  --top-offset: 61.51vh;
  --fall-duration: 10.182s;
  --fall-delay: 9.206s;
}
.star:nth-child(24) {
  --star-tail-length: 7.21em;
  --top-offset: 51.99vh;
  --fall-duration: 10.681s;
  --fall-delay: 2.798s;
}
.star:nth-child(25) {
  --star-tail-length: 7.4em;
  --top-offset: 12.18vh;
  --fall-duration: 8.557s;
  --fall-delay: 1.167s;
}
.star:nth-child(26) {
  --star-tail-length: 5.02em;
  --top-offset: 64.86vh;
  --fall-duration: 10.59s;
  --fall-delay: 3.721s;
}
.star:nth-child(27) {
  --star-tail-length: 6.51em;
  --top-offset: 21.88vh;
  --fall-duration: 6.634s;
  --fall-delay: 2.424s;
}
.star:nth-child(28) {
  --star-tail-length: 5.25em;
  --top-offset: 21.16vh;
  --fall-duration: 6.929s;
  --fall-delay: 5.864s;
}
.star:nth-child(29) {
  --star-tail-length: 7.23em;
  --top-offset: 42.04vh;
  --fall-duration: 11.912s;
  --fall-delay: 4.193s;
}
.star:nth-child(30) {
  --star-tail-length: 6.5em;
  --top-offset: 67.9vh;
  --fall-duration: 11.52s;
  --fall-delay: 9.627s;
}
.star:nth-child(31) {
  --star-tail-length: 6.14em;
  --top-offset: 41.16vh;
  --fall-duration: 9.195s;
  --fall-delay: 5.54s;
}
.star:nth-child(32) {
  --star-tail-length: 7.36em;
  --top-offset: 3.16vh;
  --fall-duration: 10.853s;
  --fall-delay: 0.217s;
}
.star:nth-child(33) {
  --star-tail-length: 6.3em;
  --top-offset: 69.46vh;
  --fall-duration: 10.222s;
  --fall-delay: 8.659s;
}
.star:nth-child(34) {
  --star-tail-length: 6.95em;
  --top-offset: 3.96vh;
  --fall-duration: 7.171s;
  --fall-delay: 4.562s;
}
.star:nth-child(35) {
  --star-tail-length: 5.93em;
  --top-offset: 65.54vh;
  --fall-duration: 10.544s;
  --fall-delay: 8.559s;
}
.star:nth-child(36) {
  --star-tail-length: 6.05em;
  --top-offset: 60.68vh;
  --fall-duration: 11.344s;
  --fall-delay: 3.632s;
}
.star:nth-child(37) {
  --star-tail-length: 5.9em;
  --top-offset: 14.85vh;
  --fall-duration: 7.301s;
  --fall-delay: 6.358s;
}
.star:nth-child(38) {
  --star-tail-length: 5.69em;
  --top-offset: 67.97vh;
  --fall-duration: 8.98s;
  --fall-delay: 2.37s;
}
.star:nth-child(39) {
  --star-tail-length: 5.93em;
  --top-offset: 89.17vh;
  --fall-duration: 8.593s;
  --fall-delay: 4.003s;
}
.star:nth-child(40) {
  --star-tail-length: 6.51em;
  --top-offset: 93.98vh;
  --fall-duration: 7.873s;
  --fall-delay: 6.088s;
}
.star:nth-child(41) {
  --star-tail-length: 7.07em;
  --top-offset: 89.13vh;
  --fall-duration: 6.45s;
  --fall-delay: 1.602s;
}
.star:nth-child(42) {
  --star-tail-length: 7.33em;
  --top-offset: 62.05vh;
  --fall-duration: 7.915s;
  --fall-delay: 5.58s;
}
.star:nth-child(43) {
  --star-tail-length: 6.59em;
  --top-offset: 32.33vh;
  --fall-duration: 8.637s;
  --fall-delay: 6.113s;
}
.star:nth-child(44) {
  --star-tail-length: 6.89em;
  --top-offset: 72.73vh;
  --fall-duration: 8.459s;
  --fall-delay: 5.055s;
}
.star:nth-child(45) {
  --star-tail-length: 5.62em;
  --top-offset: 91.05vh;
  --fall-duration: 10.642s;
  --fall-delay: 0.029s;
}
.star:nth-child(46) {
  --star-tail-length: 5.53em;
  --top-offset: 22.92vh;
  --fall-duration: 10.05s;
  --fall-delay: 2.527s;
}
.star:nth-child(47) {
  --star-tail-length: 5.33em;
  --top-offset: 25.52vh;
  --fall-duration: 8.148s;
  --fall-delay: 4.961s;
}
.star:nth-child(48) {
  --star-tail-length: 6.55em;
  --top-offset: 83.68vh;
  --fall-duration: 6.809s;
  --fall-delay: 9.147s;
}
.star:nth-child(49) {
  --star-tail-length: 6.48em;
  --top-offset: 4.1vh;
  --fall-duration: 7.001s;
  --fall-delay: 3.566s;
}
.star:nth-child(50) {
  --star-tail-length: 5.64em;
  --top-offset: 59.97vh;
  --fall-duration: 8.125s;
  --fall-delay: 4.015s;
}
.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;
  }
}