/* Structural elements */
body {
   background-image: var(--morris-image);
   background-color: var(--warm-white);
   background-repeat: repeat;
   background-attachment: fixed;
   background-size: var(--background-size);
   display: flex;
   justify-content: center;
}
#body-grid {
    background-image: var(--paper-image);
    background-repeat: repeat;
    display: flex;
    box-sizing: border-box;
    box-shadow: var(--box-shadow);
}
#body-content {
    overflow-y: hidden !important;
}
#navigation {
    display: flex;
    flex-wrap: wrap;
}

/* Text */
.site-title {
    font-style: normal !important;
    color: var(--text-black);
}
.initialised::first-letter {
    font-family: 'Euclid';
    float: left;
    font-size: 11.5em;
    margin: 6px 2px 0 -3px;
    line-height: 0.39em;
    color: var(--initials-red);
}
.email {
    margin-top: calc(var(--p-size) * -1) !important;
}
.post-description {
    font-style: italic;
    font-size: var(--description-size);
    font-weight: var(--description-weight);
    letter-spacing: var(--description-spacing);
}
#navigation a {
    color: var(--text-black);
    font-family: var(--accent-font);
    font-size: var(--h2-size);
    font-style: italic;
    line-height: 0;
}
h1, h2 {
    font-family: var(--accent-font);
    line-height: var(--headings-line-height);
    word-spacing: var(--word-spacing);
    font-style: italic;
}
h1 {
    font-weight: normal;
    font-size: var(--h1-size);
    margin: 0 0 var(--p-size) 0;
}
h2 {
    font-weight: normal;
    font-style: italic;
    font-size: var(--h2-size);
    margin: 0 0 calc(var(--p-size) / 4) 0;
}
p, li {
    color: var(--text-black);
    font-family: var(--p-font);
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    font-weight: var(--p-weight);
    margin-block-start: 0 !important;
    letter-spacing: var(--p-spacing);
    word-spacing: var(--word-spacing);
}
p:not(:last-child) {
    margin-block-end: var(--p-size);
}
p:last-child {
    margin-block-end: 0;
}
.center-text {
    text-align: center;
}
sup {
    vertical-align: top;
    position: relative;
    top: -0.3em;
    font-size: 0.67em;
}
li {
    margin-bottom: 3px !important;
}
a, a:active, a:visited, a:hover {
    color: var(--cave-blue);
    text-decoration: none;
}
ul {
    margin-block-start: calc(var(--p-size) / 3);
    margin-block-end: var(--p-size);
    margin-left: calc(var(--p-size) * 0.25);
}
ul li::marker {
  content: '▧ ';
  font-size: 0.975em;
}
li {
    padding-left: 6px;
    margin-block-end: calc(var(--p-size) / 3);
}
.diary-date {
    font-family: var(--accent-font);
    font-style: italic;
    font-size: var(--h2-size);
}
.post-date {
    font-family: var(--accent-font);
    font-style: italic;
    text-align: center;
    font-size: var(--h1-size);
}
.diary-summary {
    clear: both;
    margin: 0 0 calc(var(--p-size) * 2) 0;
}
.diary-summary .post-date {
    display: none;
}
.review-list {
    font-family: var(--accent-font);
    font-style: italic;
    font-size: var(--h2-size);
}
figcaption {
    color: var(--soft-black);
    font-family: var(--accent-font);
    font-style: italic;
    font-size: var(--caption-size);
    margin: 8px 0 0 0;
    text-align: center;
}
.divider{
    text-align: center;
}
*::selection {
    background: var(--highlighter);
}

/* Images */
figure {
    margin: 0 0 var(--p-size) 0;
}
figure img {
    display: block;
    max-width: 100%;
    margin: auto;
    border-radius: var(--border-radius);
}
.diary-summary figure {
    display: none;
}
.img-right {
    float: right;
    width: 45%;
    margin-left: 28px;
    margin-top: 4px;
    margin-bottom: 12px;
}

/* Media */
audio {
    width: 100%;
}
.youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(100% / 1.78); /* set the denominator to fix a constant aspect ratio */
    margin: 0 0 var(--p-size) 0 !important;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 899px) {
    body {
        margin: 10px;
    }
    #body-grid {
        display: flex;
        flex-direction: column;
        padding: 0 28px;
        align-items: center;
    }
    .site-title, .email {
        text-align: center;
    }
    #navigation {
        display: flex;
        padding: 36px 0;
        row-gap: 18px;
        column-gap: 24px;
        align-items: center;
        justify-content: center;
    }
    #body-content {
        background-image: linear-gradient(to right, var(--soft-black) 25%, rgba(0, 0, 0, 0) 0%);
        background-position: top;
        background-size: 7px 1px;
        background-repeat: repeat-x;
        padding: 36px 0 24px 0;
        max-width: 650px;
    }
    blockquote {
        padding: 0 0 0 calc(var(--p-size) * 1);
        margin: calc(var(--p-size) * 1.5) 0;
    }
    ul, ol {
        padding-left: var(--p-size) !important;
    }
    ol {
        list-style-position: inside;
    }
    li {
        padding-left: 0px;
    }
}

@media (min-width: 900px) {
    body {
        margin: 0px;
    }
    #body-grid {
        width: var(--max-content-width);
        position: absolute;
        flex-direction: row;
        top: 0;
        padding: 62px 50px 50px 50px;
    }
    #body-content {
        background-image: linear-gradient(var(--soft-black) 25%, rgba(0, 0, 0,0) 0%);
        background-position: left;
        background-size: 1px 7px;
        background-repeat: repeat-y;
        overflow-y: auto;
        padding: 0 12px 0 50px;
    }
    #navigation {
        flex-direction: column;
        row-gap: 12px;
        padding: 0 62px 0 0;
    }
    blockquote {
        padding: 0 calc(var(--p-size) * 1.5);
        margin: calc(var(--p-size) * 1.5) 0;
    }
    ul, ol {
        padding-left: var(--p-size) !important;
    }
}

@media (min-width: 500px) {
    p, .abstract, li {
        text-align: justify;
    }
}