body {
    /* background from https://heropatterns.com */
    /* background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%23c57272' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
}


section aside, form {
    background: var(--color-bg);
}

/* Card-like style rules from `section aside` */
/* section header {
    background: var(--color-bg);
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
    margin: 1rem;
    padding: 1.25rem;
} */


/* TODO: re-think my stubbornness in not pulling in bootstrap */
.card {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    box-shadow: 0 0 2px 2px #EEEEEE;
    padding: 2rem;
}

/* A wrapper that holds columns */
.columns {
    display: flex;
    flex-direction: row;
    overflow: scroll;
}
/* By default, all the children evenly divide the space of the parent */
.columns > * {
    flex-grow: 1;
}

/* A wrapper that holds rows */
.rows {
    display: flex;
    flex-direction: column;
}
.rows > * {
    flex-grow: 1;
}