* {
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

@charset "UTF-8";
@font-face {
font-family: body-font;
src: url(fonts/EBGaramond-Regular.ttf);
font-style: normal;
font-weight: normal;
}

@font-face {
font-family: body-font;
src: url(fonts/EBGaramond-Bold.ttf);
font-style: normal;
font-weight: bold;
}

@font-face {
font-family: body-font;
src: url(fonts/EBGaramond-Italic.ttf);
font-style: italic;
font-weight: normal;
}

@font-face {
font-family: nav_font;
src: url(fonts/Raleway-Regular.ttf);
}

@font-face {
font-family: heading-font;
src: url(fonts/EBGaramond-Regular.ttf);
}

@font-face {
font-family: h3_font;
src: url(fonts/zarathustra-v01.otf);
}

:root {
--bg-body:#fff;
--bg-body-link-hover:#003060;
--bg-nav:#003060;
--bg-nav-hover:#68BBE3;
--bg-wrapper:#eee;
--bg-content:#fff;
--text-font:body-font;
--color-body:white;
--color-body-link:#055C9D;
--color-body-link-hover:#68BBE3;
--color-nav:;
--color-nav-link:#ddd;
--color-nav-link-hover:#68BBE3;
--color-content:#222;
--color-heading:#055C9D;
--color-post-date:#055C9D;
--border-nav:#003060;
}

html {
width: 100vw;
height: 100vh;
}

body {
font-size: 20pt;
width: 100vw;
height: 100vh;
margin:0;
font-family: var(--text-font);
background-color: #fffff8;
color: #222;
counter-reset: sidenote-counter;
}

h1, h2, h3 {
max-width: 100%;
font-family: heading-font;
color: var(--bg-nav);
}

h1 {
}

h2 {
margin-top: 4ch;
margin-bottom: 1ch;
line-height: 1;
}

h3 {
xfont-family: h3_font;
font-weight: bold;
margin-top: 2ch;
margin-bottom: 1ch;
line-height: 1;
}

hr {
display: block;
height: 1px;
width: 55%;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

p.subtitle {
font-style: italic;
margin-top: 1rem;
margin-bottom: 1rem;
xfont-size: 1.8rem;
display: block;
line-height: 1;
}

.numeral {
font-family: et-book-roman-old-style;
}

.danger {
color: red;
}

article {
padding: 5rem 0rem;
}

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

strong {
xcolor: darkgreen;
}

nav p, nav ul, nav li {
width: initial;
max-width: initial;
padding: initial;
margin: 0;
}

figure {
padding: 0;
border: 0;
/*font-size: 100%;*/

font: inherit;
vertical-align: baseline;
max-width: 55%;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
margin: 0 0 3em 0;
}

figure img {
width: 50%;
}

figcaption {
display: inline-block;
/*float: right;
clear: right;*/

margin-top: 0;
margin-bottom: 0;
margin-left: 10px;
/*font-size: 1.1rem;*/

/*line-height: 1.6;*/

vertical-align: baseline;
position: relative;
max-width: 40%;
font-style: oblique;
font-size: 90%;
}

a:link,
a:visited {
color: inherit;
text-underline-offset: 0.1em;
text-decoration-thickness: 0.05em;
}

/* Sidenotes, margin notes, figures, captions */

img {
max-width: 100%;
}

.sidenote, .marginnote, blockquote .sidenote {
    float: left;
    clear: right;
    width: 40%;
    font-size: .8em;
    line-height: 1;
    vertical-align: baseline;
    border: 1px var(--bg-nav) dotted;
    padding: 5px;
    margin: 1ch;
    padding: 1ch;
}

.sidenote-number {
counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
position: relative;
vertical-align: baseline;
}

.sidenote-number:after {
content: counter(sidenote-counter);
xfont-size: 1rem;
top: -0.5rem;
left: 0.1rem;
}

.sidenote:before {
content: counter(sidenote-counter) " ";
xfont-size: 1rem;
top: -0.5rem;
}

/*blockquote .sidenote,
blockquote .marginnote {
margin-right: -82%;
min-width: 59%;
text-align: left;
}
*/

input.margin-toggle {
display: none;
}

label {
font-size: initial;
}

label.sidenote-number {
display: inline-block;
max-height: 2rem; /* should be less than or equal to paragraph line-height */

}

label.margin-toggle:not(.sidenote-number) {
display: none;
}

/* CUSTOM SHIT */

.page {
margin-left:250px;
}

.post, .home {
margin-top: 2ch;
padding: 2vw;
padding-top: initial;
width: 1000px;
max-width: 100%;
}



.post p, .home p {
    width: 600px;
    margin: 0;
    margin-left: 3ch;
    text-indent: 2ch;
    text-align: left;
    line-height: 1.2;
}

.post h1 + p, .post h2 + p, .post h3 + p  {
    text-indent: 0;
}

.post li {
padding-right: 35%;
}

.post li p {
padding: 0;
}

.post a:link {
background-color: lightblue;
text-decoration: none;
border-radius: 5px;
padding: 0 5px;
}

.post a:hover {
text-decoration: underline;
xbackground-color: white;
}

.post .list_item_wrap a {
    background-color: initial;
}

.content-cover {
max-width: 80%;
display: block;
margin: 0 auto;
}

.list_item_cover img {
max-width: 80%;
}

blockquote p {
max-width: 80%;
font-family: nav_font;
font-size: 90%;
}

nav {
position: fixed;
font-family: nav_font;
top:0;
left:0;
height: 100vh;
background-color: var(--bg-nav);
width: 250px;
text-transform: capitalize;
text-align: left;
font-size: .9em;
font-weight: bold;
}

nav a:link, nav a:visited {
color: white;
text-decoration: none;
}

nav a:hover {
background-color: rgba(255, 255, 255, 0.5);
}

nav ul, nav ol {
list-style-type: none;
margin: 0;
padding: 2ch;
}

nav li {
border-top: white 1px dotted;
padding:2px 0;
}

footer {
position: fixed;
font-family: nav_font;
left:0;
bottom: 0px;
color: #8098b0;
padding: 5px;
margin: 0;
text-indent: ;
background-color: var(--bg-nav);
width: 250px;
max-width: 100%;
text-align: center;
font-size: .5em;
vertical-align: bottom;
}

footer p {
margin: 0;
padding: 10px;
max-width: initial;
font-size: .75rem;
line-height: 1;
vertical-align: bottom;
}

.copyright {
width: 100%;
}

footer img {
position: relative;
display: inline;
float:left;
}

.list_item_header h2 {
margin: 0;
}

.post_date {
font-size: .7em;
xfont-style: oblique;
margin-bottom: 10px;
}

.list_item_desc a {
text-decoration: none;
}

#glossary_caveat {
    font-size: 85%;
    margin-top: 2ch;
}

.glossary_list {
    margin-top:2ch;
}

.glossary_item_wrap {
    margin-bottom: 1ch;
    margin-left: 2ch;
    display: block;
    position: relative;
    xtext-align: center;
    text-indent: 0;
}

.glossary_item_link a:link {
background-color: white;
border: 1px black solid;
padding:2px;
border-radius: 5px;
text-decoration: none;
}

.glossary_item_link a:hover {
background-color: lightblue;
}

    .center_list li a:link {
        background-color: initial;
        xborder: 1px black solid;
    }

#headshot {
    float: right;
    width: initial;
    padding:5px;
}


/*---------------*/
/* MEDIA SCREENS */
/*---------------*/

@media (max-width: 799px) {

    html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    }
    
    .page {
    padding: 0%;
    margin: 0 auto;
    width: 100%;
    }

    ol, li {
    }

    header {
        display: block;
    }

    main, .home, .post {
    display: block;
    margin: 0;
    margin-top: 2ch;
    padding: 0;
    width: 100%;
    font-size: 16pt;
}

    .home p {
    margin: 0;
    padding: 0 10px;
    width: 100%;
    text-indent: 2ch;
    text-align: justify;
    line-height: 1.2;
    }

    .post p {
    margin: 0;
    width: 100%;
    padding: 0 10px;
    }
    

    .header_title {
    display: none;
    }

    nav ul {
    margin: 0;
    padding: 10px;
    list-style-type: none;
    vertical-align: middle;
    width: 100%;
    }

    nav li {
    margin: 0 5px ;
    padding:  5px;
    border-left: 10px solid var(--green-dark);
    text-decoration: none;
    color: white;
    border-radius:3px;
    text-align: left;
    hyphens: none;
    }

    nav ul li {
    width: initial;
    text-align: center;
    }

    nav li a {
    text-decoration: none;
    }

    nav li a:hover {
    text-decoration: underline;
    text-decoration-color: var(--green-dark);
    }

    nav {
    position: relative;
    width:100%;
    display:block;
    text-align: center;
    height: initial;
    padding-bottom: 25px;
    }


    .list_item_wrap {
    margin: 0;
    margin-bottom: 1.4rem;
    padding: 0;
    width: 100%;
    text-align: center;
   }

   .list_item_cover img {
    max-width: 100%;
   }

    label.margin-toggle:not(.sidenote-number) {
    display: none;
    }

    .update_wrap {
    max-width: 100%;
    }

    input.margin-toggle {
    display: inline-block;
    }

    label.sidenote-number {
    display:inherit;
    max-height: 2rem;
    }

    .sidenote,
    .marginnote {
    display: none;
    border-left: 2px dotted var(--orange);
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
    display: block;
    float: left;
    left: 1rem;
    clear: both;
    width: 95%;
    margin: 2ch 0;
    vertical-align: baseline;
    padding-left: 1ch;
    }

    label {
    cursor: pointer;
    }

    div.table-wrapper,
    table {
    width: 85%;
    }

    img {
    width: 100%;
    }

    figure img {
    width: 100%;
    }

    h1, h2, h3 {
    text-align: center;
    text-indent: 0;
    }

    p {
    width: initial;
    max-width: initial;
    line-height: initial;
    padding:initial;
    margin: 5px;
    text-indent: 2ch;
    }

    .post li {
    width: initial;
    max-width: initial;
    line-height: initial;
    padding:initial;
    padding-right: 4ch;
    }

    .post ol, .post ul {
    list-style-position: outside;
    xpadding: 0;
    }

    figure {
    max-width: initial;
    margin: initial;
    }

    figcaption {
    font-size: 80%;
    width: initial;
    max-width: initial;
    float: initial;
    }

    footer {
    position: relative;
    width: 100%;
    height: 85px;
    display: block;
    margin-top: 100px;
    }

    footer img {
    width: 75px;
    display: block;
    }

    .glossary_item_wrap {
    margin: 0;
    margin-bottom: 1ch;
    display: block;
    position: relative;
    text-align: center;
    text-indent: 0;
    }


    html body div.page main.post figure figcaption a:visited, figure a:link, figure a:visited {
    color: var(--green);
    }

    blockquote p {
    /*font-family: body_font;*/

    text-align: center;
    margin: 0;
    width: 100%;
    max-width: initial;
    font-style: initial;
    text-indent: 0;
    }

    html body div.page main.post blockquote p span.sidenote-wrapper span.sidenote {
    float: none;
    }

    .center_list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .center_list li {
        text-align: center;
        margin: 0;
        padding: 5px 0;
    }




    #headshot {
    float: right;
    width: initial;
    height: 150px;
    margin: 15px;
    }

}