html, body {
    /* Body covers the whole page */
    height: 100%;
    margin: 0px;
    padding: 0px;

    /* Use simple, easy to read font */
    font-family: sans-serif;
}

body {
    /* The page is a big CSS grid so it is easy to decide where things go. */
    display: grid;

    /*
    Two columns so we can put "aside" on the right other stuff.

    Extra space is added to the second "aside" column.
    */
    grid-template-columns: auto 1fr;

    /* Used for rows below the canvas. They are not specified in `grid-template-rows`. */
    grid-auto-rows: auto;

    /* Don't allow things to touch each other vertically. */
    gap: 0.2em;
}

label {
    /*
    Leave blank space on left and right side. Just looks nicer that way.

    Left: does not go all the way to edge of the browser window
    Right: labels ending with ":" look like "Foo: ..." not "Foo:..."
    */
    margin-left: 0.2em;
    margin-right: 0.2em;
}

/*
If some grid row contains the canvas, make that row stretchy.

To make a row stretchy, we set that row to 1fr and others to auto.
If there are more rows than specified here, "auto" is assumed for them.
*/
body:has(:nth-child(1):is(canvas)) { grid-template-rows: 1fr; }
body:has(:nth-child(2):is(canvas)) { grid-template-rows: auto 1fr; }
body:has(:nth-child(3):is(canvas)) { grid-template-rows: auto auto 1fr; }
body:has(:nth-child(4):is(canvas)) { grid-template-rows: auto auto auto 1fr; }
body:has(:nth-child(5):is(canvas)) { grid-template-rows: auto auto auto auto 1fr; }

body > * {
    /*
    Most elements are on a row of their own and they fill the whole page horizontally (both grid columns).
    This is used for the canvas and any other elements.
    */
    grid-column: 1 / span 2;
}

body > *:not(canvas) {
    /* Add tiny gaps around and between most things. Makes the page look nicer. */
    margin: 0.2em;
}

/* If big screen: */
@media (min-width: 500px) {
    /*
    Sections just before an "aside" go to left column only.
    The corresponding "aside" goes on the right side then.

    We don't do this on narrow screens, such as phones.
    */
    body > section:has(+aside) { grid-column: 1; }
    body > section + aside { grid-column: 2; }
}
/* Else: */
@media (max-width: 499px) {
    /*
    Without this, there is not much room where to tap if you want to unfocus an
    input and get rid of phone keyboard, because tapping a label focuses the
    corresponding input. Let's not do that.
    */
    label {
        /* Disable tapping events */
        pointer-events: none;
    }
}

body > canvas {
    /*
    Horizontally, fill the given grid cells, i.e. all available space.

    However, if the grid is wider than the page because a huge element is added
    to it for some reason, the canvas will only be as wide as the page. This
    avoids slowness caused by having many more pixels than expected.
    */
    width: 100%;
    max-width: 100vw;

    /*
    Vertically, fill the given grid cells.

    For some reason, just setting "height: 100%" causes the canvas to become
    taller than the page when resizing the browser window, but this works.
    */
    height: 1px;
    min-height: 100%;
}

/*
Sections containing labels are used to form a grid with labels on left and something
else on the right. This lays out their contents into a grid of 2 columns.
*/
body > section:has(label) {
    display: grid;
    grid-template-columns: max-content auto;
}

.math-error {
    /* Red color on anything that errors */
    background-color: #ffaaaa;
}