@import url("https://fonts.googleapis.com/css?family=Gentium+Basic:400,400i,700,700i|Alegreya+Sans:400,400i,700,700i,800,800i&display=swap");

/* These fonts on Google Web Fonts are missing some characters I need. */
@font-face {
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("UbuntuMono-R_W.woff2") format("woff2"), url("UbuntuMono-R_W.woff") format("woff");
}

@font-face{
    font-family: 'Ubuntu Mono';
    font-style: normal;
    font-weight: 400;
    src: url("UbuntuMono-R_W.woff2") format("woff2"), url("UbuntuMono-R_W.woff") format("woff");
}
  
@font-face{
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    src: url("EBGaramond12-Regular.woff") format("woff");
    unicode-range: U+2619, U+2767;
}
  
body {
    font-family: "Gentium Basic", serif;
    font-size: 16pt;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 800;
    line-height: 1em;
}

th {
    font-family: "Alegreya Sans", sans-serif;
}

a {
    color: #1e1ed2;
}

a:visited {
    color: #53297a;
}

pre {
    border: 1px dashed gray;
    font-family: "Ubuntu Mono", monospace;
    margin: 0.5em;
    padding: 1em;
}

code {
    font-family: "Ubuntu Mono", monospace;
}

blockquote {
    font-style: italic;
}

blockquote i,
blockquote em {
    font-style: normal;
}

ul, ol {
    padding-inline-start: 1.5em;
}

hr {
    border: none;
    font-size: 1.25em;
    text-align: center;
}

hr::before {
    content: "⁂"
}

.siteTitle {
    font-family: "Alegreya Sans", sans-serif;
    font-size: 4em;
    font-weight: 800;
    text-align: center;
    margin-top: 0.5em;
}

.backLink {
    font-family: "Alegreya Sans", sans-serif;
    left: 0.5em;
    position: absolute;
    top: 0.5em;
}

.backLink a {
    color: inherit;
    text-decoration: inherit;
}

.backLink a::before {
    content: "< ";
}

.titleBar {
    margin: 3em auto 2em;
    max-width: min(50em, calc(100vw - 1em));
    text-align: center;
}

.titleBar .title {
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 800;
    font-size: 2.5em;
    line-height: 1em;
}

.titleBar .byline,
.titleBar .date,
.titleBar .count {
    font-size: 0.8em;
    color: #606060;
}

.titleBar a {
    color: inherit;
    text-decoration: inherit;
}

.titleBar .draft {
    background: yellow;
}

.contentBox {
    margin: auto;
    max-width: min(60em, calc(100vw - 1em));
    text-align: justify;
}

.contentBox img, .contentBox .multipleImgs {
    border: 1px dashed #ccc;
    display: block;
    max-width: 80%;
    margin: auto;
    padding: 1em;
}

.contentBox .multipleImgs {
    display: flex;
    flex-wrap: wrap;
}

.contentBox .multipleImgs img {
    border: none;
    flex: 1;
    max-height: min(calc(24em - 0.5em), calc(40vw - 0.9em));
    max-width: calc(50% - 0.5em);
    object-fit: scale-down;
    padding: 0.25em;
}

.contentBox .imageCaption {
    display: block;
    font-size: .8em;
    font-style: italic;
    margin: .5em auto;
    max-width: 80%;
    text-align: center;
}

.contentBox .imageCaption i, .contentBox .imageCaption em {
    font-style: normal;
}

.contentBox iframe.youtube {
    border: 1px dashed #ccc;
    display: block;
    max-width: 80%;
    margin: auto;
    padding: 1em;
}

.indexBox {
    margin: auto;
    max-width: min(60em, calc(100vw - 1em));
    text-align: justify;
}

.indexItem {
    margin-block-end: 2em;
    margin-block-start: 2em;
}

.indexItem .title {
    font-family: "Alegreya Sans", sans-serif;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1em;
}

.indexItem .date {
    color: #606060;
    font-size: 0.8em;
}

.indexItem .tags {
    color: #606060;
    font-size: 0.8em;
}

.theEnd {
    font-family: "EB Garamond", serif;
    font-size: 2em;
    margin: 0.75em auto;
    text-align: center;
}

.theEnd::before {
    content: "❧ ☙";
}

.naviBar {
    display: flex;
}

.naviBar .prev {
    flex: 1;
    margin: 0 auto;
    max-width: min(30em, calc(50vw - 1em));
}

.naviBar .next {
    flex: 1;
    margin: 0 auto;
    max-width: min(30em, calc(50vw - 1em));
    text-align: right;
}

.footBar {
    color: #606060;
    margin: 3em auto;
    max-width: min(60em, calc(100vw - 1em));
    text-align: center;
    font-size: 0.8em;
}

.bottomBar {
    border-top: 1px solid;
    border-image: linear-gradient(90deg, white, white 5%, black 20%, black 80%, white 95%, white) 1;
    font-family: "Alegreya Sans", sans-serif;
    font-size: 0.75em;
    padding-bottom: 0.6em;
    padding-top: 0.4em;
    text-align: center;
}

@media (max-width: 600px) {
    .siteTitle { font-size: 3em; }
    .titleBar .title { font-size: 2em; }
    h1 { font-size: 1.75em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: 1.1em; }
}

@media (max-width: 62em) {
    .naviBar {
        display: block;
    }

    .naviBar .prev, .naviBar .next {
        max-width: none;
        text-align: center;
    }
}

@media print {
    .backLink, .naviBar, .footBar {
        display: none;
    }

    .contentBox a[href]::after, .bottomBar a[href]::after {
        content: ' (' attr(href) ')';
    }
}