* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    margin: 1em;
}

.error {
    color: red;
}

form {
  display: inline-block;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* @TODO: Do I still care about these? */
/* h1 { */
/*   font-size: large; */
/* } */

/* h2 { */
/*   font-size: medium; */
/* } */

/* p, ul, ol { */
/*   font-size: x-small; */
/* } */

.spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #000;
    animation: spin 1s ease-in-out infinite;
    display: none; /* Hide by default */
}

.spinner.show {
    display: block; /* Show spinner when the 'show' class is added */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}