.container {
    display: flex;
    justify-content: center;
}

#output {
    width: 100%;
    padding-top: 100%;
    box-sizing: border-box;
    position: relative;
}

.half {
    flex-grow: 1;
}

.colorcontainer {
    border: 2px solid black;
    position: absolute;
    inset: 0;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

body {
    text-align: center;
    user-select: none;
}

canvas {
    width: 100%;
}

.content-container {
    max-width: min(calc(100vw - 2em), 255px);
}

*:has(wbr) {
    white-space: nowrap;
}

body {
    font-family: 'Arial', sans-serif;
}