@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');

html, body{
    height: 100%;
}

body {
    margin: 0;
    background-color: #000;
}


nav{
    z-index: 1000;
    padding: 0 50px;
    display: flex;
    position: fixed;
    top: 0;
    background: #171717;
    width: calc(100% - 100px);
    height: 80px;
    font-family: 'Tilt Warp', cursive;
    backdrop-filter: blur(10);
    background-color: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid #fff2;
}

.spacer {
    flex-grow: 1;
}
nav ul {
    display: flex;
    gap: 45px;
    align-items: center;
    list-style: none;
    color: #fff;
}

.menu-item {
    display: inline-block;
    cursor: pointer;
    transform: translate(0, 0);
    transition: all 0.5s ease-out;
    font-size: 17px;
}

.menu-item:hover {
    color: #7683D5;
    transform: scale(1.2);
    transition: all 0.3s ease-out;
}
.logo {
    display: flex;
    color: #ffff;
    align-items: center;
    font-size: 17px;
    height: 100%;
    animation: logoblur 1s ease-out;
}

.logo img {
    padding-right: 15px;
    height: 60%;
}
@keyframes logoblur{
0% {
    transform: translate(0, -200px);
    filter: blur(20px);
}

50% {
    transform: translate(0, -100px);
    filter: blur(10);
}

100% {
    transform: translate(0,0);
    filter: blur(0);
}
}

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: hsl(196, 78%, 61%);
    --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.35em;
    --top-offset: 14.72vh;
    --fall-duration: 7.18s;
    --fall-delay: 2.417s;
}
.star:nth-child(2) {
    --star-tail-length: 6.63em;
    --top-offset: 95.44vh;
    --fall-duration: 9.792s;
    --fall-delay: 9.665s;
}
.star:nth-child(3) {
    --star-tail-length: 5.98em;
    --top-offset: 42.97vh;
    --fall-duration: 11.751s;
    --fall-delay: 5.394s;
}
.star:nth-child(4) {
    --star-tail-length: 6.29em;
    --top-offset: 97.45vh;
    --fall-duration: 10.492s;
    --fall-delay: 1.727s;
}
.star:nth-child(5) {
    --star-tail-length: 5.72em;
    --top-offset: 69.15vh;
    --fall-duration: 9.43s;
    --fall-delay: 7.923s;
}
.star:nth-child(6) {
    --star-tail-length: 5.29em;
    --top-offset: 72.43vh;
    --fall-duration: 8.142s;
    --fall-delay: 9.964s;
}
.star:nth-child(7) {
    --star-tail-length: 6.59em;
    --top-offset: 97.04vh;
    --fall-duration: 7.361s;
    --fall-delay: 2.187s;
}
.star:nth-child(8) {
    --star-tail-length: 5.39em;
    --top-offset: 87.32vh;
    --fall-duration: 9.812s;
    --fall-delay: 9.882s;
}
.star:nth-child(9) {
    --star-tail-length: 6.36em;
    --top-offset: 73.29vh;
    --fall-duration: 8.978s;
    --fall-delay: 9.916s;
}
.star:nth-child(10) {
    --star-tail-length: 7.24em;
    --top-offset: 71.79vh;
    --fall-duration: 9.833s;
    --fall-delay: 1.442s;
}
.star:nth-child(11) {
    --star-tail-length: 6.71em;
    --top-offset: 44.56vh;
    --fall-duration: 11.475s;
    --fall-delay: 8.263s;
}
.star:nth-child(12) {
    --star-tail-length: 6.18em;
    --top-offset: 39.78vh;
    --fall-duration: 11.003s;
    --fall-delay: 1.116s;
}
.star:nth-child(13) {
    --star-tail-length: 5.79em;
    --top-offset: 1.73vh;
    --fall-duration: 7.538s;
    --fall-delay: 6.048s;
}
.star:nth-child(14) {
    --star-tail-length: 6.99em;
    --top-offset: 29.86vh;
    --fall-duration: 6.34s;
    --fall-delay: 8.833s;
}
.star:nth-child(15) {
    --star-tail-length: 6.89em;
    --top-offset: 21.12vh;
    --fall-duration: 8.142s;
    --fall-delay: 3.12s;
}
.star:nth-child(16) {
    --star-tail-length: 6.84em;
    --top-offset: 92.49vh;
    --fall-duration: 6.23s;
    --fall-delay: 2.741s;
}
.star:nth-child(17) {
    --star-tail-length: 6.16em;
    --top-offset: 66.61vh;
    --fall-duration: 10.662s;
    --fall-delay: 7.091s;
}
.star:nth-child(18) {
    --star-tail-length: 5.69em;
    --top-offset: 81.79vh;
    --fall-duration: 6.687s;
    --fall-delay: 5.11s;
}
.star:nth-child(19) {
    --star-tail-length: 6.44em;
    --top-offset: 98.41vh;
    --fall-duration: 9.62s;
    --fall-delay: 2.044s;
}
.star:nth-child(20) {
    --star-tail-length: 5.37em;
    --top-offset: 48.28vh;
    --fall-duration: 9.83s;
    --fall-delay: 7.361s;
}
.star:nth-child(21) {
    --star-tail-length: 5.41em;
    --top-offset: 14.56vh;
    --fall-duration: 10.496s;
    --fall-delay: 8.144s;
}
.star:nth-child(22) {
    --star-tail-length: 5.28em;
    --top-offset: 22.24vh;
    --fall-duration: 10.381s;
    --fall-delay: 3.056s;
}
.star:nth-child(23) {
    --star-tail-length: 7.16em;
    --top-offset: 65.15vh;
    --fall-duration: 10.801s;
    --fall-delay: 4.207s;
}
.star:nth-child(24) {
    --star-tail-length: 5.63em;
    --top-offset: 0.92vh;
    --fall-duration: 8.401s;
    --fall-delay: 7.793s;
}
.star:nth-child(25) {
    --star-tail-length: 5.01em;
    --top-offset: 71.36vh;
    --fall-duration: 8.942s;
    --fall-delay: 0.425s;
}
.star:nth-child(26) {
    --star-tail-length: 5.09em;
    --top-offset: 65.29vh;
    --fall-duration: 8.636s;
    --fall-delay: 9.032s;
}
.star:nth-child(27) {
    --star-tail-length: 5.84em;
    --top-offset: 15.42vh;
    --fall-duration: 7.025s;
    --fall-delay: 6.668s;
}
.star:nth-child(28) {
    --star-tail-length: 5.37em;
    --top-offset: 33.18vh;
    --fall-duration: 11.905s;
    --fall-delay: 1.278s;
}
.star:nth-child(29) {
    --star-tail-length: 6.47em;
    --top-offset: 52.95vh;
    --fall-duration: 7.787s;
    --fall-delay: 1.707s;
}
.star:nth-child(30) {
    --star-tail-length: 7.14em;
    --top-offset: 88.62vh;
    --fall-duration: 9.192s;
    --fall-delay: 1.538s;
}
.star:nth-child(31) {
    --star-tail-length: 5.78em;
    --top-offset: 93.91vh;
    --fall-duration: 6.695s;
    --fall-delay: 3.858s;
}
.star:nth-child(32) {
    --star-tail-length: 5.85em;
    --top-offset: 53.72vh;
    --fall-duration: 8.536s;
    --fall-delay: 5.007s;
}
.star:nth-child(33) {
    --star-tail-length: 5.09em;
    --top-offset: 23.15vh;
    --fall-duration: 7.398s;
    --fall-delay: 3.654s;
}
.star:nth-child(34) {
    --star-tail-length: 6.07em;
    --top-offset: 91.73vh;
    --fall-duration: 9.404s;
    --fall-delay: 5.323s;
}
.star:nth-child(35) {
    --star-tail-length: 5.08em;
    --top-offset: 79.54vh;
    --fall-duration: 9.469s;
    --fall-delay: 9.427s;
}
.star:nth-child(36) {
    --star-tail-length: 6.74em;
    --top-offset: 52.1vh;
    --fall-duration: 11.483s;
    --fall-delay: 0.045s;
}
.star:nth-child(37) {
    --star-tail-length: 5.84em;
    --top-offset: 92.73vh;
    --fall-duration: 10.261s;
    --fall-delay: 3.643s;
}
.star:nth-child(38) {
    --star-tail-length: 7.28em;
    --top-offset: 15.64vh;
    --fall-duration: 10.308s;
    --fall-delay: 4.8s;
}
.star:nth-child(39) {
    --star-tail-length: 6.6em;
    --top-offset: 96.79vh;
    --fall-duration: 9.912s;
    --fall-delay: 5.26s;
}
.star:nth-child(40) {
    --star-tail-length: 5.21em;
    --top-offset: 56.67vh;
    --fall-duration: 11.787s;
    --fall-delay: 4.024s;
}
.star:nth-child(41) {
    --star-tail-length: 5.66em;
    --top-offset: 83.63vh;
    --fall-duration: 8.579s;
    --fall-delay: 0.695s;
}
.star:nth-child(42) {
    --star-tail-length: 5.45em;
    --top-offset: 79.04vh;
    --fall-duration: 6.38s;
    --fall-delay: 3.13s;
}
.star:nth-child(43) {
    --star-tail-length: 6.5em;
    --top-offset: 44.06vh;
    --fall-duration: 6.06s;
    --fall-delay: 9.832s;
}
.star:nth-child(44) {
    --star-tail-length: 5.54em;
    --top-offset: 30.6vh;
    --fall-duration: 8.513s;
    --fall-delay: 5.071s;
}
.star:nth-child(45) {
    --star-tail-length: 7.36em;
    --top-offset: 8.47vh;
    --fall-duration: 10.763s;
    --fall-delay: 5.355s;
}
.star:nth-child(46) {
    --star-tail-length: 6.69em;
    --top-offset: 87.43vh;
    --fall-duration: 7.442s;
    --fall-delay: 8.49s;
}
.star:nth-child(47) {
    --star-tail-length: 7.17em;
    --top-offset: 55.77vh;
    --fall-duration: 11.691s;
    --fall-delay: 1.961s;
}
.star:nth-child(48) {
    --star-tail-length: 5.74em;
    --top-offset: 23.36vh;
    --fall-duration: 8.584s;
    --fall-delay: 9.24s;
}
.star:nth-child(49) {
    --star-tail-length: 6.68em;
    --top-offset: 35.26vh;
    --fall-duration: 9.038s;
    --fall-delay: 3.941s;
}
.star:nth-child(50) {
    --star-tail-length: 6.67em;
    --top-offset: 26.19vh;
    --fall-duration: 9.694s;
    --fall-delay: 3.383s;
}
.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;
    }
}