@font-face {
    font-family: "AugmentedNeoEorzean";
    src: url("AugmentedNeo-Eorzean-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

#main-header h1 {
    font-family: "AugmentedNeoEorzean", sans-serif;
    font-size: 8rem;
    will-change: transform;
}

#main-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 200px rgba(0, 0, 0, 0.9) inset;
}

.join {
    overflow: hidden;
}

@keyframes zoomOut {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes yUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes blurFade {
    0% {
        filter: brightness(0) blur(15px);
    }
    100% {
        filter: brightness(1) blur(0px);
    }
}

#main-background {
    animation: blurFade 1.75s ease-out 1;
}

#main-header {
    animation: zoomOut 2s 1s cubic-bezier(0.3, 0.05, 0.24, 1) both;
}

#join-game {
    animation: yUp 2s 2s cubic-bezier(0, 0.1, 0, 1) both;
    will-change: transform;
}