* {
    box-sizing: border-box;
}

body {
    --bg: rgba(20, 20, 20, 1);
    --normal: rgba(220, 220, 220, 1);
    --error: rgba(220, 128, 128, 1);
    /*
    640px min
    98vw - canvas-border - canvas-padding - body-margin
    1280px max
    */
    /* --max-width: clamp(640px, calc(98vw - 20px - 2ch - 2ch), 1280px); */

    background: var(--bg);
    color: var(--normal);
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.viewport {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr minmax(200px, 1fr);
    height: 100svh;
}

.canvas_container {
    width: fit-content;
    max-width: 100vw;
    height: auto !important;
    aspect-ratio: 4 / 3;
    padding: 1ch;
    margin: 0;
    border: 1px solid var(--normal);
    background-color: #000;
}

#canvas {
    display: block;
    width: 1280px;
    height: auto !important;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    outline: none;

    image-rendering: auto;
    image-rendering: crisp-edges;
}

#canvas.smooth {
    image-rendering: pixelated;
}