html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    contain: content;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.site-text {
    text-align: center;
    color: white;
}

.site-text h1 {
    font-family: 'Abril Fatface', cursive;
    font-size: 4rem;
}

.site-text h5, .site-text p {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;
}

.site-text h5 {
    font-size: 2rem;
}
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: 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.19em;
    --top-offset: 7.13vh;
    --fall-duration: 9.638s;
    --fall-delay: 9.266s;
}
.star:nth-child(2) {
    --star-tail-length: 5.74em;
    --top-offset: 75.53vh;
    --fall-duration: 11.72s;
    --fall-delay: 7.949s;
}
.star:nth-child(3) {
    --star-tail-length: 6.32em;
    --top-offset: 57.46vh;
    --fall-duration: 7.291s;
    --fall-delay: 8.635s;
}
.star:nth-child(4) {
    --star-tail-length: 6.25em;
    --top-offset: 9.08vh;
    --fall-duration: 7.136s;
    --fall-delay: 9.977s;
}
.star:nth-child(5) {
    --star-tail-length: 7.17em;
    --top-offset: 99.02vh;
    --fall-duration: 8.023s;
    --fall-delay: 0.307s;
}
.star:nth-child(6) {
    --star-tail-length: 5.35em;
    --top-offset: 21.19vh;
    --fall-duration: 6.518s;
    --fall-delay: 3.665s;
}
.star:nth-child(7) {
    --star-tail-length: 6.74em;
    --top-offset: 34.98vh;
    --fall-duration: 7.492s;
    --fall-delay: 6.13s;
}
.star:nth-child(8) {
    --star-tail-length: 6.92em;
    --top-offset: 84.43vh;
    --fall-duration: 9.927s;
    --fall-delay: 0.085s;
}
.star:nth-child(9) {
    --star-tail-length: 7.26em;
    --top-offset: 84.04vh;
    --fall-duration: 9.125s;
    --fall-delay: 7.969s;
}
.star:nth-child(10) {
    --star-tail-length: 6.71em;
    --top-offset: 18.29vh;
    --fall-duration: 6.302s;
    --fall-delay: 6.787s;
}
.star:nth-child(11) {
    --star-tail-length: 5.02em;
    --top-offset: 6.78vh;
    --fall-duration: 7.181s;
    --fall-delay: 1.009s;
}
.star:nth-child(12) {
    --star-tail-length: 6.27em;
    --top-offset: 60.13vh;
    --fall-duration: 7.913s;
    --fall-delay: 7.57s;
}
.star:nth-child(13) {
    --star-tail-length: 6.58em;
    --top-offset: 67.56vh;
    --fall-duration: 10.86s;
    --fall-delay: 8.268s;
}
.star:nth-child(14) {
    --star-tail-length: 7.42em;
    --top-offset: 82.99vh;
    --fall-duration: 6.943s;
    --fall-delay: 8.149s;
}
.star:nth-child(15) {
    --star-tail-length: 5.43em;
    --top-offset: 80.14vh;
    --fall-duration: 9.813s;
    --fall-delay: 1.971s;
}
.star:nth-child(16) {
    --star-tail-length: 7.33em;
    --top-offset: 17.83vh;
    --fall-duration: 9.007s;
    --fall-delay: 3.069s;
}
.star:nth-child(17) {
    --star-tail-length: 5.89em;
    --top-offset: 2.15vh;
    --fall-duration: 9.132s;
    --fall-delay: 7.719s;
}
.star:nth-child(18) {
    --star-tail-length: 5.16em;
    --top-offset: 45.67vh;
    --fall-duration: 6.346s;
    --fall-delay: 7.525s;
}
.star:nth-child(19) {
    --star-tail-length: 7.19em;
    --top-offset: 18.11vh;
    --fall-duration: 9.1s;
    --fall-delay: 6.391s;
}
.star:nth-child(20) {
    --star-tail-length: 7.06em;
    --top-offset: 42.15vh;
    --fall-duration: 11.873s;
    --fall-delay: 3.473s;
}
.star:nth-child(21) {
    --star-tail-length: 7.48em;
    --top-offset: 55.89vh;
    --fall-duration: 8.886s;
    --fall-delay: 0.263s;
}
.star:nth-child(22) {
    --star-tail-length: 7.29em;
    --top-offset: 41.77vh;
    --fall-duration: 11.054s;
    --fall-delay: 5.411s;
}
.star:nth-child(23) {
    --star-tail-length: 5.3em;
    --top-offset: 0.03vh;
    --fall-duration: 8.733s;
    --fall-delay: 4.936s;
}
.star:nth-child(24) {
    --star-tail-length: 5.04em;
    --top-offset: 6.12vh;
    --fall-duration: 8.709s;
    --fall-delay: 6.191s;
}
.star:nth-child(25) {
    --star-tail-length: 6.62em;
    --top-offset: 56.74vh;
    --fall-duration: 7.731s;
    --fall-delay: 0.785s;
}
.star:nth-child(26) {
    --star-tail-length: 6.08em;
    --top-offset: 76.58vh;
    --fall-duration: 8.187s;
    --fall-delay: 0.734s;
}
.star:nth-child(27) {
    --star-tail-length: 6.02em;
    --top-offset: 94vh;
    --fall-duration: 9.894s;
    --fall-delay: 6.197s;
}
.star:nth-child(28) {
    --star-tail-length: 5.6em;
    --top-offset: 38.38vh;
    --fall-duration: 8.612s;
    --fall-delay: 6.563s;
}
.star:nth-child(29) {
    --star-tail-length: 5.07em;
    --top-offset: 87.99vh;
    --fall-duration: 6.402s;
    --fall-delay: 5.38s;
}
.star:nth-child(30) {
    --star-tail-length: 5.51em;
    --top-offset: 30.23vh;
    --fall-duration: 9.945s;
    --fall-delay: 5.075s;
}
.star:nth-child(31) {
    --star-tail-length: 6.01em;
    --top-offset: 11.41vh;
    --fall-duration: 7.513s;
    --fall-delay: 8.419s;
}
.star:nth-child(32) {
    --star-tail-length: 5.99em;
    --top-offset: 58.9vh;
    --fall-duration: 6.713s;
    --fall-delay: 2.658s;
}
.star:nth-child(33) {
    --star-tail-length: 6.25em;
    --top-offset: 65.57vh;
    --fall-duration: 6.308s;
    --fall-delay: 5.253s;
}
.star:nth-child(34) {
    --star-tail-length: 5.3em;
    --top-offset: 40.14vh;
    --fall-duration: 11.734s;
    --fall-delay: 5.618s;
}
.star:nth-child(35) {
    --star-tail-length: 5.47em;
    --top-offset: 8.8vh;
    --fall-duration: 8.079s;
    --fall-delay: 1.466s;
}
.star:nth-child(36) {
    --star-tail-length: 6.04em;
    --top-offset: 65.13vh;
    --fall-duration: 11.455s;
    --fall-delay: 1.003s;
}
.star:nth-child(37) {
    --star-tail-length: 6.43em;
    --top-offset: 1.4vh;
    --fall-duration: 9.708s;
    --fall-delay: 2.566s;
}
.star:nth-child(38) {
    --star-tail-length: 6.03em;
    --top-offset: 89.09vh;
    --fall-duration: 6.655s;
    --fall-delay: 4.906s;
}
.star:nth-child(39) {
    --star-tail-length: 6.81em;
    --top-offset: 15.55vh;
    --fall-duration: 6.471s;
    --fall-delay: 5.909s;
}
.star:nth-child(40) {
    --star-tail-length: 6.49em;
    --top-offset: 97.05vh;
    --fall-duration: 10.001s;
    --fall-delay: 4.751s;
}
.star:nth-child(41) {
    --star-tail-length: 6.02em;
    --top-offset: 38.47vh;
    --fall-duration: 11.911s;
    --fall-delay: 1.456s;
}
.star:nth-child(42) {
    --star-tail-length: 5.66em;
    --top-offset: 43.36vh;
    --fall-duration: 9.263s;
    --fall-delay: 8.596s;
}
.star:nth-child(43) {
    --star-tail-length: 6.2em;
    --top-offset: 60.93vh;
    --fall-duration: 8.37s;
    --fall-delay: 4.508s;
}
.star:nth-child(44) {
    --star-tail-length: 5.93em;
    --top-offset: 18.69vh;
    --fall-duration: 9.727s;
    --fall-delay: 7.753s;
}
.star:nth-child(45) {
    --star-tail-length: 6.51em;
    --top-offset: 35.02vh;
    --fall-duration: 8.963s;
    --fall-delay: 7.194s;
}
.star:nth-child(46) {
    --star-tail-length: 5.59em;
    --top-offset: 93.01vh;
    --fall-duration: 6.416s;
    --fall-delay: 3.153s;
}
.star:nth-child(47) {
    --star-tail-length: 7.2em;
    --top-offset: 19.35vh;
    --fall-duration: 11.746s;
    --fall-delay: 0.537s;
}
.star:nth-child(48) {
    --star-tail-length: 6.11em;
    --top-offset: 45.34vh;
    --fall-duration: 7.753s;
    --fall-delay: 3.674s;
}
.star:nth-child(49) {
    --star-tail-length: 5.06em;
    --top-offset: 15.73vh;
    --fall-duration: 11.345s;
    --fall-delay: 2.205s;
}
.star:nth-child(50) {
    --star-tail-length: 6.02em;
    --top-offset: 12.13vh;
    --fall-duration: 7.495s;
    --fall-delay: 5.952s;
}
.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;
    }
}