/* https://piccalil.li/tutorial/improve-the-readability-of-the-content-on-your-website/ */
:root {
    --size-300: 0.75rem;
    --size-400: 1rem;
    --size-500: 1.33rem;
    --size-600: 1.77rem;
    --size-700: 2.36rem;
    --size-800: 3.15rem;
    --size-900: 4.2rem;

    --flow-space: var(--size-700);

    width: 90vw;
    width: clamp(16rem, 90vw, 70rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    
}

body {
    font-size: 0.8rem;
    background: #f4f4ef;
    line-height: 1.5;
    
    font-family: Georgia, serif;
    margin-top: 0;
    padding: 2rem 0;
}

header {
    color: #fff;
    padding: 0.1em 5em;
    background-color: #00458a;
    border-radius: 0.5em;
    margin-top: 0;
}

.boxy {
    display: inline-block;
    text-decoration: none;
    background-color: #a0d5fa;
    color: #000;
    padding: 0 0.5em;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 0.3em;
}

h1,
h2,
h3,
h4 {
    font-family: roboto, sans-serif;
    line-height: 1.3;
}

h1,
h2 {
    font-weight: 900;
}

h1 {
    font-size: var(--size-700);
}

h2 {
    font-size: var(--size-600);
}

h3 {
    font-size: var(--size-600);
}
p {
    max-width: 50ch;
}

h1,
h2,
h3 {
    max-width: 25ch;
}

/*
:is(h2, h3) {
    --flow-space: var(--size-900);
}

:is(h2, h3) + * {
    --flow-space: var(--size-400);
}


.flow > * + * {
    margin-top: var(--flow-space, 1em);
} */

.indented {
    text-indent: 1em;
}

div > p {
    margin-top: 0;
}