/* https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ */
/* start of desktop styles */
:root {
    --c-fg: #eeeeec;
    --c-bg: #000;
    --c-ln: #729fcf;
    --c-hi: #3465a4;
}

@media (prefers-color-scheme: light) {
    :root {
        --c-fg: #000;
        --c-bg: #fff;
        --c-ln: #204a87;
        --c-hi: #3465a4;
    }
}

body {
    font-family: 'Vollkorn', serif;
    /* max-width: 992px; */
    max-width: 800px;
    margin: 0 auto;
    padding: 0 10px;

    color: var(--c-fg);
    background-color: var(--c-bg);
}

header, footer, h2 {
    font-family: 'Space Grotesk', sans-serif;
}

h2 {
    margin-top: 0;
}

a {
    color: var(--c-ln);
}
a:hover {
    color: var(--c-hi);
}

body>header {
    border-bottom: 2px solid var(--c-fg);
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: center;
}

body>header h1 {
    margin-top: 0.7rem;
    margin-bottom: 0.3rem;
    font-weight: normal;
    font-size: 2.5rem;
    flex: 1;
}

body>header nav {
    flex: 0.6;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
}

body>header a {
    display: block;
/*
    margin: 0.8rem 0;
    margin-left: 0.8rem;
*/
    padding: 0.5rem;

    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-fg);
    text-decoration: none;
}
body>header a:hover {
    color: var(--c-fg);
    text-decoration: underline;
}

body>footer {
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: 2px solid var(--c-fg);
}

article {
    margin: 1.5rem 0;
}

/*
.pub {
    font-style: italic;
}
*/

.summary h1 {
    display: inline;
}

figure img {
    width: 40%;
}

figure.fullwidth img {
    width: 100%;
}

.footnotes hr {
    border: none;
    border-top: 1px solid var(--c-fg);
    width: 40%;
    margin: 0;
}

.alts {
    margin-top: 0.2em;
    text-align: right;
    font-size: 0.8em;
}

@media screen and (max-width: 991px) {
/* start of large tablet styles */

}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
/* start of phone styles */

}