@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/LibreBaskerville-RegularExt.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/LibreBaskerville-Regular.woff2) format('woff2');
    src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(https://fonts.gstatic.com/s/librebaskerville/v7/kmKnZrc3Hgbbcjq75U4uslyuy4kn0qNZaxMaC82U.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/LibreBaskerville-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/LibreBaskerville-Italic.woff2) format('woff2');
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'), url(https://fonts.gstatic.com/s/librebaskerville/v7/kmKhZrc3Hgbbcjq75U4uslyuy4kn0qNcWx8QDO-WyrubOA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Libre Baskerville';
    font-style: italic;
    font-weight: 400;
    src: local('Libre Baskerville Italic'), local('LibreBaskerville-Italic'), url(https://fonts.gstatic.com/s/librebaskerville/v7/kmKhZrc3Hgbbcjq75U4uslyuy4kn0qNcWxEQDO-Wyrs.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* constants */

:root {
    --main-font-size: 18px;

    --h1-font-size: calc( var(--main-font-size) * 1.6 );
    --h1-font-weight: 700;

    --h2-font-size: calc( var(--main-font-size) * 1.3 );

    --footer-font-size: calc( var(--main-font-size) * 0.5 );
    --sidebar-font-size: calc( var(--main-font-size) * 0.7 );
    --small-font-size: calc( var(--main-font-size) * 0.7 );
    --nav-sections-font-size: calc( var(--main-font-size) * 0.7 );
    --pager-font-size: calc( var(--main-font-size) * 0.7 );

    --main-color: #101010;
    --link-color: #606060;
    --distraction-color: #808080;
}

/* general elements first */

* {
    font-family: 'Libre Baskerville', serif;
}

body {
    font-size: var( --main-font-size );
    color: var( --main-color );
}

a {
    text-decoration: underline var(--link-color);
}
a:hover {
    text-decoration: underline;
}
a:link,
a:visited {
    color: inherit;
}

ul {
    margin: 1em 0;
    padding: 0 0 0 1em;
}
li {
    margin: 1em;
    padding: 0 0 0 0;
}
ul > li {
    list-style-type: disc;
}
h1 {
    font-size: var(--h1-font-size );
    font-weight: var( --h1-font-weight );
}
h2 {
    font-size: var(--h2-font-size );
}
h1,
h2 {
    margin: 1.2em 0 0.8em 0;
    line-height: 1.2;
}
iframe {
    width: 100%;
    height: 250px;
    border: 1px solid #808080;
}
dt {
    font-weight: 700;
}
td,
th {
    border: 1px solid #a0a0a0;
    padding: 1ex;
}
pre,
code {
    font-family: 'monospace'
}

.sub {
    vertical-align: sub;
    font-size: 70%;
}
.disabled {
    color: var(--distraction-color);
}
.clearer {
    clear: both;
}

/* layout-specific */

div.container {
    max-width: 980px;
    padding: 1ex;
}

header {
    margin: 20px 0 30px 0;
    min-height: calc(var(--main-font-size) * 3 );
    border: none;
}

header > div.container {
    border-bottom: 1px solid black;
}

header div.title {
    float: left;
    margin: 0;
    padding-top: 15px;
    font-size: var(--h1-font-size );
    font-weight: var( --h1-font-weight );
}
header div.title a,
h1 a {
    text-decoration: none;
}

header div.nav-tagline {
    float: right;
    text-align: right;
    max-width: 50%;
    margin: 0;
    padding: 25px 0 0 0;
    font-size: var(--main-font-size );
    font-weight: var( --h1-font-weight );
}
header div.nav-tagline p {
    margin: 0;
}
nav.sections ul {
    margin: 0 auto 2em auto;
    padding: 0;
    text-align: center;
    font-size: var( --nav-sections-font-size );
    color: var( --distraction-color );
}
nav.sections li {
    display: inline;
    margin: 0;
    padding: 0;
}

nav.sections li + li::before {
    content: " • ";
    padding: 0 10px;
}
nav.sections a {
    text-decoration: none;
}

section > h1.main {
    text-align: center;
    margin: 1em 0 3em 0;
}
section > h1.main::before {
    content: "\2014";
    margin-right: 1ex;
}
section > h1.main::after {
    content: "\2014";
    margin-left: 1ex;
}

div.author {
    display: none;
    text-align: center;
}

ul.range-posts > li {
    margin-bottom: 4em;
}

header,
footer {
    background: inherit;
}
footer {
    min-height: calc(var(--main-font-size) * 3 );
    margin-top: 5em;
    border: none;
    font-size: var(--footer-font-size);
    color: var( --distraction-color );
}

footer > div.container {
    border-top: 1px solid black;
    padding-top: 2em;
}

footer p {
    margin: 0 0 10px 0;
    text-align: justify;
    hyphens: auto;
}
footer p.copyright img {
    float: left;
    margin: 0 20px 10px 0;
}

@media ( min-width: 640px ) {
    footer p.copyright {
        float: left;
        width: calc( 50% - 1em );
        padding: 0;
    }

    footer p.author {
        float: right;
        width: calc( 50% - 1em );
        padding: 0;
    }

    footer p.typeface {
        clear: both;
        text-align: center;
    }
}

p.date {
    font-size: var( --small-font-size );
}

main > div.container {
    margin-bottom: calc( var(--main-font-size) * 3 );
    order: 2;
}

@media ( min-width: 640px ) {
    main {
        min-height: 700px;
    }
}

div.quick-notes div {
    margin-bottom: 30px;
    clear: both;
}

div.quick-notes h2,
div.quick-notes > ul,
div.quick-notes > ul > li {
    margin-top: 0;
    margin-left: 0;
    padding-top: 0;
}
div.quick-notes h2 a {
    text-decoration: none;
}

div.quick-notes {
    margin-bottom: 50px;
}
div.quick-notes ul {
    margin: 0;
    padding: 0;
}
div.quick-notes > ul > li {
    list-style-type: none;
    clear: both;
    font-weight: 100;
}
div.quick-notes span.title {
    font-weight: var(--h1-font-weight);
}
div.quick-notes span.sep::after {
    content: "•";
    margin: 0 1ex;
}
div.quick-notes li p {
    margin: 0;
    padding: 0;
    display: inline;
}
div.quick-notes img {
    width: 100%;
    margin: 10px 0;
    padding: 0;
}
div.quick-notes li li {
    margin: 4px 1em;
}
div.quick-notes a {
    text-decoration: underline;
}

article p,
article li,
article dt,
article dd {
    line-height: 1.6;
}
article p {
    margin: 1.3em 0;
}
article dt {
    margin-top: 1.3em;
}
article a {
    text-decoration: underline var(--distraction-color);
}
article h1 a {
    text-decoration: none;
}

article blockquote {
    margin-left: var(--main-font-size);
    padding-left: var(--main-font-size);
    border-left: 3px solid var(--distraction-color);
    font-style: italic;
}

ul.pager {
    margin: calc( var(--main-font-size) * 5 ) auto calc( var(--main-font-size)) auto;
}
ul.pager li {
    margin: 0 40px;
    font-size: var(--pager-font-size);
}

article iframe {
    width: 100%;
    height: 500px;
}

div.visit {
    font-size: var( --sidebar-font-size );
}
div.visit span::before {
    content: "Visit";
}

div.link {
    font-size: var( --sidebar-font-size );
}

div.link span::before {
    content: "Link";
}

aside.sidebar {
    float: right;
    margin: 0 0 2em 2em;
    color: var( --distraction-color );
}
aside.sidebar div.follow * {
    display: inline;
    font-size: var( --sidebar-font-size );
}
aside.sidebar div.follow ul {
    margin: 0;
    padding: 0;
}
aside.sidebar div.follow li {
    margin: 0;
    padding: 0;
}

aside.sidebar div.visit,
aside.sidebar div.link {
    text-align: center;
}
aside.sidebar div.visit {
    margin-bottom: 0;
}

aside.discussion {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 30px;
}
aside.discussion div {
    padding: 10px 20px;
    border-radius: 8px;
    background: #f0f0f0;
    font-size: var( --sidebar-font-size );
    color: var( --distraction-color );
}

ul.range-ul-article {
    margin: 0;
    padding: 0;
}
ul.range-ul-article > li {
    margin: 0 0 4em 0;
    padding: 0;
}

ul.range-ul-article > li {
    list-style: none;
}

.note {
    font-size: 80%;
}
.sidenote {
    margin: 1ex 0 1ex 3em;
    font-size: 80%;
}
ul.categories {
    display: none;
}

}