/* layout.css - page structure, reuse on every site */

:root {
    --gutter: 8em;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 2em var(--gutter);
}

main {
    flex: 1;
    padding: 0 var(--gutter);
}

footer {
    padding: 2em var(--gutter);
}

section, article {
    margin: 50px 0;
    padding: 1em;
}

p {
    padding: 1em;
}


@media (max-width: 700px) {
    :root {
        --gutter: 1em;
    }
}