:root {
    --scale: round(down, calc(80svw / 220px))
}

body {
    background-color: lightsalmon;
    text-align: center;
    font-family: system-ui, sans-serif;
    overflow-x: clip;
}

h1 {
    font-size: xx-large;
    text-shadow: 2px 2px #ef3550, 4px 4px #f48fb1, 6px 6px #7e57c2, 8px 8px #2196f3, 10px 10px #26c6da, 12px 12px #43a047, 14px 14px #eeff41, 16px 16px #f9a825, 18px 18px #ff5722;
}

#canvas {
    width: calc(var(--scale) * 220px);
    height: calc(var(--scale) * 80px);
    image-rendering: pixelated;
    border: 16px ridge goldenrod;
    background-color: white;
}

#prompt {
    font-size: xx-large;
}

#results {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    img {
        border: 1px solid black;
        width: 440px;
        height: 160px;
    }
}

.finished {
    color: white;
    background-color: brown;
}