html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: monospace;
    margin: 1em;
}

pre {
    text-wrap: auto;
}

button:hover,
input[type="checkbox"]:hover,
select:hover {
    cursor: pointer;
}

a {
    color: #00ff00;
}

a:visited {
    color: #00aa00;
}

hr {
    border: none;
    height: 1px;
    background-color: gray;
    width: 100%;
}

.bounded-width {
    max-width: 600px;
}

.full-width {
    width: 100%;
}

.flex,
.flex-column {
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: baseline;
}

.flex-column {
    flex-direction: column;
}

.flex-grow {
    flex-grow: 1;
}

.gap-half {
    gap: .5em;
}

.align-center {
    align-items: center;
}

.hidden {
    display: none !important;
}

.error {
    color: maroon;
}