@font-face {
    font-family: SixtyFour;
    src: url(fonts/Sixtyfour-Regular-VariableFont_BLED\,SCAN.ttf);
}

@font-face {
    font-family: Byte;
    src: url(fonts/Bytesized-Regular.ttf);
}

* {
    text-decoration: none;
}

body {
    background: linear-gradient(-45deg, #ff007768, transparent),
                linear-gradient(#00000065, transparent),
                linear-gradient(90deg, #313131, black);
    color: #ff0077aa;
    font-family: Byte;
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

nav {
    font-family: Byte;
    font-size: 1.6rem;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0;
    padding-top: 16px;
    justify-self: center;
}

.nav-link {
    width: 150px;
    display: grid;
    color: #ffffffaa;
    justify-content: center;
    color: ffffffaa;
    animation: fade-in-blue .25s linear;
}

.link-wrap:hover {
    color: #ff0077;
    transition: all 0.3s ease;
}

.noise {
    width: 100%;
    height: 100%;
    position: fixed;
    background: url(assets/svg/noise.svg);
    background-size: 80px;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.title {
    color: #ff00776e;
    font-family: SixtyFour;
    font-size: min(10rem, 10vw);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    animation: float-10px 9s ease infinite;
}

.blur {
    filter: blur(16px);
    opacity: .65;
    animation: float-10px 9s linear infinite;
}

@keyframes float-10px {
    0% {
        transform: translateX(-50%);;
    }

    50% {
 transform: translateY(-10px) translateX(-50%);;
    }

    100% {
 transform: translateX(-50%);;
    }
    
}

@keyframes float-20px {
    0% {
        transform: translateX(-50%);;
    }

    50% {
 transform: translateY(-20px) translateX(-50%);;
    }

    100% {
 transform: translateX(-50%);;
    }
    
}

.text {
    font-family: Byte;
    color: #ffffffaa;
    font-size: min(10rem, 10vw);
        animation: float-20px 9s ease infinite;
}

.blurfx {
    pointer-events: none;
    filter: blur(4px);
    position: absolute;
}

.link-wrap {
    display: grid;
    transition: all 0.3s ease;
}

.content {
    font-size: 2rem;
    display: grid;
    color: #ffffffaa;
    animation: fade-in .5s linear, fade-in-blue .5s linear;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes fade-in-blue {
    from {
        color: #2200ff;
        scale: 50%;
    }
}