@font-face {
    font-family: Latin-Modern-Mono-Light;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-regular.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Oblique;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-oblique.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Bold;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-bold.otf") format("opentype");
}
@font-face {
    font-family: Latin-Modern-Mono-Light-Bold-Oblique;
    src: url("../font/Latin-Modern-Mono/lmmonolt10-boldoblique.otf") format("opentype");
}
@font-face {
    font-family: CooperHewitt-Bold;
    src: url("../font/cooper-hewitt/CooperHewitt-Bold.otf") format("opentype");
}
@font-face {
    font-family: CooperHewitt-Light;
    src: url("../font/cooper-hewitt/CooperHewitt-Light.otf") format("opentype");
}
@font-face {
    font-family: caroni;
    src: url("../font/caroni/Caroni-Regular.otf");
}

:root {
    --title-offset: -1em;
    --prev-next-color: #DDD;
    --menu-link-color: #DDD;
    --link-blue: rgb(93,117,222);
}

* {
    box-sizing: border-box;
}


body {
    font-family: Latin-Modern-Mono-Light;
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
}
header {
    flex-shrink: 0;
    flex-grow:   0;
    margin-top:    1em;
    margin-left:  2em;
    margin-right:  2em;
    margin-bottom: 0.25em;

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 80px;
    align-items: center;
}
#rss-link-container {
    /*border: 2px solid green;*/
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}
#menu-container {
    /*border: 2px solid orange;*/
    grid-row: 1;
    grid-column: 1;
    /*padding-top: 1rem;*/
    font-size: 10pt;
    color: var( --menu-link-color );
    text-align: left;
}
#menu-container a {
    color: var( --menu-link-color );
    text-decoration: none;
}
#menu-container a:visited {
    color: var( --menu-link-color );
}
#menu-container a:hover {
    color: black;
}
main {
    flex-shrink: 1;
    flex-grow:   1;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    /* overflow-x: visible; */ /* any use of overflow breaks left-overhanging title. (?) */
    /* overflow-y: hidden; */
    /* border: green solid 1px; */
}
b, strong {
    font-family: Latin-Modern-Mono-Light-Bold;
    font-weight: normal;
}
i, em {
    /* letter-spacing: -0.015em; */
    /* I prefer the synthesized slant... */
    font-family: Latin-Modern-Mono-Light-Oblique;
    font-style: normal;
}
b i, b em, strong i, strong em, i b, em b, i strong, em strong {
    /* letter-spacing: -0.05em; */
    font-family: Latin-Modern-Mono-Light-Bold-Oblique;
    font-style: normal;
    font-weight: normal;
}
hr {
    border-top: 1px solid black;
}
/*
blockquote::before {
    content: url("../image/blockquote-line.png");
    display: inline;
}
*/
blockquote {
    font-size: 90%;
    line-height: 110%;
    margin-left: 0.0em;
    padding-left: 2em;
    background-image: url("../image/blockquote-line.png");
    background-repeat: no-repeat;
}
div.entry-header h1 {
    position: relative;
    left: var( --title-offset );
    /* font-family: Latin-Modern-Mono-Caps; */
    font-family: CooperHewitt-Bold;
    font-weight: normal;
    /* font-family: F25_Bank_Printer; */
    /* font-family: caroni; */
    /* text-transform: uppercase; */
}
div.entry-header h1 a {
    /* font-family: Latin-Modern-Mono-Light-Bold; */
    /* font-family: F25_Bank_Printer; */
    color: black;
    text-decoration: none;
}

div.entry-body a {
    /* background-color: #FFFF99; */
    /* text-decoration: #BBFFBB underline; */
    text-decoration: none;
    /* color: black; */
    color: var( --link-blue );
    font-family: caroni;
    font-size: 120%;
    /* font-family: F25_Bank_Printer; */
    /*
      font-family: xxx-1942-report;
      letter-spacing: -0.125em;
    */
}
div.entry-body a:hover {
    /* text-decoration: underline; */
    /* color: black; */
    /* text-decoration: wavy black underline; */
    /* text-decoration: orange underline; */
    /* background-color: yellow; */
}
div.entry-body a:hover:before, div.entry-body a:hover:after {
    color: red;
}
div.entry-body a:before {
    font-size: 90%;
    content: "[";
}
div.entry-body a:after {
    font-size: 90%;
    content: "]";
}
div.entry-body a i, div.entry-body a em, div.entry-body i a, div.entry-body em a {
    font-family: caroni;
    font-style: oblique;
}
div.entry-body {
    text-align: justify;
}
div.entry-footer a {
    /* color: var( --link-blue ); */
    color: blue; /* we just like the richer blue for this small link */
}
div.entry-footer a:visited {
    /* color: var( --link-blue ); */
    color: blue; /* we just like the richer blue for this small link */
}
div.entry-footer .post-metainfo {
    font-size: 9pt;
    text-align: right;
}
div.entry-footer .prev-top-next {
    font-size: 80%;
    color: var( --prev-next-color );
    margin-top: 3em;
    border-top: 1px solid var( --prev-next-color );
    padding-top: 0.5em;
    display: flex;
    flex-direction: row;
}
div.entry-footer .prev-top-next a {
    color: var( --prev-next-color );
    text-decoration: none;
}
div.entry-footer .prev-top-next a:hover {
    color: black;
}
div.entry-footer .prev-top-next .prev {
    width: 45%;
    text-align: left;
    margin-left: 3em;
}
div.entry-footer .prev-top-next .top {
    text-align: center;
}
div.entry-footer .prev-top-next .next {
    width: 45%;
    text-align: right;
    margin-right: 3em;
}
a#rss-link {
    color: black;
    text-decoration: none;
    font-family: Latin-Modern-Mono-Light-Bold;
    font-weight: normal;
}
a#rss-link span {
    color: #FF8800;
}
.flexmark .footnotes p {
    display: inline;
}
.flexmark .footnotes a.footnote-backref {
    font-size: smaller;
}
.flexmark .footnotes a.footnote-backref:before {
    content: none;
}
.flexmark .footnotes a.footnote-backref:after {
    content: none;
}
.footnotes {
    font-size: smaller;
    line-height: 120%;
}
footer {
    flex-grow:       0;
    flex-shrink:     0;
    margin-top:      4em;
    padding-top:     4em;
    padding-bottom:  1em;
    margin-left:     1em;
    margin-right:    1em;
    
    font-size: 10pt;
    /* border: red solid 1px; */
}
footer a {
    color: gray;
    text-decoration: none;
}
footer a:hover {
    color: gray;
    text-decoration: black underline;
}
#left-footer {
    float: left;
}
#right-footer {
    float: right;
}
/* modified from https://medium.com/towards-more-beautiful-web-typography/everything-about-hr-when-to-use-it-and-how-to-style-it-fd17b66573 */
hr.entry-separator {
    margin-top: 2em;
    margin-bottom: 2em;
    border: none;
}
hr.entry-separator::before {
    font-size: 100%;
    content: '<< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow-x: hidden;
}
div.archive h1 {
    position: relative;
    left: var( --title-offset );
    font-family: CooperHewitt-Bold;
    font-weight: normal;
    font-size: 18pt;
}
div.archive dt {
   font-family: CooperHewitt-Bold;
   font-weight: normal;
   font-size: 10pt;
 }
div.archive dd ul {
    margin-top: 0.25em;
    margin-bottom: 1em;
    list-style-type: "- ";
}
div.archive dd ul a {
    color: black;
    text-decoration: none;
}
div.archive dd ul a:visited {
    color: black;
}
div.archive dd ul a:hover {
    text-decoration: underline;
}



@media only screen and (max-width: 700px) {
    :root {
    	--title-offset: 0em;
    }
    main {
        max-width: clear;
        margin-left: 2em;;
        margin-right: 2em;;
    }
    footer {
    	min-height: 1.5em; /* bigger on desktop to prevent occlusion by link targets on hover */
    }
    hr.entry-separator::before {
        content: '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
    }
}