:root {
    --body-margin: 0.2em;
    --link-color: #007bff;
    --bg-color: #aec6dc40;
    interpolate-size: allow-keywords;
}

@media only screen and (995px < width <=1500px) {

    :root {
        --body-margin: 1.8em;

    }
}

@media only screen and (width <=995px) {
    :root {
        --body-margin: 0.8em;

    }
}

body {
    height: fit-content;
    font-family: "FL-Selectric";
    background-color: var(--bg-color);
    overflow-x: hidden;

}

a {
    color: var(--link-color);
    text-decoration: none;
    height: fit-content;
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;


}

a:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

nav {
    position: sticky;
    top: var(--body-margin);


}

.informations {
    top: calc(var(--body-margin) + 1.2em);
}

main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: var(--body-margin);
    gap: 1em;
}

article {
    grid-column: 3/ span 7;
    max-width: 80ch;
}


main article {

    font-family: "Plantin";
    font-size: 1.5em;
    line-height: 1.1;
    font-feature-settings: 'onum' 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-decoration: underline;
}

article p {
    margin: 1em;
}


img {
    width: 100%;
}

figcaption {

    font-size: 80%;
    margin: 0 1.2em;
}

blockquote {
    font-style: italic;
    margin: 0 4em 1em 3em;
    quotes: "«" "»" "‹" "›";
    border-left: 2px solid #000000;
    padding: 0 0 0 2em;
}

blockquote>footer {
    font-style: normal;
    margin-top: 1em;
}

em {
    font-style: italic;
}

/* .block-type-heading {
    position: sticky;
    top: 1em;
} */

strong {
    text-decoration: dotted underline;
}


@media only screen and (995px < width <=1500px) {

    article {
        grid-column: 1/ span 7;
        max-width: 80ch;
    }

    blockquote {
        font-style: italic;
        margin: 0 1em 1em 1em;
        quotes: "«" "»" "‹" "›";
        border-left: 1px solid #000000;
        padding: 0 0 0 1em;
    }
}

@media only screen and (width <=995px) {
    article {
        grid-column: 1/ span 12;
        max-width: 80ch;
    }

    blockquote {
        font-style: italic;
        margin: 0 0 1em 0em;
        quotes: "«" "»" "‹" "›";
        border-left: 1px solid #000000;
        padding: 0 0 0 1em;
    }

}

sup {
    font-variant-position: super;
    vertical-align: text-top;
}