:root {
    background-color: lightyellow;
    color: black;
    font-size: 16px;
        /* TODO: consider using 14px */
    hyphens: auto;
        /* TODO: provide soft hyphens in html for "JMMOr-ga-niz-er" */
    image-rendering: pixelated;
        /* TODO: consider crisp-edges */
    overflow-wrap: anywhere;
    text-align: justify;
}

:focus-visible {
    position: relative;
    z-index: 1;

    outline: 0.5rem solid white;
    outline-offset: 0;
    box-shadow: black 0 0 0 1rem;
        /* TODO: shutdown and delete website */
}

body {
    margin: 0;
}

/* TODO: move to :heading */
/* TODO: consider theming header heading too */
h1, h2:not(header h2), h3, h4, h5, h6 {
    background-color: yellow;
        /* TODO: maybe greenyellow, like dropshadow? is that duplicative? */
    border-color: black;
    border-style: solid none solid none;
    border-width: 1rem;
    color: black;
    margin: 0;
    padding: 0;
    text-align: center;
}

a {
    background-color: #6060ff;
    border: solid;
    border-color: #3030ff;
    box-shadow: greenyellow 0.5rem 0.5rem;
    color: white;
}

a[aria-current="page"] {
    background-color: white;
    color: #6060ff;
}

a:visited {
    background-color: #c800c8;
    border-color: purple;
}

a:visited[aria-current="page"] {
    background-color: white;
    color: #c800c8;
}

a:active {
    background-color: #e60000;
    border-color: darkred;
}

a:active[aria-current="page"] {
    background-color: white;
    color: #e60000;
}

header {
    background-color: black;
}

/* TODO: create active and visited style for header links outside nav */
header a[href="#main"], header a.up, header h2 {
    background-color: black;
    border: solid;
    border-color: white;
    border-width: 2rem;
    color: white;
    display: block;
    font-size: 1.25rem;
    line-height: 4rem;
    margin: 0;
    padding: 0;
    text-align: center;
}

header a[href="#main"] {
    border-bottom: none;
}

header a.up, header h2 {
    border-top: none;
}

header nav ul:not(ul ul) {
    column-count: 3;
    column-gap: 1rem;
    column-width: 20rem;
    
    background-color: black;
    
    list-style-type: "";
    
    margin: 0;
    padding: 1rem 1rem 0 1rem;
}

header nav ul ul {
    list-style-type: "";
    
    margin: 0 0 1rem 0;
        /* TODO: this misaligns buttons; decide if reasonable */
    padding: 0;
}

header nav ul li {
    break-inside: avoid-column;
    
    height: 100%;
    width: 100%;
}

header nav ul li a {
    display: block;

    border-width: 1rem;

    font-size: 2rem;
    line-height: 5rem;
    text-align: center;
}

/* all top-level items */
header nav ul li a:not(ul ul li a) {
    border-bottom-style: none;
        /* TODO: would be better dashed; dashed causes issues on WebPositive */
    
    padding-bottom: 1rem;
        /* TODO: remove if changing border-bottom-style to dashed */
}

/* all top-level items with no children */
header nav ul li:not(:has(ul)):not(ul li ul li) a {
    border-bottom-style: solid;

    padding-bottom: 0;
        /* TODO: remove if dashed border style can work */
    margin: 0 0 1rem 0;
        /* TODO: unify with gap-under-lists from earlier */
        /* TODO: this misaligns buttons; decide if reasonable */
}

header nav ul ul li a {
    border-bottom-style: none;
    border-top-style: none;

    padding-bottom: 1rem;
    padding-top: 1rem;
}

header nav ul ul li:last-child a {
    border-bottom-style: solid;
    
    padding-bottom: 0;
}

main {
    background-color: lightyellow;
    font-size: 1.5rem;
    line-height: 150%;
}

main h1 {
    font-size: 3.5rem;
    line-height: 7rem;
}

main h2 {
    font-size: 2.25rem;
    line-height: 4rem;
}

/* TODO: move to main:heading:not(h1):not(h2) */
main h3, main h4, main h5, main h6 {
    line-height: 150%
}

p, blockquote {
    margin: auto;
}

main p, main blockquote {
    max-width: 80ch;
}

main p {
    padding: 0.5rem;
}

blockquote {
    box-sizing: border-box;
    padding: 2rem;
}

/* TODO: extend black to edges */
main ul {
    box-sizing: border-box;
    list-style-type: "";
    margin: 0;
        /* TODO: consider only extending black to screen width in <section>s */
    padding: 1rem;
}

main ul li {
    margin: auto;
    max-width: 80ch;
}

main ul:not(ul ul) {
    background-color: black;

    color: white;
}

main ul ul {
    border: none;
    padding: 0;
}

main ul li ul li {
    background-color: transparent;
    margin-left: 2ch;
    margin-right: 2ch;
        /* TODO: 4ch is bad at 320px; consider media query */
}

main ul a {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0 0.5rem;
}

/* TODO: consider something visible between dt and dd */
/* TODO: consider something between rows */
main dl {
    display: grid;
    grid-template: auto / 1fr 1fr;
    box-sizing: border-box;

    background-color: black;

    margin: 0;
        /* TODO: consider only extending black to screen width in <section>s */
    padding: 1rem;
}

main dl dt {
    grid-column: 1;

    color: white;
    text-align: right;

    margin: auto;
    margin-right: 0.5rem;

    width: min(calc(100% - 0.5rem), 40ch);
}

main dl dd {
    grid-column: 2;
        /* TODO: come up with better design for two <dd>s under one <dt> */

    color: white;
    text-align: left;

    margin-right: auto;
    margin-left: 0.5rem;

    width: min(calc(100% - 0.5rem), 40ch);
}

main dl dd a {
    display: block;
}

footer {
    border-top: solid;
    border-color: black;
        /* this has to be below border-top */
    border-width: 1rem;
    font-size: 1.25rem;
    width: 100%;
}

footer p {
    text-align: center;
}

footer a {
    border-left: none;
    border-right: none;
    box-sizing: border-box;
    display: block;
    padding: 0.5rem;
    width: 100%;

    /* different from normal as it has no horizontal */
    /* TODO: unify color and vertical with normal a tags */
    box-shadow: greenyellow 0 0.5rem;
}