.markdown {

    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-top: 1.5em;
        margin-bottom: .5em;
        text-wrap: pretty;
    }

    h1 {
        font-size: 20pt;
    }

    h2 {
        font-size: 18pt;
    }

    table {

        margin: var(--gap-big) 0;

        border-radius: var(--border-radius);
        background: var(--color-base-faintest-2);

        td,
        th:not(:empty) {
            padding: var(--base-gap);
            vertical-align: top;
        }

        tr:not(:first-child) > td {
            border-top: solid #fff 2px;
        }

    }

    blockquote {
        padding: var(--gap-big);
        border-radius: var(--border-radius);
        box-shadow: 0 7px 15px hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness), 15%);
        border: solid hsla(var(--color-primary-hue), var(--color-primary-saturation), 96%) 1px;
        > p {
            margin: 0;
        }
    }

    ul {
        margin-top: 2em;
        margin-bottom: 2em;
        padding-left: 0;
        margin-left: 20px;

        @media all and (max-width: 600px) {
            margin-left: 0;
        }

        > li {
            position: relative;
            list-style:none;
            margin-left: var(--gap-big);

            &:before {
                position: absolute;
                top: 1px;
                right: calc(100% + var(--base-gap));
                mask-image: url("../icons/arrow-ol3XMiw.svg");
                mask-size: var(--icon-size);
                width: var(--icon-size);
                height: var(--icon-size);
                content: '';
                background-color: currentColor;
                margin-top: 1px;
            }

            /* Moves the arrow down if the first child is an h2 to make it land vertically in the middle of the h */
            &:first-child:has(h2):before {
                top: 5px;
            }

            &:not(:last-child) {
                margin-bottom: 1em;
            }
        }
    }

    ol {
        margin-top: 2em;
        margin-bottom: 2em;
        padding-left: 0;

        margin-left: 20px;

        list-style: none;
        counter-reset: item;


        > li {
            counter-increment: item;
            position: relative;
            padding-left: 45px;

            &:before {
                border: solid var(--color-base-fainter) 1px;
                color: var(--color-base-fainter);

                line-height: 1em;
                font-weight: 200;
                font-size: var(--font-size-big);
                padding: 8px;
                border-radius: 50px;
                min-width: 1em;
                text-align: center;

                content: counter(item);
                position: absolute;
                left: 0;
                top: -5px;
            }


            &:not(:last-child) {
                margin-bottom: 1em;
            }
        }
    }

    hr {
        width: 0;
        height: var(--gap-big);
        border: none;
        border-left: solid currentColor 1px;
    }
}