.stars {
    position: fixed;
    top: -350px;
    left: -350px;
    width: 100%;
    height: 120%;
    transform: rotate(210deg);
    z-index: -1;
}

.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.33em;
    --top-offset: 41.44vh;
    --fall-duration: 11.388s;
    --fall-delay: 3.932s;
}

.star:nth-child(2) {
    --star-tail-length: 5.62em;
    --top-offset: 14.83vh;
    --fall-duration: 9.172s;
    --fall-delay: 4.199s;
}

.star:nth-child(3) {
    --star-tail-length: 6.37em;
    --top-offset: 31.95vh;
    --fall-duration: 9.551s;
    --fall-delay: 1.386s;
}

.star:nth-child(4) {
    --star-tail-length: 6.61em;
    --top-offset: 42.4vh;
    --fall-duration: 9.806s;
    --fall-delay: 4.872s;
}

.star:nth-child(5) {
    --star-tail-length: 5.97em;
    --top-offset: 49.46vh;
    --fall-duration: 10.143s;
    --fall-delay: 5.317s;
}

.star:nth-child(6) {
    --star-tail-length: 5.78em;
    --top-offset: 48.34vh;
    --fall-duration: 10.628s;
    --fall-delay: 4.269s;
}

.star:nth-child(7) {
    --star-tail-length: 5.87em;
    --top-offset: 68.73vh;
    --fall-duration: 9.568s;
    --fall-delay: 8.426s;
}

.star:nth-child(8) {
    --star-tail-length: 6.11em;
    --top-offset: 89.88vh;
    --fall-duration: 8.392s;
    --fall-delay: 0.28s;
}

.star:nth-child(9) {
    --star-tail-length: 6.41em;
    --top-offset: 62.38vh;
    --fall-duration: 8.606s;
    --fall-delay: 5.758s;
}

.star:nth-child(10) {
    --star-tail-length: 5.33em;
    --top-offset: 59.32vh;
    --fall-duration: 7.312s;
    --fall-delay: 9.577s;
}

.star:nth-child(11) {
    --star-tail-length: 6.9em;
    --top-offset: 64.75vh;
    --fall-duration: 11.453s;
    --fall-delay: 1.2s;
}

.star:nth-child(12) {
    --star-tail-length: 5.03em;
    --top-offset: 61.31vh;
    --fall-duration: 7.328s;
    --fall-delay: 5.166s;
}

.star:nth-child(13) {
    --star-tail-length: 5.12em;
    --top-offset: 6.57vh;
    --fall-duration: 8.121s;
    --fall-delay: 2.448s;
}

.star:nth-child(14) {
    --star-tail-length: 5.13em;
    --top-offset: 20.24vh;
    --fall-duration: 7.298s;
    --fall-delay: 9.151s;
}

.star:nth-child(15) {
    --star-tail-length: 5.53em;
    --top-offset: 87.27vh;
    --fall-duration: 9.001s;
    --fall-delay: 6.663s;
}

.star:nth-child(16) {
    --star-tail-length: 6.96em;
    --top-offset: 55.1vh;
    --fall-duration: 10.395s;
    --fall-delay: 1.967s;
}

.star:nth-child(17) {
    --star-tail-length: 5.9em;
    --top-offset: 84.38vh;
    --fall-duration: 11.867s;
    --fall-delay: 6.372s;
}

.star:nth-child(18) {
    --star-tail-length: 5.58em;
    --top-offset: 48.2vh;
    --fall-duration: 8.109s;
    --fall-delay: 5.241s;
}

.star:nth-child(19) {
    --star-tail-length: 6.92em;
    --top-offset: 64.94vh;
    --fall-duration: 11.542s;
    --fall-delay: 9.922s;
}

.star:nth-child(20) {
    --star-tail-length: 6.15em;
    --top-offset: 26.18vh;
    --fall-duration: 10.405s;
    --fall-delay: 1.12s;
}

.star:nth-child(21) {
    --star-tail-length: 6.1em;
    --top-offset: 94.32vh;
    --fall-duration: 10.725s;
    --fall-delay: 4.985s;
}

.star:nth-child(22) {
    --star-tail-length: 6.84em;
    --top-offset: 51.81vh;
    --fall-duration: 6.809s;
    --fall-delay: 8.486s;
}

.star:nth-child(23) {
    --star-tail-length: 5.71em;
    --top-offset: 92.48vh;
    --fall-duration: 6.793s;
    --fall-delay: 8.004s;
}

.star:nth-child(24) {
    --star-tail-length: 5.29em;
    --top-offset: 30.84vh;
    --fall-duration: 8.212s;
    --fall-delay: 1.647s;
}

.star:nth-child(25) {
    --star-tail-length: 6.65em;
    --top-offset: 42.46vh;
    --fall-duration: 7.338s;
    --fall-delay: 8.88s;
}

.star:nth-child(26) {
    --star-tail-length: 5.46em;
    --top-offset: 19.56vh;
    --fall-duration: 6.666s;
    --fall-delay: 0.664s;
}

.star:nth-child(27) {
    --star-tail-length: 5.72em;
    --top-offset: 78.55vh;
    --fall-duration: 9.157s;
    --fall-delay: 6.246s;
}

.star:nth-child(28) {
    --star-tail-length: 6.11em;
    --top-offset: 7.61vh;
    --fall-duration: 9.763s;
    --fall-delay: 9.803s;
}

.star:nth-child(29) {
    --star-tail-length: 5.61em;
    --top-offset: 38.36vh;
    --fall-duration: 8.83s;
    --fall-delay: 2.157s;
}

.star:nth-child(30) {
    --star-tail-length: 5em;
    --top-offset: 23.56vh;
    --fall-duration: 11.204s;
    --fall-delay: 2.002s;
}

.star:nth-child(31) {
    --star-tail-length: 5.37em;
    --top-offset: 28.2vh;
    --fall-duration: 9.516s;
    --fall-delay: 7.579s;
}

.star:nth-child(32) {
    --star-tail-length: 7.43em;
    --top-offset: 83.99vh;
    --fall-duration: 9.98s;
    --fall-delay: 2.025s;
}

.star:nth-child(33) {
    --star-tail-length: 7.22em;
    --top-offset: 61.13vh;
    --fall-duration: 11.762s;
    --fall-delay: 4.744s;
}

.star:nth-child(34) {
    --star-tail-length: 7.46em;
    --top-offset: 55.76vh;
    --fall-duration: 7.025s;
    --fall-delay: 9.025s;
}

.star:nth-child(35) {
    --star-tail-length: 5.88em;
    --top-offset: 67.38vh;
    --fall-duration: 8.907s;
    --fall-delay: 8.332s;
}

.star:nth-child(36) {
    --star-tail-length: 6.92em;
    --top-offset: 88.95vh;
    --fall-duration: 6.886s;
    --fall-delay: 8.637s;
}

.star:nth-child(37) {
    --star-tail-length: 7.11em;
    --top-offset: 50.14vh;
    --fall-duration: 10.311s;
    --fall-delay: 7.068s;
}

.star:nth-child(38) {
    --star-tail-length: 6.13em;
    --top-offset: 14.08vh;
    --fall-duration: 8.446s;
    --fall-delay: 1.698s;
}

.star:nth-child(39) {
    --star-tail-length: 5.07em;
    --top-offset: 31.3vh;
    --fall-duration: 10.047s;
    --fall-delay: 3.091s;
}

.star:nth-child(40) {
    --star-tail-length: 6.74em;
    --top-offset: 91.45vh;
    --fall-duration: 8.75s;
    --fall-delay: 2.086s;
}

.star:nth-child(41) {
    --star-tail-length: 5.01em;
    --top-offset: 80.06vh;
    --fall-duration: 7.16s;
    --fall-delay: 2.732s;
}

.star:nth-child(42) {
    --star-tail-length: 6.55em;
    --top-offset: 61.57vh;
    --fall-duration: 8.417s;
    --fall-delay: 6.64s;
}

.star:nth-child(43) {
    --star-tail-length: 7em;
    --top-offset: 51.56vh;
    --fall-duration: 11.917s;
    --fall-delay: 0.303s;
}

.star:nth-child(44) {
    --star-tail-length: 6.6em;
    --top-offset: 23.33vh;
    --fall-duration: 11.811s;
    --fall-delay: 7.844s;
}

.star:nth-child(45) {
    --star-tail-length: 5.5em;
    --top-offset: 2.77vh;
    --fall-duration: 9.971s;
    --fall-delay: 2.703s;
}

.star:nth-child(46) {
    --star-tail-length: 5.69em;
    --top-offset: 17.82vh;
    --fall-duration: 8.676s;
    --fall-delay: 2.161s;
}

.star:nth-child(47) {
    --star-tail-length: 5.89em;
    --top-offset: 65.03vh;
    --fall-duration: 9.716s;
    --fall-delay: 7.946s;
}

.star:nth-child(48) {
    --star-tail-length: 5.48em;
    --top-offset: 61.07vh;
    --fall-duration: 9.106s;
    --fall-delay: 4.255s;
}

.star:nth-child(49) {
    --star-tail-length: 6.78em;
    --top-offset: 63.81vh;
    --fall-duration: 8.223s;
    --fall-delay: 6.794s;
}

.star:nth-child(50) {
    --star-tail-length: 7.05em;
    --top-offset: 51.3vh;
    --fall-duration: 11.251s;
    --fall-delay: 1.172s;
}

.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;
    }
}