:focus-visible {
    outline: thick double royalblue;
}

a:link {
    color: blue;
}

a:visited {
    color: rebeccapurple;
}

a:active {
    color: darkred;
}

html {
    font-family: "Noto Sans", sans-serif;
}

body {
    background: whitesmoke;
    display: grid;
    grid-template:
        "header main" 1fr
        "footer footer" auto
        / max-content 1fr;
    margin: 0;
    min-height: 100dvh;
}

header {
    border: ridge;
    border-bottom: none;
    border-color: grey;
    display: grid;
    grid-area: header;
    grid-template:
        "skip" auto
        "up" auto
        "nav" 1fr
        / 1fr;
    margin: 0;
    min-width: 18rem;
}

header a {
    border: groove;
    border-color: black;
    display: block;
    line-height: max(1rlh, calc(24px - 0.2rem)); /* keeps minimum size 24px */
    margin: 0.2rem;
    padding: 0.1rem;
}

header a:active {
    border: inset;
    border-color: black;
}

/* TODO: a:visited has trouble in header on WebPositive; determine fix */
header a:visited {
    color: blue;
}

/* TODO: remove following when header a:visited color is resolved */
header a:active {
    color: darkred;
}

header a[href="#main"] {
    grid-area: skip;
}

header a[rel="up"] {
    grid-area: up;
}

header nav {
    grid-area: nav;
}

main {
    grid-area: main;
    margin: 0 1rem;
    min-width: 15ch; /* about three words */
}

footer {
    border: ridge;
    border-color: grey;
    grid-area: footer;
}

footer p {
    margin: 1rem auto;
    text-align: center;
}

nav a {
    border: outset;
    border-color: black;
    display: block;
    margin: 0.5rem;
    max-width: initial;
    padding: 0.2rem;
}

nav a:active {
    border: groove;
    border-color: black;
}

nav a[aria-current="page"] {
    background: #595959;
    border: inset;
    border-color: black;
    color: white;
    font-weight: bold;
}

p {
    max-width: 80ch;
}

pre {
    font-family: "Noto Sans Mono", monospace;
        /* TODO: font-family fallback doesn't work on WebPositive (#12862) */
    overflow-x: auto;
}

ul {
    list-style-type: square;
}

@media (max-width: 35rem) {
    body {
        grid-template:
            "header header" auto
            "main main" 1fr
            "footer footer" auto
            / max-content 1fr;
    }
    
    header {
        border-bottom: ridge;
        border-color: grey;
    }
}