main {
    & h2 {
        font-size: 1.5em;

        margin-block: var(--margin-md) var(--margin-sm);
    }

    & h3 {
        font-size: 1.3em;
        margin-block: var(--margin-md) var(--margin-xs);
    }

    & h4 {
        font-size: 1.2em;
        margin-block: var(--margin-md) var(--margin-xs);
    }

    & h5 {
        font-size: 1.1em;
        margin-block: var(--margin-md) var(--margin-xs);
    }


    & p, & li {
        margin-block: 1em;
    }


    & .checklist li {
        padding-inline-start: 5ch;

        &::before {
            content: '✅';
        }
    }

    /* Spacing between consecutive lists */

    & ul + ul {
        margin-block-start: var(--margin-lg);
    }

    a {
        color: var(--color-primary);
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;

        &.navigation-back, &.navigation-forward {
            margin-block-start: var(--margin-lg);

            &::before, &::after {
                text-decoration: none;
                display: inline-block; /* Needed to disable text decoration for pseudo-element only */
            }
        }

        &.navigation-back {
            float: left;

            &::before {
                margin-inline-end: var(--margin-xs);
                content: '<';
            }
        }

        &.navigation-forward {
            float: right;

            &::after {

                margin-inline-start: var(--margin-xs);
                content: '>';
            }

        }
    }

    & dialog {
        outline: none;
        border: 1px solid var(--color-muted);
        border-radius: var(--border-radius);
        padding-block: var(--margin-sm) var(--margin-md);
        padding-inline: var(--margin-xl);

        --margin-dialog: var(--margin-xxl);

        /* Cannot overwrite "margin: auto" to add margin - that would destroy centering */
        max-width: calc(100% - 2 * var(--margin-dialog));

        &[open] {
            animation: fade-in 500ms linear forwards;
        }

        &::backdrop {
            background: rgba(0, 0, 0, 0.3);
        }

        &::before {
            content: '✕';
            display: block;
            text-align: right;
            cursor: pointer;
            color: var(--color-muted);
        }
    }

    /* Remove top margin from all first elements (primarily headings) */

    & .content > *:first-child, & dialog > *:first-child {
        margin-block-start: 0;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100 % {
        opacity: 1;
    }
}

@media screen and (max-width: 1000px) {
    main {
        dialog {
            padding-inline: var(--margin-md);
            --margin-dialog: var(--margin-xl);
        }
    }
}