:root {
    --fg-colour-100: rgb(2, 2, 10);
    --fg-colour-500: rgb(10, 10, 60);
    --fg-colour-700: rgb(100, 100, 100);

    --bg-colour-500: rgb(250, 247, 240);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-colour-500);
    color: var(--fg-colour-500);

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

main {
    --gaps: 2rem;

    width: 90%;
    max-width: 50em;
    text-align: justify;

    display: grid;
    gap: 1em;

    margin-top: 5em;
    margin-inline: auto;

    display: grid;
    gap: var(--gaps);

    counter-reset: sections; 
    .section {
        display: grid;
        gap: calc(var(--gaps) / 2);

        &::after {
            content: '----';
            text-align: center;
            padding: var(--gaps);
        }

        h1::before {
            counter-increment: sections;
            content: counter(sections) " ";
            color: var(--fg-colour-700);
        }
    }
    h1, h2, h3 {
        text-align: center;
        margin-block: var(--gaps);
    }
}

p {
    font-size: medium;
}