#root,
html,
body,
main {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}

* {
    text-transform: uppercase;
}

@font-face {
    font-family: "MayfairNbpBold";
    src: URL("/fonts/mayfair-nbp/MayfairNbpBold-gAA4.ttf") format("truetype");
}

@font-face {
    font-family: "clacon2";
    src: url("/fonts/clacon2/clacon2.woff2");
}

.mb-5 {
    margin-bottom: 10px;
}

a {
    text-decoration: none;
}

.scanlines {
    overflow: hidden;
    position: relative;
}

.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    z-index: 353453453454534534543;
    position: absolute;
}

.scanlines:before {
    width: 100%;
    height: 2px;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.75;
    animation: scanline 6s linear infinite;
}

.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 353453453454534534543;
    background: linear-gradient(to bottom,
            transparent 50%,
            rgba(0, 0, 0, 0.3) 51%);
    background-size: 100% 4px;
    animation: scanlines 1s steps(60) infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 200000%;
    }
}

div.scanlines {
    z-index: 353453453454534534543;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

/* App Bar */

.desktopNavbar {
    display: flex;
    align-items: center;
}

.mobileNavbar {
    display: none;
    align-items: center;
}

@media (max-width: 900px) {
    .desktopNavbar {
        display: none;
    }

    .mobileNavbar {
        display: flex;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking {
    animation: blink 1s infinite;
}