/*this is the main grid*/

#mainGrid  {

    display: grid;
    gap: 1px;
    height: 250vh;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 4fr 0.5fr;
    grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer"
}


header  {
    grid-area: header;
    margin: 0 0 10px 0;
    box-shadow: 0 0 20px gray;
    background-color: #ffd500;
}


main  {
    grid-area: main;
    margin: 0px 0px 10px 0px ;
}

footer  {
    background-color: #ffd500;
    grid-area: footer;
}





/*This is the Main Header Grid and all things in it*/
#main-header  {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.25fr 0.5fr 2fr;
    grid-template-areas:
        "top top top"
        "nav nav nav"
        "main main main"
}

#main-header .top  {
    background-color: #221a99;
    color: white;
    grid-area: top;
    text-align: center;
    align-content: center;
}

#main-header .nav  {
    background-color: white;
    grid-area: nav;
    align-content: center;
    text-align: center;
}

#main-header .main  {
    grid-area: main;
    text-align: center;
    align-content: center;
    font-size: 50px;
    padding: 20px;
}









/*this is the 2nd mainGrid*/

#mainGrid2  {

    display: grid;
    gap: 1px;
    height: 250vh;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 4fr 0.5fr;
    grid-template-areas:
        "header header header"
        "main main main"
        "footer footer footer"
}

/*This is the 2nd Main Header Grid and all things in it*/
#main-header2  {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 0.25fr 0.5fr 2fr;
    grid-template-areas:
        "top top top"
        "nav nav nav"
        "main main main"
}

#main-header2 .top2  {
    background-color: #221a99;
    color: white;
    grid-area: top;
    text-align: center;
    align-content: center;
}

#main-header2 .nav2  {
    background-color: white;
    grid-area: nav;
    align-content: center;
    text-align: center;
}

#main-header2 .main2  {
    grid-area: main;
    text-align: center;
    align-content: center;
    font-size: 25px;
    padding: 20px;

}