body {
        --color: black;
        margin: 0;
        overflow: hidden;
        background: black;
        font-family: sans-serif;
        height: 100vh;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
}

@keyframes fadein {
        from {
                opacity: 0;
        }
}

div#label {
        pointer-events: none;
}

body:not(.rendering):not(.recording) div#label {
        display: none;
}

body.rendering div#label:after,
body.recording div#label:after {
        animation: fadein 0.37s ease 0.1s both;
        content: "RECORDING...";
        position: fixed;
        bottom: 2em;
        letter-spacing: 2px;
        font-weight: 600;
        left: 2em;
        padding: 1.2em 1.8em;
        color: white;
        border-radius: 2em;
        background: red;
        transition: 0.5s ease;
}

body.rendering div#label:after {
        content: "RENDERING...";
        background: blue;
}

canvas {
        height: 100%;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
}

body:not(.active) {
        cursor: 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: "";
        transition: background 0.3s ease;
        background: var(--color);
        width: calc(100vmin / 24);
        height: calc(100vmin / 24);
        margin: calc(100vmin / 24);
}

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