/* ensure that the entire viewport is used, so that the footer can float at the bottom of the screen */
body,
html {
    height: 100%;
}

/* all text should use the Open Sans font from Google Fonts */
body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/* eliminate the default screen gutter in browsers */
body,
html {
    margin: 0px;
}





/* the "page" div exists to float the footer to the bottom of the screen */
div#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* allow the main content to grow as needed to float the footer to the bottom of the screen */
main {
    flex-grow: 1;
}





/* the main content should have extra spacing */
main {
    padding-bottom: 1em;
    padding-top: 1em;
}





/* container divs should have gutters */
.container {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* container divs should have empty space on the sides on wide screens */
@media (min-width: 1000px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}

/* container divs should only be so large on wide screens */
@media (min-width: 1000px) {
    .container {
        width: var(--medium-container);
    }
}
@media (min-width: 1200px) {
    .container {
        width: var(--large-container);
    }
}