:root {
    --camera-width: 30%;
    --game-width: 70%;
    --page-bg: #05070d;
    --divider: #20283a;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--page-bg);
}

body {
    display: grid;
    grid-template-columns: var(--camera-width) var(--game-width);
}

#input_video {
    width: 100%;
    height: 100vh;
    display: block;
    object-fit: cover;
    transform: scaleX(-1);
    background: #000;
    border-right: 2px solid var(--divider);
}

#output_canvas {
    display: block;
    align-self: center;
    justify-self: center;
    width: min(100%, calc(100vh * 4 / 3));
    height: auto;
    aspect-ratio: 4 / 3;
    background: #111;
    box-shadow: 0 0 0 1px var(--divider), 0 0 32px rgb(0 0 0 / 45%);
}