@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

body {
    font-family: "Crimson Text", serif;
    font-size: 14pt;
}

main h1#title {
    font-size: 2em;
    text-align: center;
    transform: skew(0.1rad, 0.02rad);
}

.subtitle {
    padding: 0 2em;
    font-size: 1.3em;
    p { text-align: left; }
}

main h1 { font-size: 1.5em; }

main p {
    text-align: justify;
}

a { color: blue; text-decoration: none; }
a:visited { color: blue; }
a:hover { text-decoration: underline; }

body > header > .nav,
body > .main-part > footer > .nav {
    padding: 0;
    font-weight: bold;

    a, a:visited { color: black; }
    li { padding: 4px 10px; }
    .samples {
        font-weight: normal;
        font-style: italic;
    }
}

body > header > .nav li {
    display: inline-block;

    > .samples { display: none; }
}

body > .main-part > footer {
    font-size: .8em;

    > p a, a:visited, a:hover {
        color: black;
        text-decoration: underline;
    }

    > .nav {
        margin-top: 5em;
        padding-top: 1em;
        border-top: 1px solid black;
        min-width: 100%;
        display: flex;
        flex-direction: row;
        > li {
            display: inline-block;
            flex-grow: 1;
            .samples {
                list-style: none; padding: 0;
                > li { padding-left: 0; padding-right: 0; }
            }
        }
    }
}

@media only screen and (min-width: 650px) {
    body {
        display: flex;
        flex-direction: row;
    }

    body > header {
        min-width: 120px;
        padding-right: 20px;
        margin-right: 30px;
        border-right: 1px solid black;

        > .nav {
            > li {
                /* for some reason this doesn't apply unless it's specified as important */
                display: block !important;
                > a { font-weight: bold; }

                .samples {
                    /* idem */
                    display: block !important;
                    font-size: .8em;
                    padding-left: 1em;

                    > li { display: block; }
                }
            }
        }
    }

    body > .main-part {
        min-width: 55vw;
        max-width: 55vw;
    }
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup { top: -0.5em; }

.footnotes-sep { border: 0.5px solid black; }
.footnotes { font-size: .85em; }

.sc, .date, .special-place, .special-name {
    font-variant: small-caps;
}

.data {
    display: flex;
    flex-direction: row-reverse;
}

.data .date {
    display: inline-block;
    padding: .15em .3em;
}

.data .data-tags {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data .data-tags li {
    display: inline-block;
    box-sizing: border-box;
}

.data .data-tags li {
    border: 1px solid blue;
    padding: .05em .3em;
    border-radius: 10px;
}

.data .data-tags li + li {
    margin-left: .5em;
}

.intro {
    font-style: italic;
    padding-left: 4rem;
    padding-right: 4rem;
}

.replika {
    margin: 0;
    text-indent: 3em hanging;
}

.replika .person {
    font-variant: small-caps;
    margin-right: 1em;
}

figure img {
    width: 100%;
}

.post-thumb-list {
    padding: 0;

    .post-thumb {
        padding: .5em 0;
        margin: .5em 0;

        a { color: black; }
        .post-thumb-title {
            margin: 0;
            font-size: 1.3rem;
        }
    }
}