@font-face {
    font-family: 'EB Garamond';
    src: url(/assets/fonts/EBGaramond-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'EB Garamond';
    src: url(/assets/fonts/EBGaramond-Italic.woff2);
    font-style: italic;
}

@font-face {
    font-family: 'EB Garamond';
    src: url(/assets/fonts/EBGaramond-Bold.woff2);
    font-weight: 700;
}

@font-face {
    font-family: 'EB Garamond';
    src: url(/assets/fonts/EBGaramond-BoldItalic.woff2);
    font-style: italic;
    font-weight: 700;
}
:root {
    --bg-color: #F7F3E9;        /* Lighthouse */
    --body-color: #18171D;      /* Bamboo charcoal */
    --bold-color: #3E3541;      /* Wild chestnut */
    --accent-color: #933C44;    /* Oxblood */
    --link-color: #106B9A;      /* Snowflake */
    --visited-color: #6D7E95;   /* Old man winter */
    --hover-color: #1A68D8;     /* Dew grass */
}
:root {
    --base-type-size: 1.25rem; /* 20px given the default type size of 16px for most browsers. */
    --small-type-size: 1rem;
    --type-size-exponent: 1.25;
}

body {

    background-color: var(--bg-color);

    color: var(--body-color);
    font-family: 'EB Garamond';
    font-size: var(--base-type-size);
    font-variant: oldstyle-nums;

    margin: 0;
    min-height: 100vh;

    display: grid;
    grid-template-rows: auto 1fr auto;
    

}

strong,b {
    color: var(--bold-color);
}

h1,h2,h3,h4 {
    color: var(--accent-color);
    font-feature-settings: "dlig" 1;
}

h4 {
    font-size: var(--base-type-size);
}

h3 {
    font-size: calc(var(--base-type-size)*pow(var(--type-size-exponent), 1));
}

h2 {
    font-size: calc(var(--base-type-size)*pow(var(--type-size-exponent), 2));
}

h1 {
    font-size: calc(var(--base-type-size)*pow(var(--type-size-exponent), 3));
}

.author-date {
    color: var(--accent-color);
}

blockquote {
    color: var(--bold-color);
    font-style: italic;
    margin: 1em 2em;
}

.quote-attribution {
    margin-left: 2em;

}

pre {
    border-width: 1px 0;
    border-style: dashed;
    border-color: (--bold-color);
    padding: 1em;
    background-color: #fffdf5;
    font-size: 1rem;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: black;
}

table {
    text-align: left;
    font-variant: proportional-nums;
}

thead {
    color: var(--bold-color);
    font-style: italic;
}

tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.04);
}

td,tr {
    padding: 0 .5em;
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--visited-color);
}

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

.bigtitle {
    background-image: url("/assets/img/saint_george_and_the_dragon.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: 50vh;
    position: relative;
}

@media (max-width: 45rem) {
    .bigtitle h1 {
        font-size: 16vw;
    }
    
}

@media (min-width: 45rem) {
    .bigtitle h1 {
        font-size: 8rem;
    }

    /* On bigger screens, add about six lines of whitespace at the bottom
    of articles, to avoid text running too close to the bottom of the
    viewport. */

    article {
    padding-bottom: 6em;
    }

}

.bigtitle h1 {
    font-style: normal;
    /*font-size: 8rem;*/
    position: absolute;
    bottom: 0;
    margin: 0 0 0.5em 0;
    line-height: 0.75em;
}

.bigtitle img {
    max-width: 100%;
}

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

.content-container {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.cite-list {
    padding-left: 2rem;
}

.cite-list li {
    list-style: none;
    margin-bottom: 2rem;
}

.cite-list h3 {
    margin: 0;
}

.cite-list p {
    margin-top: 0;
}

.cite-list .author {
    font-style: italic;
}

.corner-icon img {
    height: 2em;
}

.nav {
    margin: 0;
    /* background-color: rgba(0,0,0,0.2); */

}

.page-footer {
    border-top: 1px dashed var(--bold-color);
}

.page-header {
    border-bottom: 1px dashed var(--bold-color);
}

.nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: .5rem;
    margin: 0;
}

.nav ul li {
    padding: 0 1rem 0 0;
    margin-top: auto;
    margin-bottom: auto;
}