* {
    box-sizing: border-box;
}

body {
    font-family: "Fraunces", serif;
    font-weight: 350;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 0 "WONK" 1;
    font-size: 110%;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 45rem;
    padding: 0 15px;
}

b, strong {
    font-weight: 550;
}

hr {
    background: none;
    border-top: 1px dashed grey;
    border-bottom: none;
    margin: 2rem 0;
}

nav {
    margin: 2rem 0 0;
}

main {
    hyphens: none;
}

h1,h2,h3,h4 {
    margin: 2rem 0 0;
}

h1 {
    font-size: 220%;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

h1.title {
    font-size: 280%;
    margin-bottom: -0.1rem;
}

h1 + p {
    margin: 0 0 1rem;
}

h2 {
    font-size: 180%;
    line-height: 1.1;
}

p.subtitle {
    font-size: 120%;
    opacity: 65%;
}

span.created {
    display: block;
    margin: 1.2em 0;
}

img {
    /*border: 1px solid lightgrey;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    height: auto;
    max-width: 100%;
    width: auto;
}

img.half-size {
    width: 50%;
}

img.ninety-size {
    width: 90%;
}

blockquote {
    border: 1px solid;
    border-left: 6px solid;
    margin: 2rem 0;
    padding: 10px;
}

blockquote p {
    margin: 0;
}

figure {
    margin: 2rem 0;
}

img.with-caption {
    margin-bottom: .8rem;
}

figcaption {
    opacity: 70%;
    text-align: center;
    font-style: italic;
}

code {
    border: 1px solid;
    padding: 0.1rem 0.3rem;
    tab-size: 4;
    font-family: monospace;
}

pre {
    border: 1px solid;
}

pre code {
    border: 0;
    display: block;
    overflow-x: auto;
    padding: 0.3rem 0.6rem;
}

table {
    border-collapse: collapse;
    margin: 2rem 0;
    text-align: left;
    width: 100%;
}

tr {
    border-bottom: 1px solid lightgrey;
}

th,td {
    padding: 6px;
}

footer {
    border-top: 1px dashed grey;
    margin: 2rem 0;
    padding: 1rem 0;
}

a.navbar:link {text-decoration: none;}
a.navbar:visited {text-decoration: none;}
a.navbar:hover {text-decoration: underline;}
a.navbar:active {text-decoration: underline;}

nav {
    text-align: right;
}

span.nav-separator {
    opacity: 45%;
    padding-left: .3em;
    padding-right: .3em;
}

a.list-title:link {text-decoration: none;}
a.list-title:visited {text-decoration: none;}
a.list-title:hover {text-decoration: underline;}
a.list-title:active {text-decoration: underline;}

span.list-desc {
    opacity: 70%;
}

a.list-action:link {text-decoration: none;}
a.list-action:visited {text-decoration: none;}
a.list-action:hover {text-decoration: underline;}
a.list-action:active {text-decoration: underline;}

a.list-action {
    font-size: 110%;
}


@supports (color-scheme: light dark) {
    @media screen and (prefers-color-scheme: light) {
        body {
            background-color: #eeeeee;
            color: #222222;
        }
        h1,h2,h3,h4,h5,h6 {
            color: #333333
        }
        a:link {color: #222222;}
        a:visited {color: #222222;}
        a:hover {color: #111111}
        a:active {color: #111111;}
    }
    @media screen and (prefers-color-scheme: dark) {
        body {
            background-color: #111111;
            color: #cccccc;
        }
        h1,h2,h3,h4,h5,h6 {
            color: #eeeeee
        }
        a:link {color: #eeeeee;}
        a:visited {color: #eeeeee;}
        a:hover {color: #ffffff}
        a:active {color: #ffffff;}
    }
}