/* =============================================================================
   layout.css — Page-level layout containers
   =============================================================================
   Requires: color-pallette.css, base.css.

   Provides centred wrapper, page header, page footer.
   Site navigation (sidebar / topbar) is handled by the Menu library.
   ============================================================================= */

body { background-color: var(--site-bg); }
header { 
    color: var(--header-text-color);
    text-align: center; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);

     /*background: rgba(241, 2, 2, 0.8); /* semi-transparent for "scroll under" effect */

    z-index: 1000; /* ensures it stays on top */
}
.wrapper { /*background-color: #000055;*/ margin: 20px; padding-top: 50px; }

main { background-color: var(--main-section-color-bg); }

footer { 
    background-color: var(--footer-color-bg); 
    color: var(--footer-color-text); 

    margin-top:  2.5rem;
    padding-top: 1rem;
    font-size:   0.8125rem;
    text-align:  center;
    margin-left: var(--sidenav-width);
}