article {
    --article-body-heading-max-width: 600px;
    --article-body-text-max-width: var(--body-text-max-width);
}

article {
    display: flex;
    flex-direction: column;
    padding: 1em 0;
    align-items: center;
    align-self: center;
    width: 100%;
    box-sizing: border-box;
}

article h1,
article h2,
article h3 {
    max-width: var(--article-body-heading-max-width);
}

article ol,
article ul,
article p,
article small,
article blockquote {
    max-width: var(--article-body-text-max-width);
}

article h1 code,
article h2 code,
article h3 code {
    font-weight: 500;
    background-color: rgb(0, 0, 0, 0.075);
    line-height: inherit;
}

@media (prefers-color-scheme: dark) {
    article h1 code,
    article h2 code,
    article h3 code {
        background-color: rgb(255, 255, 255, 0.1);
    }
}

article > h1,
article > h2,
article > h3 {
    text-align: center;
}

article h1,
article h2 {
    font-family: var(--primary-font-family);
    letter-spacing: -0.025em;
}

article h1 {
    font-size: xx-large;
    margin-top: unset;
    margin-bottom: 0.5em;
}

article h2,
article h3 {
    margin-top: 2em;
    margin-bottom: 0;
    line-height: 1.1em;
}

@media (min-width: 900px) {
    article h1 {
        font-size: xxx-large;
    }
}

article h2 {
    font-size: x-large;
    color: var(--primary-heading-color);
    display: inline-block;
    max-width: var(--article-body-text-max-width);
}

@media (prefers-color-scheme: dark) {
    article h2 {
        color: var(--primary-heading-color-dark);
    }
}

article h3 {
    margin-bottom: 0;
    font-size: medium;
    color: rgb(96 96 96);
}

@media (prefers-color-scheme: dark) {
    article h3 {
        color: rgb(195 195 195);
    }
}

article header {
    max-width: var(--article-body-text-max-width);
}

article blockquote {
    box-sizing: border-box;
    color: rgb(134, 134, 134);
    font-size: xx-large;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: normal;
    padding: 2em;
    min-width: 100%;
    margin: 0;
    text-align: center;
}

article p {
    display: block;
    width: 100%;
}

article p img {
    display: inline-block;
    margin: unset;
}

article p img.inline-image {
    max-width: unset;
    width: unset;
    display: inline-block;
}

article .headline {
    align-self: center;
    font-size: larger;
    font-weight: 500;
    margin: 1em 0;
    max-width: 560px;
    color: var(--secondary-heading-color);
    text-align: center;
    letter-spacing: -0.05em;
}

@media (prefers-color-scheme: dark) {
    article .headline {
        color: var(--secondary-heading-color-dark);
    }
}

article .anchor {
    margin-top: 2rem;
    margin-bottom: 1rem;
    scroll-margin-top: 2em;
    display: block;
    border: unset;
    text-align: center;
    background-color: unset;
    max-width: var(--article-body-text-max-width);
}

article .anchor h2,
article .anchor h3,
article .anchor h4 {
    margin-top: unset;
}

article .anchor h2 {
    display: inline; /* so highlighter only shows behind characters */
    transition: background-color 300ms ease;
}

article .anchor h2:hover {
    background-color: var(--primary-highlight-color);
}

@media (prefers-color-scheme: dark) {
    article .anchor h2 {
        transition: color 300ms ease;
    }

    article .anchor h2:hover {
        color: var(--text-link-hover-color-dark);
        background-color: var(--text-link-hover-background-color-dark);
    }
}

article a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

article img,
article picture {
    max-width: 100%;
    display: block;
    margin: 1em auto;
    display: block;
    width: 100%;
}

article > img,
article > picture {
    width: 100%;
}

article picture img {
    margin-top: unset;
    margin-bottom: unset;
}

article figure {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 1em auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

article figure img {
    margin-top: unset;
    margin-bottom: unset;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 420px) {
    article figure img {
        padding: 1em 3em 0;
        background-color: rgb(0, 0, 0, 0.03);
        clip-path: inset(0 0 8px 0);
    }
}

@media (min-width: 600px) {
    article figure img {
        padding-left: 6em;
        padding-right: 6em;
        max-width: 600px;
    }
}

@media (prefers-color-scheme: dark) {
    article figure img {
        background-color: rgba(255, 255, 255, 0.05);
    }
}

article figure.no-background img {
    background: transparent;
    clip-path: unset;
    padding-left: unset;
    padding-right: unset;
    padding-top: 0;
    margin-left: unset;
    margin-right: unset;
}

@media (prefers-color-scheme: dark) {
    article figure.no-background img {
        border-bottom-color: rgb(41, 41, 41);
    }
}

article figure figcaption {
    font-size: smaller;
    color: #959595;
    font-style: italic;
    width: 100%;
    margin-top: 0.3em;
    text-align: center;
    max-width: 400px;
}

article .flowchart {
    svg {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
}

@media (prefers-color-scheme: dark) {
    article .flowchart svg {
        [fill='#F9F9F9'] {
            fill: var(--background-color-dark);
        }

        [fill='white'] {
            fill: var(--background-inset-color-dark);
        }

        [stroke='#D8E0E9'] {
            stroke: rgb(73 70 70);
        }

        g[filter] path:first-of-type {
            fill: var(--primary-text-color-dark);
        }
    }
}

article aside {
    padding: 0.5em 1em;
    border: 1px solid rgb(215, 215, 215);
    border-radius: var(--border-radius);
    background-color: rgb(244, 244, 244);
    color: rgb(134, 134, 134);
    margin: 1em 0;
    max-width: var(--article-body-text-max-width);
}

@media (prefers-color-scheme: dark) {
    article aside {
        color: rgb(166, 166, 166);
        background-color: rgb(32, 32, 32);
        border: 1px solid rgb(85, 85, 85);
    }
}

article table-of-contents {
    margin-top: 1em;
    align-self: center;
}

/* prevent FOUC */
article table-of-contents {
    transition: opacity 300ms ease;
    opacity: 0;
}

article table-of-contents:defined {
    opacity: 1;
}

article ul,
article ol {
    margin-right: 1em;
    padding: 0 0 0 1.5em;
    box-sizing: border-box;
    max-width: var(--article-body-text-max-width);
    width: 100%;
}

@media (min-width: 420px) {
    article ul,
    article ol {
        padding-left: 4em;
        margin-right: 3em;
    }
}

article ol li,
article ul li {
    margin: 0.15em 0;
    padding-left: 0.5em;
}

article ol li h3,
article ul li h3 {
    margin-top: unset;
    text-align: left;
    margin-bottom: 0.25em;
}

@media (prefers-color-scheme: dark) {
    article ol li h3,
    article ul li h3 {
        color: #aaa;
    }
}

article ol li p,
article ul li p {
    margin-top: 0;
}

article ol li code,
article ul li code {
    word-wrap: break-word;
}

article url-teaser {
    margin: 1.5em 0;
    max-width: var(--article-body-text-max-width);
    width: 100%;
}

/** Markdown files automatically places it in a p tag, which already has margin */
article p url-teaser {
    margin-top: unset;
    margin-bottom: unset;
}

.donation-reminder {
    font-size: var(--slightly-smaller-text-size);
    margin-top: 1em;
    margin-bottom: 1em;
}

/* CALLOUTS */

aside.callout {
    background-color: var(--code-background-color);
    border: 2px solid transparent;
    color: #7d7d7d;
    position: relative;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    color: var(--primary-text-color);
    line-height: 1.5em;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

@media (prefers-color-scheme: dark) {
    aside.callout {
        color: var(--secondary-text-color-dark);
        background-color: var(--code-background-color-dark);
    }
}

@media (prefers-color-scheme: dark) {
    aside.callout a:visited {
        color: #a488f6;
    }
}

@media (prefers-color-scheme: dark) {
    aside.callout code {
        background-color: rgb(255 255 255 / 10%);
    }
}

aside.callout strong {
    display: block;
    color: #7d7d7d;
}

@media (prefers-color-scheme: dark) {
    aside.callout strong {
        color: var(--primary-text-color-dark);
    }
}

aside.callout p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

aside.callout a {
    font-weight: unset;
}

aside.info.callout {
    border-color: #bed5f0;
    background-color: #e6f0fc;
    color: #4e6277;
}

@media (prefers-color-scheme: dark) {
    aside.info.callout {
        border-color: transparent;
        color: #dadada;
        background-color: #1b2735;
    }
}

@media (prefers-color-scheme: dark) {
    aside.info.callout a {
        color: rgb(156 204 255);
    }
}

aside.info.callout strong {
    color: #3773b4;
}

@media (prefers-color-scheme: dark) {
    aside.info.callout strong {
        color: rgb(82 146 215);
    }
}

aside.tip.callout {
    border-color: #bde5e8;
    background-color: #e7f3f4;
    color: #596c6d;
}

@media (prefers-color-scheme: dark) {
    aside.tip.callout {
        border-color: transparent;
        color: #dadada;
        background-color: #233232;
    }
}

aside.tip.callout strong {
    color: #11afb6;
}

@media (prefers-color-scheme: dark) {
    aside.tip.callout a {
        color: rgb(145 182 183);
    }
}

aside.warn.callout {
    border-color: #f3d7bb;
    background-color: #fdf1e5;
    color: #826549;
}

@media (prefers-color-scheme: dark) {
    aside.warn.callout {
        border-color: transparent;
        color: #dadada;
        background-color: #332a21;
    }
}

aside.warn.callout strong {
    color: #ec7500;
}

@media (prefers-color-scheme: dark) {
    aside.warn.callout strong {
        color: #e9973f;
    }
}

@media (prefers-color-scheme: dark) {
    aside.warn.callout a {
        color: rgb(209 175 139);
    }
}

aside.callout ul {
    padding-left: 2rem;
}