* {
        margin: 0;
        padding: 0;
}

@font-face {
        font-family: "nb";
        src: url("nb_international_pro_bold-webfont.ttf");
}

body {
        background: black;
        cursor: grab;
        overflow: hidden;
        color: white;
        font-family: nb, sans-serif;
}

body.grab {
        cursor: grabbing;
}

body:not(.active) {
        cursor: none;
}
main {
        height: 100vh;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        --color: black;
}

canvas {
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        touch-action: none;
}

#fullscreen {
        position: fixed;
        top: 0;
        right: 0;
        cursor: pointer;
        transition: opacity 0.3s ease;
        -webkit-tap-highlight-color: transparent;
}

#fullscreen:after {
        display: inline-block;
        content: "";
        background: var(--color);
        width: 2em;
        height: 2em;
        margin: 2em;
}

:fullscreen #fullscreen,
body:not(.active) #fullscreen {
        opacity: 0;
}

#frame {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        transform: scale(0.9);
        width: 100%;
        height: 100%;
        pointer-events: none;
}

#overlay {
        pointer-events: none;
        position: fixed;
        left: 0;
        top: 0vh;
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
        grid-auto-rows: 20em;
        grid-gap: 0em;
        text-transform: uppercase;
        font-family: monospace;
}

#overlay div {
        white-space: break-spaces;
        display: inline-block;
        padding: 0;
        font-size: 1em;
        margin-right: auto;
        margin-bottom: auto;
        background: black;
        color: white;
        max-width: 70ch;
        overflow: hidden;
}