:root {
    --accent-color: #ec0047;
    --accent-color-light: #d0f1eb;
    --bg-color: #fafafa;
    --text-color: #222222;
    --text-color-light: #222222aa;
    --base-padding: 2rem;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
}

body {
    width: 100%;
    font: 400 1.25rem/1.6 'Source Serif 4', serif;
    color: var(--text-color);
    background-color: var(--bg-color);
}

h1 {
    margin: 1.5rem auto;
    font: 400 2.25rem/1.25 'Source Serif 4', serif;

    &:before {
        content: "";
    }
}

h2 {
    margin-bottom: 1rem;
    font: 400 1.75rem/1.6 'Source Serif 4', serif;
}

@media (max-width: 38rem) {
    :root {
        --base-padding: 1.5rem;
    }

    body {
        font: 400 1.125rem/1.6 'Source Serif 4', serif;
    }

    h1 {
        font: 400 2.0rem/1.25 'Source Serif 4', serif;
    }

    h2 {
        font: 400 1.5rem/1.6 'Source Serif 4', serif;
    }
}

@media (max-width: 30rem) {
    :root {
        --base-padding: 1.25rem;
    }

    body {
        font: 400 1.0rem/1.6 'Source Serif 4', serif;
    }

    h1 {
        font: 400 1.75rem/1.25 'Source Serif 4', serif;
    }

    h2 {
        font: 400 1.25rem/1.6 'Source Serif 4', serif;
    }
}

b {
    white-space: nowrap;
}

a {
    color: inherit;
    white-space: nowrap;

    &:hover {
        color: var(--accent-color);
    }
}

p {
    margin-bottom: 1em;
    text-wrap: pretty;
}

.next {
    display: block;
    padding: 1.25rem;
    width: 100%;

    text-align: center;
    font: 400 1.0rem/1.75 'Source Sans 3', sans-serif;
    letter-spacing: 0.025em;
    color: #222222aa;

    &:hover {
        background-color: #dfdfdf88;
    }
}

header,
section,
footer {
    width: 100%;
    max-width: calc(60ch + var(--base-padding) * 2);
    padding: 0 var(--base-padding);
}

header {
    margin: 3rem auto;

    nav {
        font: 400 0.875rem/1.6 'Source Sans 3', sans-serif;
        letter-spacing: 0.025em;
        color: #222222aa;

        a {
            padding: 0 0.25rem;
            margin: 0 -0.25rem;
        }
    }
}

section {
    margin: 3rem auto;

    counter-reset: paragraph-counter;

    /* paragraph number
    p {
        margin-bottom: 1em;
    }

    p {
        counter-increment: paragraph-counter;
        position: relative;
    }

    p::before {
        content: counter(paragraph-counter);

        position: absolute;

        left: 100%;
        bottom: 0%;
        margin-left: 0.25rem;
        padding-left: 0.25rem;
        margin-bottom: 0.25rem;
        border-left: 1px solid #22222240;
        width: 1.5rem;

        font: 400 0.875rem/1.25 'Source Sans 3', sans-serif;
        color: #22222240;
    }*/
}

footer {
    margin: 4rem auto 6rem;

    p {
        font: 400 0.875rem/1.6 'Source Sans 3', sans-serif;
        color: #222222aa;
    }
}