/*base page body styling*/
body {
    background-color: #00a2ff;
    min-height:auto;
    }

/*default styling for all elements in div "wrapper"*/
#wrapper {
    margin: 0 auto;
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 250px 60px minmax(800px, auto) minmax(250px, auto);
}

/*default paragraph text color*/

h1{
    font-size: 2vw;

}
h2{
    font-size: clamp(1rem, -0.875rem + 5.333333vw, 2rem);
}
p {
    color: #000080;
    font-size: 1vw;
}

/* header foundation styling*/
header {
    grid-area: header;
    grid-template-columns: 3fr 3fr 2fr;
    background-color: #ff5d00;
    /*header sub grid breakdown*/
    display: grid;
    grid-template-areas: "text logo company";
    margin: 10px;
}

    /*styling for header main left*/
#hml {
    
    grid-area: text;
    text-align: left;
    margin: 10px;
    max-height: 200px;
    justify-content: center;
}

    #hml h1, #hml h2, #hml p {
        margin: 0;
    }

    #hml h1 {
        font-size: clamp(1rem, 4vw, 3rem);
    }

    #hml h2 {
        font-size: clamp(0.75rem, 2vw, 2rem);
    }

    #hml p {
        font-size: clamp(0.5rem, 1vw, 1.2rem);
    }


/*stlying for header main image*/
    header img {
        grid-area: logo;
        margin: 10px;
        width: auto;
        max-height: 200px;
           
    }


}

    /*styling for header main right*/
#mhr {
    grid-area: company;
    text-align: center;
    margin: 10px;
}

#header article1 p {
    grid-area: company;
    text-align: center;
    font-size: 1em;
}
  
/* nav region styling*/
nav {
    grid-area: nav;
    background-color: #dddddd;
    margin:10px;
    list-style: none;
    
}

/* nav bar styling - create list and formatting*/
    nav ul {
        font-family: sans-serif;
        font-weight:900;
        text-size-adjust:auto;
        display: flex;
        justify-content: space-evenly;
        align-items:center;
           }
    
    
    /*create sub item within Nav*/
    nav a {
        text-decoration: none;
        display: block;      
        
    }

    /*specify action on hover for sub item "nav a"*/
        nav a:hover {
            color: gold;
            background: #7C10D0;
        }

/*main region styling*/
main {
    grid-area: main;
    /*mainsub grid breakdown*/
    display: grid;
    grid-template-areas: "mml mmc mrc";
    grid-template-columns: 2fr 3fr 1fr;
    grid-template-rows: 1fr;
    gap: 1em; /* space between containers*/
    padding: 1em; /* space between content and container border*/
    margin: 10px; /*space between main sections*/
}

/* on small screens: stack vertically */
@media screen and (max-width: 768px) {
    main {
        grid-template-areas:
            "mml"
            "mmc"
            "mrc";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
}

    /*main body left container*/
#mml {
    grid-area: mml;
    padding-right: 5em;
}
    #mml h1 {
        font-size: clamp(1rem, 3vw, 5rem);
    }


    /*main body right container*/
    #mrc {
        grid-area: mrc;
        background-image: url("../images/bground.jpg");
        background-repeat: no-repeat;
        background-blend-mode: color-burn;
        background-position: center;
        background-size: contain;
        min-height: 400px; /* to keep visible */
    }

    /*fun easter egg media query
    image from quickmeme.com*/
    /* Background change on medium screens (below 1000px) */
    @media screen and (max-width: 768px) {
        #mrc {
            background-image: url("../eggs/Lemons.png");
        }
    }

    /* Base layout for mmc */
    #mmc {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        align-items: center;
        padding: 10px;
    }


    /* Scale down images on medium screens */
    @media screen and (max-width: 1000px) {
        #mmc img {
            width: 45%; /* Two per row */
        }
    }


    /* footer region styling*/
    footer {
        grid-area: footer;
        margin: 10px;
        /*footer grid breakdown*/
        display: grid;
        grid-template-areas: "textfl textfr";
        grid-template-columns: 2fr 3fr;
        grid-template-rows: 1fr;
        gap: 1em;
        padding: 1em;
    }

    /* footer left containter styling*/
    #flc {
        grid-area: textfl;
        background-color: lightpink;
        margin-bottom: 24px;
    }
    /* footer right containter styling*/
    #frc {
        grid-area: textfr;
        background-color: yellow;
        margin-bottom: 24px;
    }


    /*testing image sourced from https://www.deviantart.com/eefi/art/Portal-Level-Warning-Signs-187673858 */
    /*images referenced to or from the game Portal developed by Valve Studios or fan made open domain works derived from the afore mentioned game and franchise.*/