body {
    background-color: #000;
}

#main-content {
    max-width: 810px;
    padding: 1em 1em;
    margin: 0 auto 20px;
    background-color: #111;
    border: 1px solid #555;
    border-radius: 5px;
}

#status-pane {
    border: #836e4f solid thin;
    border-radius: 0.2rem;
}

#map-container {
    padding-top: 1em;
    display:flex;
    align-items: flex-start;
}

.centered {
    max-width: 400px;
    margin: 0 auto;
}

#record-pane {
    padding-left: 0em;
    transform-origin: top left;
    position: absolute;
}

video {
    background: rgb(2,0,36);
    background: linear-gradient(146deg, rgba(2,0,36,1) 0%, rgb(59, 65, 65) 100%);
}

#scroll-box {
    margin-left: 360px;
    display:flex;

    overflow-x: visible;
    overflow-y: auto;
    width: 100%;
    font-size: min(2.5vw, 1em);

    /* hide scrollbar */
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
}

#scroll-box::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

#counter {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 10%;
}

#counter .item {
    text-align: right;
    padding-right: 0.3em;
}

#map {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    width: 90%;
}

#map .item, #counter .item {
    width: 100%;
    background-color: #2e2d2d;
    background-size: contain;
    overflow: hidden;
}

/*

#map .item[data-highlight] {
    animation-name: highlight;
    animation-duration: 500ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes highlight {
    0% {
        box-shadow: none;
        filter:none;
    }
    30% {
        filter: hue-rotate(120deg);
    }
    50% {
        filter: hue-rotate(0deg);
    }
    70% {
        filter: none;
    }
    100% {
        box-shadow: inset 0px 0px 10px rgba(255,255,255,0.9);
    }
}

#map .item:not([data-highlight]) {
    animation-name: downlight;
    animation-duration: 500ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes downlight {
    0% {
        box-shadow: inset 0px 0px 10px rgba(255,255,255,0.9);
    }
    100% {
        box-shadow: none;
    }
}

 */