@media (prefers-color-scheme: dark) {
    :root {
        --color: #ddd;
        --background-color-1: #303030;
        --background-color-2: #202020;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --color: #111;
        --background-color-1: #eee;
        --background-color-2: #fff;
    }
}
main {
    touch-action: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
body, html, main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    color: var(--color);
    background: var(--background-color-2);
}
video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto auto;
}
canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}
input[type='text'] {
    touch-action: auto !important;
    user-select: text;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
input[type='range']::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
      background-color: #00aaff;
}
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#settings, #handle, #debug_overlay {
    color: var(--color);
    background: var(--background-color-1);
}
#settings_scroll {
    overflow: auto;
    width: 100%;
    height: 100%;
}
#settings {
    width: 16em;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    padding: 1em;
    font-family: sans-serif;
    transition: transform 0.5s, opacity 0.5s;
}
#settings.lefty {
    left: 0;
    right: auto;
}
#settings.hide, #settings.vanish {
    transform: translateX(100%);
    opacity: 40%;
}
#settings.hide.lefty, #settings.vanish.lefty {
    transform: translateX(-100%);
    opacity: 40%;
}
#handle {
    position: absolute;
    top: 0;
    left: -1em;
    width: 1em;
    border-radius: 0 0 0 0.25em;
    padding: 0.2em 0 0.1em 0;
    font-size: 150%;
    text-align:center;
}
.lefty #handle {
    left: auto;
    right: -1em;
    border-radius: 0 0 0.25em 0;
}
.vanish #handle, video.vanish, canvas.vanish {
    display: none !important;
}
#settings h2 {
    font-size: 1.2em;
    margin: 0;
    text-align: center;
}
#settings h3 {
    font-size: 1em;
    margin-top: 0.2;
    text-align: center;
}
#settings section {
    margin-bottom: 1em;
}
#settings section label, section button {
    display: block;
    margin-top: 0.5em;
}
#settings section.hide, section label.hide, section button.hide, #debug_overlay.hide {
    display: none !important;
}
select {
    width: 15em;
}
#displayoptions {
    display: flex;
    flex-direction: row;
}
.lefty #displayoptions {
    flex-direction: row-reverse;
}
#displayoptions label {
    flex-grow: 1;
}
label input:disabled + span {
    color: #888;
}
#frame_update_limit {
    width: auto;
}
#lefty {
    display: none;
}
#leftylabel::before {
    content: "❮ ";
}
.lefty #leftylabel {
    text-align: right;
}
.lefty #leftylabel::before {
    content: "";
}
.lefty #leftylabel::after {
    content: " ❯";
}
#vanish {
    text-align: right;
}
.lefty #vanish {
    text-align: left;
}
#log {
    max-width: 15em;
    overflow-x: auto;
    touch-action: pan-x pan-y;
    user-select: text;
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
#debug_overlay {
    --padding: 3px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    z-index: 1;
    pointer-events: none;
    opacity: 75%;
    padding: var(--padding);
    border: 2px solid var(--color);
    white-space: pre;
    font-size: small;
    text-align: center;
}
#debug_overlay span.updated {
    color: darkgreen;
}