html, body {
    margin: 0;
}

body {
    background-color: #242424;
    color: whitesmoke;
    font-family: sans-serif;
    text-align: center;
}

p {
    width: 95dvw;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

img.fixed-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95dvw;
    max-width: 800px;
    aspect-ratio: auto;
    height: auto;
}

canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95dvw;
    max-width: 600px;
}

canvas.square {
    height: 95dvw;
    max-height: 600px;
}
canvas.presized-4-3 {
    aspect-ratio: 4 / 3;
    height: auto;
}
canvas.fixed-square {
    width: 512px;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 95dvw;
}
#histogram canvas {
    height: 300px;
    width: 95dvw;
    max-width: 600px;
    background-color: #242424;
}

.error {
    color: red;
}

.hidden {
    display: none;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: whitesmoke;
        color: #242424;
    }
}