:root {
    --primary-color: hsl(219, 69%, 45%);
    --h1-color: hsl(219, 69%, 45%);
    --h2-color: hsl(219, 59%, 50%);
    --h3-color: hsl(219, 49%, 55%);
    --h4-color: hsl(219, 39%, 60%);
    --secondary-color: hsl(33, 100%, 88%);
    --text-color: hsl(0, 0%, 20%);
    --bg-color: hsl(0, 0%, 100%);
    --accent-color: hsl(248, 79%, 65%);
    --neutral-color: hsl(170, 15%, 50%);
    --highlight-color: hsl(348, 83%, 47%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: hsl(219, 49%, 65%);
        --h1-color: hsl(219, 49%, 65%);
        --h2-color: hsl(219, 39%, 70%);
        --h3-color: hsl(219, 29%, 75%);
        --h4-color: hsl(219, 19%, 80%);
        --secondary-color: hsl(33, 70%, 98%);
        --text-color: hsl(0, 0%, 80%);
        --bg-color: hsl(216deg 16% 10%);
        --accent-color: hsl(248, 49%, 75%);
        --neutral-color: hsl(170deg, 10%, 60%);
        --highlight-color: hsl(348, 53%, 57%);
    }
}

:root {
    /* https://modernfontstacks.com/ - Slab Serif stack */
    font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    color: var(--text-color);
    font-size: calc(1em + .1vw);
    background: var(--bg-color);
    word-break: break-word;
}

body {
    margin: 0;
}

a {
    color: var(--accent-color);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.1em;
}

a:visited {
    color: var(--neutral-color);
}

a:active {
    color: var(--highlight-color);
}

h1 {
    color: var(--h1-color);
}

h2 {
    color: var(--h2-color);
}

h3 {
    color: var(--h3-color);
}

h4, h5, h6 {
    color: var(--h4-color);
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 1em 0.5em;
}

li h2, li h3, li h4, li h5, li h6 {
    margin-block: 0;
}

h1 + *,
h2 + *,
h3 + *,
h4 + *,
h5 + *,
h6 + *  {
    margin-block-start: 0;
}

p {
    line-height: 1.4em;
}

li {
    line-height: 1.6em;
}

ol > li::marker {
    content: counters(list-item, '.') '. ';
}

ol h2,
ol h3,
ol h4
ol h5
ol h6 {
    margin-block-end: 0;
}

li::marker {
    color: var(--primary-color);
}

section + section {
    margin-block: 2em;
}

.monospace {
    /* https://modernfontstacks.com/ - Monospace Slab Serif stack */
    font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;
}

.center {
    max-inline-size: 60ch;
    margin-inline: auto;
    padding-inline: 1em;
}

#store-banner {
    box-sizing: border-box;
    background: lemonchiffon;
    text-align: center;
}

#store-banner p {
    padding-block: 1em;
}