* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Font size here: Mobile friendly responsive font sizes */ 
div, p, ul, ol {
    font-size: 14pt;
}

.footnotes {
    color: #666;
}

.footnotes ol {
    margin-right: 0em;
}

.post h1 {
    font-size: 28pt;
}

h2 {
    font-size: 20pt;
}

h3 {
    font-size: 14pt;
}

.post {
    font-size: 14pt;
}

.post .meta {
    font-size: 14pt;
}

/* Mobile-specific font sizes */
@media (max-width: 768px) {
    div, p, ul, ol {
        font-size: 12pt;
    }
    
    .post h1 {
        font-size: 24pt;
    }

    h2 {
        font-size: 18pt;
    }
    
    h3 {
        font-size: 12pt;
    }

    .post {
        font-size: 12pt;
    }

    .post .meta {
        font-size: 12pt;
    }

    .footnotes li,
    .footnotes li * {
        font-size: 10pt;
    }
}

body, h1, h2, h3, p, div, ul, ol {
    font-family: 'Lato', sans-serif;
}

body {
    background-color: #eee;
    color: #222;
}

h1 a {
    color: inherit;
    text-decoration: none;
}


.header,
.subheader,
.nav,
.toc,
.toc-separator,
.post,
.post-separator,
.footer {
    margin: 0;
    padding: 0;
    width: 80%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile-specific margins */
@media (max-width: 768px) {
    .header,
    .subheader,
    .nav,
    .toc,
    .toc-separator,
    .post,
    .footer {
        width: 90%;
    }
}

.subheader,
.post {
    max-width: 640px;
}

.post img {
    max-width: 100%;
    height: auto;
    text-align: center;
}

.footer {
    min-height: 5em;
    margin-top: 3em; 
    text-align: right;
    color: #999;
    font-family: monospace;
}

.footer-item {
    display: inline-block;
    padding: 0.5em 1em;
    background-color: #444;
    color: #8a8;
    border-radius: 4px;
    margin-bottom: 0.5em;
    font-size: 10pt;
}

.footer-item a {
    color: inherit;
    text-decoration: none;
}

/* Header styles */
.header-container {
    background-color: #444;
    width: 100%;
}

.header h1 {
  color: #aca;
  font-family: "Artifika", serif;
  font-weight: 400;
  padding: 1em 0em 1em 0em;
}

/* Navigation styles */
.nav-container {
    padding: 0 2em 0 0;
    margin-bottom: 1em;
}

.nav {
    text-align: right;
    padding: 0;
}

.nav-item {
    vertical-align: top;;
    font-size: 10pt;
    display: inline-block;
    padding: 0.1em 0.5em 0.2em 0.5em;
    background-color: #444;
    color: #8a8;
    border-radius: 0px 0px 4px 4px;
    border-width: 0;
    border-style: none;
}

.nav-item a {
    color: inherit;
    text-decoration: none;
}

/* Table of Contents styles */
.toc  {
    margin-top: 3em;
}

.toc .article-month,
.toc .article-type {
    margin: 0.5em 0em 0.5em 0em;
    color: #666;
}

.toc .article-month a {
    color: inherit;
    text-decoration: none;
}

.toc .article-month a:hover {
    text-decoration: underline;
}

.toc .article-list .article-item-lead-jot,
.toc .article-list .article-item-lead {
    display: inline-block;
    color: #666;
    margin-right: 0.2em;
}

.toc .article-list .article-item-lead-jot {
    color: #ccc;
}

.toc .article-list .article-item-tail {
    width: 0.2em;
}

.toc .article-list a {
    color: #229;
    text-decoration: none;
}

.toc .article-list a.untitled {
    color: #aae;
}

.toc .article-list {
    line-height: 1.7;
}

.toc .article-list a:hover {
    text-decoration: underline;
}

.toc-separator {
    padding-top: 3em;
    padding-bottom: 0em;
}

.toc-separator hr {
    border: 0;
    border-top: 3px solid #aca;
    border-style: dotted;
    margin: 0 auto;
    width: 50%;
}

/* Post styles */
.post {
    overflow-x: auto;
}
.post p {
    margin: 0.5em 0em 1.5em 0em;
    line-height: 2;
}

.post p a,
.post ul a,
.post ol a {
    color: #229;
}

.post ul,
.post ol {
    margin: 0.8em 1em 0.8em 2em;
    line-height: 2;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.post li > p:last-of-type {
    margin: 0.5em 0 0.5em 0;
}

blockquote {
    margin: 0.8em 1em 0.8em 2em;
    padding-left: 1em;
    border-left: 4px solid #ccc;
    color: #666;

}

code {
    font-family: "Source Code Pro", monospace;
}

.post pre code {
    background-color: #fff;
    font-size: smaller;
    min-width: fit-content;
    display: block;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* Mobile-specific margins */
@media (max-width: 768px) {
    .post ul {
        margin: 0.8em 0.5em 0.8em 0.5em;
    }
}

/* WP editor created extra blank Ps in the UL list. */
.post ul.wp-block-list > p {
    display: none;
}

.post header {
    margin: 2em 0 2em 0;
}

.post h1 {
    padding-bottom: 0.2em;
    margin: 0.2em 0 0.4em 0;
    border-style: solid;
    border-width: 0 0 1px 0;
}

.post h1 a {
   color: inherit;
}

.post h1 a:hover {
    text-decoration: none;
}

.post h1.title {
    color: #448;
    border-color: #448;
}

.post h1.untitled {
    color: #999;
    border-color: #999;
}

.post h2,
.post h3 {
    color: #666;
    margin: 0.2em 0 0.2em 0;
}

.post hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em auto 2em auto;
    width: 50%;
}

.post .meta {
    color: #999;
}

.post .meta .meta-spacer {
    display: inline-block;
    width: 1em;
    text-align: center;
}

.post .meta .post-tag {
    display: inline-block;
    background-color: #ddd;
    padding: 0.2em 0.5em;
    font-size: smaller;
}

.post .meta .post-tag a {
    color: inherit;
    text-decoration: none;
}

.post a {
    color: #229;
    text-decoration: none;
}


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

.fragments ul {
    margin: 0.8em 0em 0.8em 0em;
}

/** Month page styles */
.subheader h1 {
    display: block;
    padding: 0.5em 1em 0.5em 1em;
    border-radius: 8px;
    border-style: none;
    background-color: #aca;
    color: #444;
    font-family: "Artifika", serif;
    font-weight: 400;
    text-align: center;
}

.subheader .toc {
    width: 100%;
    margin-top: 1em;
    padding: 1em 1em 1em 1em;
    border-radius: 8px;
    background-color: #ddd;
}

.feed-container .post-separator {
    visibility: hidden;
    height: 2em;
}