html {
/* The html tag wraps the entire page. */
    /* Change this value to any color you want */
    --hilite: #8D3FC5;
}

/*                    == DEFAULT SITE ==
 * Below represents basically a single-column stacked website.
 * It will load on any device that supports CSS. It uses a grid layout, of a
 * single column stack. This is essentially the mobile version of the site,
 * hiding the navigation menu into a "hamburger" menu. It will display until the
 * screen is a specific width, at which point the values will be over-written by
 * rules further down the page.
*/ 

body {
/* Websites have a head and a body.
 * The head is full of metadata. The body has the visible website data.
*/
}

.grid {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "head"
        "main"
        "foot";
}

header {
/* Header                           
 * Top of the visible website       
 *                                  
 * Generally has a logo, contact information, and a navigation menu.
*/
    grid-area: head;
    background-color: blue;
    border: 2px solid blue;
}

footer {
/* Footer
 * Bottom of the visible website
 *
 * Generally has contact info, a site-map, and some maker links.
*/
    grid-area: foot;
    background-color: green;
    border: 2px solid green;
}

main {
/* Main
 * The main content of the visible website.
*/
    grid-area: main;
    background-color: red;
    border: 2px solid red;
}

nav {
/* Nav
 * The navigation menu
 *
 * Generally included near the header, and often heavily styled for responsivness.
*/
}

/*                    == Tablet Landscape ==
 * This media query will apply on viewports of at least 1024px wide. This
 * applies generally to tablets in landscape orientation, and screens larger
 * than it. This is essentially the desktop version of the site.
*/
@media only screen and (min-width: 1024px) {
    .grid{
        display: grid;
        grid-template-columns: repeat(9, minmax(0,1fr));
        grid-template-rows: auto;
        grid-template-areas:
            "head head head head head head head head head"
            "main main main main main main main main main"
            "foot foot foot foot foot foot foot foot foot"
    }

    header {}
    footer {}
    nav {}
    main {}
}

/*                    == Ultrawide ==
 * This media query is for ultrawide monitors and displays. It is optional,
 * though can be used to add gutters or modify content sizing to make reading
 * easier.
*/
@media only screen and (min-width: 2048px) {
    .grid{
        display: grid;
        grid-template-columns: repeat(9, minmax(0,1fr));
        grid-template-rows: auto;
        grid-template-areas:
            "head head head head head head head head head"
            "main main main main main main main main main"
            "foot foot foot foot foot foot foot foot foot"
    }

    header {
      background-color: lightblue;
      border-color: lightblue;
    }
    footer {
      background-color: lightgreen;
      border-color: lightgreen;
    }
    nav {}
    main {
      background-color: orange;
      border-color: orange;
    }
}