:root {
    color-scheme: light dark;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: text-top;
    background: transparent;
}

#about li {
}

body {
    display: flex;
    font-family: 'Avenir Next', Avenir, sans-serif;
    text-align: center;
    background-size: 100%;
    background: light-dark(#fff, #222);
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

main {
    margin: 1em 0 0 0;
    width: 50em;
    max-width: 85%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: left;
}

#about ul {
    list-style-position: outside;
    position: relative;
    left: 1em;
    padding-right: 1em;
    margin: 0.5em 0 1.5em 0;
}

nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

nav p {
    text-align: center;
}

nav ul {
    /* height: 25em; */
    list-style: none;
    left: revert;
    display: grid;
    grid-template: auto auto / auto auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: flex-start;
    /* column-count: 2; */
    width: 85%;
    max-width: 35em;
    /* font-size: larger; */
    gap: 1em;
    padding: 2em;
}

nav li {
    /* width: 50%; */
    width: 15em;
    /* display: flex; */
    /* align-content: center; */
    /* justify-content: center; */
    /* align-items: center; */
    text-align: center;
}

nav li img {
    max-width: 6em;
}

nav li p {
    text-align: center;
    /* font-variant: petite-caps; */
}

p {
    /* margin: 1em 0; */
    text-align: left;
    /* font-variant: petite-caps; */
}

#contact-page section h1 {
    margin: 1em 0;
}

#contact-page ul {
    list-style: none;
}

@media (prefers-color-scheme: dark) {
    img.invert-in-dark-mode {
        filter: invert(100%);
    }
}

@media screen and (max-width: 686px) {
    nav li {
        width: 6em;
    }
}

@media screen and (max-height: 600px) and (min-width: 500px) {
    nav ul {
        grid-template: auto / auto auto auto auto;
    }

    nav li {
        width: 6em;
    }
}