/* Styling to control page layout */
body {
    /* header/main/footer should extend to page edges */
    margin: 0;
    /* use columnar flex layout to have main section expand to fill space. */
    display: flex;
    flex-direction: column;
    /* the page should be at least as tall as the viewport (so the footer is at the bottom */
    min-height: 100vh;
}

main {
    /* only main has flex-grow specified. header and footer will be sized
     * based on their content, and main will grow to the size needed if the
     * page content is too short.
     */
    flex: 1;
}

header, main, footer {
    /* all elements have padding added to make up for the 0 margin. */
    padding: 1rem;
}

/* Styling to make the page look "nice". */
:root {
    --theme-dark-1: #091026;
    --theme-dark-2: #0f1f40;
    --theme-accent-1: #d99152;
}