html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
}
body {
    display: grid;
    place-items: center;
    background: #111;
    color: #eee;
    font-family: sans-serif;

    scrollbar-width: thin;
    scrollbar-color: #888 #111;
}

a {
    color: #88f;
}

.container {
    display: grid;
    grid-template-columns: auto 20rem;
    gap: 1rem;
}

#msgs {
    margin: auto;
}
.logs-container {
    grid-column: 2;
    grid-row: 1;
    width: 100%;

    display: flex;
    flex-direction: column;

    padding: 1rem;
    background: #fff1;
    border-radius: 0.2rem;
    border: 1px outset #8884;

    #logs {
        flex: 1 0 0;
        min-height: 0;
        overflow-y: auto;
        text-wrap: wrap;
    }
}
.logs-container,
.instructions {
    margin: 1rem;

    > h1 {
        margin-block: 0 0.2rem;
    }
}

canvas {
    image-rendering: pixelated;
    width: round(up, 60vmin, 16px);
    aspect-ratio: 1;
}