html, body {
    margin: 0;
    background: none;
    width: 100%;
    height: 100%;
    font-family: sans-serif;
}

body {
    display: flex;
    flex-flow: column;
}

main {
    padding-left: 2.5em;
    padding-right: 2.5em;
    width: calc(100% - 5em);
}

header {
    font-family: "Identidad", sans-serif;
    font-weight: 800;
    font-size: 250%;
    color: white;
    background-color: black;

    margin-top: 0;
    padding: 0.1em 0 0.1em 1em;
}

#logo-3d {
    color: #e04b4b;
}

#logo-title {
    color: #ddd;
    font-weight: 200;
    margin-left: 0.3em;
}

@keyframes enable-audio {
    0% {
        pointer-events: none;
        opacity: 50%;
    }
    100% { opacity: 100%; }
}

audio {
    width: 100%;
    animation: enable-audio;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-play-state: paused;
}

@keyframes blink {
    0%, 50%, 100% {
        background-color: white;
    }
    75% {
        background-color: rgba(255, 0, 0, 0.15);
    }
}

.blinking {
    animation: blink;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

input {
    min-width: 20em;
    margin-bottom: 1em;
    font-size: 100%;
}

audio {
    display: block;
}

#container {
    width: 100%;
    flex-grow: 1;
    flex-shrink: 0;
    margin-top: 1em;
    overflow: hidden;

    display: grid;
}

#container2 {
    overflow: hidden;
}

#container canvas, #label-renderer, #loading, #sizer {
    grid-row: 1;
    grid-column: 1;

    width: 100%;

    cursor: grab;
}

#container canvas, #label-renderer {
    position: absolute;
}

#sizer {
    position: relative;
}

#label-renderer, #loading {
    pointer-events: none;
}

#label-renderer {
    z-index: 1;
}

@keyframes spin {
    0% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) translateY(-50%) rotate(360deg); }
}

#loading {
    z-index: 2;
    position: relative;
    opacity: 0;
}

#loading-circle {
    border: 0.5em solid rgba(192, 192, 192, 0); /* Light grey */
    border-top: 0.5em solid #000000; /* Blue */
    border-radius: 50%;
    width: 5em;
    height: 5em;
    animation: spin 1s linear infinite;

    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translateX(-50%) translateY(-50%);
    /* margin-left: auto;
    margin-right: auto; */
}

#label-renderer span {
    font-family: Consolas, monospace;
    font-size: 11pt;
    /*
    filter: drop-shadow(2pt 2pt white); */
    position: absolute;

    text-shadow:
        1px 1px 0 #fff,
        -1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff;
}

#container canvas:active {
    cursor: grabbing;
}