/* grids, global containers, responsive structure */

/* Constrain main content, main content grows to fill space between header and footer */
main {
    max-width: 1200px;  /* content won't exceed 1200px */
    margin: 0 auto;      /* center horizontally */
    padding: 0 1rem;     /* optional padding for small screens */
    flex: 1;
}

/* Make the entire page take full height, make the whole page a vertical flex container */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

/* Main container holds header, main content, footer */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* full viewport height */
}