/*
    Base.css

    Defines the overall structure of the page
        header
        main
        footer

    With the footer always appearing at the bottom of the viewport unless 
    the height of the main section is greater than the viewport height.
*/

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    flex: 0 1 auto;
    padding-top: 1em;
}

header > h1, header > h2 {
    width: fit-content;
    margin-inline: auto;
    
}

main {
    flex: 1 0 auto;
}

footer {
    flex: 0 1 auto;
    width: 100%;
}