:root {
  --c-bg: #fff;
  --c-text: #000;
  --c-hover: orange;
  --c-quote: #005400 ;
  --c-link: darkblue ;
  --c-visited: darkgreen ;
  --c-gray: darkgrey ;
  --c-li-bg-odd: #dfd; 
  --c-li-bg-even: white; 
  --f-sans: Inter, Roboto, 'Droid Sans', 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --f-serif: 'TeX Gyre Pagella', 'Iowan Old Style', 'Palatino Linotype', 'Palatino', 'URW Palladio L', P052, serif ;
  --f-mono: ui-monospace, Inconsolata, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #000;
    --c-text: #fff;
    --c-hover: gold;
    --c-quote: #00e000 ;
    --c-link: lightblue ;
    --c-visited: #00e000 ;
    --c-gray: lightgrey ;
    --c-li-bg-odd: darkslategrey; 
    --c-li-bg-even: dimgrey; 
  }
}

:root {
    background: var(--c-bg);
    color: var(--c-text);
  }


.footnotes {
    padding: 0 0 1rem 1rem;
    text-align: left;
}

//* <details><summary>1</summary> FOOTNOTE GOES HERE IN-LINE</details>*//
details, summary {
  display: inline;
  vertical-align: super;
  font-size: 75%;
}
summary {
  cursor: pointer;
}
details[open] {
  display: contents;
}
details[open]::before {
  content: " [";
}
details[open]::after {
  content: "]";
}


.searchbutton {
    font-family: var(--f-sans);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--f-serif);
  font-size: 120%;
  font-weight: normal;
  line-height: 160%;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

p {
  margin-bottom: 0;
}
p + p {
  margin-top: 0.75rem;
}

a,
*:before,
*:after {
  font-kerning: auto;
  text-decoration: none;
}

a:link {
  color: var(--c-link);
}
a:visited {
  color: var(--c-visited);
}
a:hover {
  color: var(--c-hover);
}

table {
  align: center;
  width: 95%;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 2px solid;
}

table caption {
  font-family: var(--f-sans);
  font-size: 120%;
  line-height: 160%;
}

li {
  margin-top: 1em;
}

li:nth-child(odd) {background: var(--c-li-bg-odd); color: var(--c-text);}
li:nth-child(even) {background: var(--c-li-bg-even); color: var(--c-text);}

h1 {
  text-decoration: none;
  font-size: 150%;
  line-height: 175%;
  color: var(--c-text) !important;
}
h2 {
  text-decoration: none;
  font-size: 125%;
  line-height: 135%;
  color: var(--c-text) !important;
}
h3 {
  text-decoration: none;
  font-size: 115%;
  line-height: 133%;
  font-weight: normal;
  color: var(--c-text) !important;
}

h1 a:link { color: var(--c-text) !important;}
h2 a:link { color: var(--c-text) !important;}
h3 a:link { color: var(--c-text) !important;}


hr {
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 1.0, 0, 0.75), rgba(0, 0, 0, 0));
  border: none;
}
aside div#user_meta {
  padding: 2em 0.5em 2em 0.5em ;
  text-align: center;
  line-height: 1.5em;
  height: 100%;
  color: white !important;
  background: linear-gradient(90deg, black, seagreen 5%, forestgreen 50%, seagreen 95%);
}
aside div#user_meta h1 {
  margin: 0.5rem 0 0.5rem 0;
}
aside div#user_meta h2 {
  margin: 0.5rem 0 0.5rem 0;
}
aside div#user_meta h3 {
  margin: 0.5rem 0 0.5rem 0;
}
aside div#user_meta p {
  margin: 1rem 1rem 1rem 1rem;
  font-size: 100%;
  text-align:center;
}
aside div#user_meta ul {
  margin: 0.5rem 0 0 0;
  padding-left: 0;
  font-size: 100%;
  list-style-type: none;
  line-height: 150%;
}
aside div#user_meta ul li {
  display: inline;
  line-height: 133%;
  padding: 0 0 0 0;
}
aside a {
  color: white !important;
}
aside input {
  width: 50%;
}

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

main header {
  font-weight: bold;
}
main header p {
  font-weight: bold;
  font-size: 75%;
  padding-left: 2em;
  font-family: var(--f-sans);
  text-transform: lowercase;
}
main article {
  max-width: 72ch;
  margin: auto;
  padding: 2em;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
main article:link {
  background: var(--c-bg);
  font-family: var(--f-sans);
  font-size: 135%;
  color: var(--c-text) !important;
}
main div.article_title_date p {
  font-family: var(--f-sans);
  text-transform: lowercase;
  font-size: 75%;
}
main div.article_title_date li {
  font-family: var(--f-sans);
  text-transform: lowercase;
  font-size: 75%;
}
main article div.article_text {
  line-height: 150%;
}
main article div.article_text a {
  font-style: italic;
  font-weight: normal;
}
main article div.article_text a[rel=external]::after {
  content: "^"; 
}
main article div.article_text p:first-of-type; {
  font-size: 135%;
}
main article div.article_text code {
  max-width: 100%;
  font-size: 100%;
  line-height: 150%;
  font-family: var(--f-mono);

}
main article div.article_text pre {
  padding: 0.5rem;
  font-size: 100%;
  font-family: var(--f-sans);
  line-height: 150%;
  overflow-wrap: break-word !important;
}

main article div.article_text cite {
  margin: 0rem 0rem 1rem 2.5rem;
  color: #005400;
  font-style: normal;
  text-align: right;
}
main article div.article_text cite:before {
  content: '\2014';
}

main article div.article_text blockquote {
  color: var(--c-quote);
  font-decoration: none;
  font-style: italic;
  font-size: 140%;
  line-height: 150%;
  padding: 1rem;
}

main article div.article_text ol {
  margin-top: 1.5rem; 
}

main article div.article_text ol li {
  margin-top: 1.25rem; 
  font-weight: normal; 
}
main article div.index_item a p {
  color: var(--c-text);
}
main article div.index_item blockquote {
  margin: 1rem 1rem 1rem 1rem;
  color: var(--c-quote);
  font-decoration: none;
  font-style: italic;
  font-size: 140%;
}
main article div.gist {
  line-height: 110% ;
}
main article div.article_meta {
  font-family: var(--f-sans);
  font-size: 100%;
  font-weight: 200;
}
main footer {
  text-align: center;
  padding: 3rem;
}
main div#ending_message {
  padding: 0 3rem 0 3rem;
  font-size: 50%;
  text-align: center;
  font-family: var(--f-sans);
}
main div#ending_message a:link {
  text-decoration: underline;
}

@media screen and (min-width: 900px) {
  aside {
    position: fixed;
    width: 25%;
    height: 100%;
    top: 0;
    left: 0;
  }
  aside h2 {
    margin: 1rem 0 0 0;
  }
  aside div#user_meta {
    text-align: center;
  }
  aside div#user_meta ul li {
    display: block;
  }
  main {
    max-width: 90%;
    position: absolute;
    top: 0;
    left: 25%;
    overflow-wrap: break-word;
  }
 main article {
    margin: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    overflow-wrap: break-word;
  }
  main header {
    border-top: 0;
  }
}


div[data-pullquote]:before, span[data-pullquote]:before {
        content: attr(data-pullquote);
        display: block;
        float: right;
        width: 200px;
        margin: 0 0 0.5rem 2rem;
        padding: 0;
        font-size: 150%;
        line-height: 200%;
        font-style: italic;
        text-align: left;
        color: var(--c-quote);
}


    ul.tagcloud {
      list-style: none;
      max-width: 90%;
    }

    ul.tagcloud li {
        display: inline-block;
    }

    li.tag-1 {
        font-size: 200%;
    }

    li.tag-2 {
        font-size: 150%;
    }

    li.tag-3 {
        font-size: 125%;
    }

    li.tag-4 {
        font-size: 100%;
    }

    li.tag-5 {
        font-size: 75%;
    }

    li.tag-6 {
        font-size: 50%;
    }

    ul.tagcloud .list-group-item <span>.badge {
        background-color: var(--c-gray);
    }


.dateline {
  display: block;
  text-align: right;
  width: 100px;
  padding: 0 36px 0 0;
  float: left; 
}

.dateline .day {
    display: block;
    color: #800000;
    font-size: 200%;
    font-family: var(--f-serif);
}

.dateline .month, .dateline .year {
    color: var(--c-gray);
}

.dateline .month {
    display: block;
    font-size: 75%; 
}

.dateline .year {
    display: block;
    font-size: 75%;
}

sup.popup_footnote span {   
        text-align: left;
        z-index: 10;
        display: none; 
        padding: 0.25em;
        line-height: 125%;
        opacity: 0.9;
        border-radius: 4px;
        box-shadow: 5px 5px 8px #D4D4D4;
        top: 0.5em;
        left: 0.5em;
        transform: translate(-50%, 0);
        position: absolute; 
        width: 250px;
}