body {
    font-family: var(--body-font-face);
    margin: 0;
    padding: 16px;

    background-color: var(--white);
    color: var(--black);
    line-height: 1.5em;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px;
}

body > header {
    flex: 1 0 100%;
}

body > section {
    border: 2px solid var(--blue);
    padding: 8px;

    flex: 1 1 360px;
}

section > h1 {
    font-size: 1.25em;
    display: block;
    width: fit-content;

    margin-top: -24px;
    padding: 0 8px;

    background-color: var(--white);
}

section > ul {
    list-style: none;
    padding: 0;
}

ul a {
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-decoration-style: dotted;
}

ul a:hover,
ul a:focus {
    color: var(--white);
    background-color: var(--blue);
    box-shadow: 0 0 0px 2px var(--blue);
    box-decoration-break: clone;
}