@media (prefers-color-scheme: dark){
    :root {
        --text: #ffffff;
        --bg: #000000;
        --accent: #e15151;
        --selection:#f2bd1077;
        --font: monospace;
        --headerfont: 'verily';
    }

}
@media (prefers-color-scheme:light){
    :root {
        --text: #000000;
        --bg: #ffffff;
        --accent:red;
        --selection:#ff000080;
        --font: monospace;
        --headerfont: 'verily';
    }
}

/* STRUCTURE */
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--bg);
    font-family: var(--font);
    color: var(--text);
    padding: 0;
    font-size: 16px;
}
#container {
    width:99%;
    margin:0 auto;
}
header { width:80vw;}
nav {
    display:flex;
    flex-direction: row;
    margin-bottom:15px;
    justify-content: space-between;
}
nav a:hover {
    text-decoration: none;
    background-color: var(--accent);
    color:var(--bg);
}
main {
    padding-bottom: 25px;
}
.page {
    width:40vw;
}

/* TYPO */
h1, h2, h3, h4, h5, h6 { font-family: var(--headerfont);text-transform: lowercase;}
h1 {
    font-size: 1.8rem;
    line-height: 1.78rem;
    letter-spacing: 0.5em;
}
h2  { 
    font-size: 1.5rem;
    line-height: 1.3rem;
    margin-top:0;
    margin-bottom:15px;
    line-height:25px;
}
h3 {
    font-size: 1.2rem;
    line-height: 1.3rem;
    margin-bottom:0;
    margin-top:0;
}
h5 {
    font-style:italic;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1rem;
}
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    text-decoration: underline 0.1em;
    font-style: italic;
    text-transform: uppercase;
}
s {text-decoration: line-through 1px solid var(--body-color);}
p {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom:0;
}
::selection { background-color:var(--selection);padding:5px;}
a::selection {
    background-color: var(--selection);
    color:var(--bg);
}
hr {
    border:2px solid var(--text);
}
ul {
    margin: 1rem 0 1rem 0;
    padding: 0 0 0 1.2rem;
}
small {
    font-size:0.8rem;
}

/* LAYOUT */
.horizontal {
    display:flex;
    flex-direction: row;
    gap:20px;
    width:auto;
    max-height: 70vw;
    padding:0;
    overflow-y:hidden;
    overflow-x:scroll;
}
.horizontal img {
    padding:0;
    border:1px solid var(--text);
}
.horizontal .front {
    max-width:35vw;
}
.horizontal .spread {
    max-width:70vw;
}
figure {
    margin:0;
    width:auto;
}
figcaption {
    font-size:0.9rem;
}
figcaption .jotiethooft {
    height:85px !important;
}

.noborder {
    border:none !important;
}
.nomargin {
    margin:0 !important;
}
.nopadding {
    padding: 0 !important;
}
.rightalign {
    text-align: right !important;
}

.nav { 
    display:inline-flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap:wrap;
    border:var(--text) 1px solid;
    padding:15px;
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    font-size:1.1em;
    line-height:2em;
}
.nav a:hover {
    text-decoration: none;
    background-color: var(--accent);
    color:var(--bg);
}

img {max-width:100%;height:auto;}
.full { width:100%;}
.half { width:49%;}
.third { width:32%;}
.twothird { width: 66%;}
.quarter { width:24%;}
.threequarter { width:70%;}