painted-content {
    isolation: isolate;
    font-size: 1rem;
    --top-margin: calc(var(--header-height) * 0.6);

    @media screen and (max-width: 1100px) {
        font-size: 6mm;
    }

    a {
        color: var(--saturated-orange);
        text-decoration: underline;
    }

    p {
        text-align: justify;
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: 1rem;
    }

    table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
            padding: 0 1rem;
        }

        th:not(:first-child),
        td:not(:first-child) {
            border-left: 1px solid var(--light-green);
        }

        th {
            border-bottom: 1px solid var(--dark-green);
        }

        td {
            border-top: 1px solid var(--light-green);
        }
    }

    code {
        background-color: #ffffff60;
        padding-inline: 0.2rem;
        border-radius: 0.2rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0;
        position: sticky;
        top: var(--this-top);
        scroll-margin-top: var(--this-top);
        font-weight: bold;
        --background-colour: var(--pale-green);
        --this-top: calc(var(--top-margin) + var(--top-internal-margin));

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            box-shadow:
                0 -20px 0 0 var(--background-colour),
                0 -80px 0 0 var(--background-colour);
            background: var(--background);
            /* background: red; */
            /* transition: opacity 0.1s ease-in-out; */
        }

        &:not(.sticky)::before {
            opacity: 0;
        }
    }

    h1 {
        z-index: 5;
        font-size: 2em;
        --top-internal-margin: 0.1em;
        --background: linear-gradient(to bottom, var(--background-colour) 80%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 1.7em;
        }
    }

    h2 {
        z-index: 4;
        --top-internal-margin: 1.8em;
        --background: linear-gradient(to bottom, var(--background-colour) 90%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 3.9em;
        }
    }

    h3 {
        z-index: 3;
        --top-internal-margin: 4em;
        --background: linear-gradient(to bottom, var(--background-colour) 95%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 6.7em;
        }
    }

    h4 {
        z-index: 2;
        --top-internal-margin: 6.5em;
        --background: linear-gradient(to bottom, var(--background-colour) 95%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 9.3em;
        }
    }

    h5 {
        z-index: 1;
        --top-internal-margin: 9.5em;
        --background: linear-gradient(to bottom, var(--background-colour) 95%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 12.8em;
        }
    }

    h6 {
        z-index: 0;
        --top-internal-margin: 13.5em;
        --background: linear-gradient(to bottom, var(--background-colour) 95%, transparent 100%);

        @media screen and (max-width: 1100px) {
            --top-internal-margin: 17.7em;
        }
    }

    blockquote {
        --blockquote-background: var(--light-green);
        margin: 1rem 0 2rem;
        padding: 0.5rem 1rem;
        background: var(--blockquote-background);
        border-radius: 1rem 0 1rem 0;
        border-style: solid;
        border-color: var(--dark-green);
        border-width: 3px 0 0 3px;

        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6 {
            --background-colour: var(--blockquote-background);
        }
    }
}