/*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-image: linear-gradient(45deg, #0499af, #74c429);
}


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

footer  {
    background-image: linear-gradient(45deg, #0499af, #74c429);
    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 1.5fr 1fr;
    grid-template-areas:
        "top top top"
        "nav nav nav"
        "main main main"
        "search search search"
}

#main-header .top  {
    background-color: #0499af;
    grid-area: top;
}

#main-header .nav  {
    background-color: white;
    grid-area: nav;
}

#main-header .main  {
    grid-area: main;

}

#main-header .search  {
    grid-area: search;
}





/*This is the Main Product Grid and all things in it - products, etc*/
#main-products  {
    display: grid;
    height: 100%;
    width: 95%;
    grid-gap: 10px;
    margin: auto;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.75fr 1.5fr 1.5fr 1.5fr 0.75fr;
    grid-template-areas:
        "main-title main-title main-title main-title main-title"
        "products1 products1 products1 products1 products1"
        "products2 products2 products2 products2 products2"
        "products3 products3 products3 products3 products3"
        "more more more more more"
}

#main-products .main-title  {
    grid-area: main-title;
}

#main-products .products1  {
    grid-area: products1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle productTitle productTitle productTitle productTitle"
       "singleGrid singleGrid singleGrid singleGrid singleGrid"
}

#main-products .products2  {
    grid-area: products2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle2 productTitle2 productTitle2 productTitle2 productTitle2"
       "singleGrid2 singleGrid2 singleGrid2 singleGrid2 singleGrid2"
}

#main-products .products3  {
    grid-area: products3;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.5fr 2fr;
    grid-template-areas:
       "productTitle3 productTitle3 productTitle3 productTitle3 productTitle3"
       "singleGrid3 singleGrid3 singleGrid3 singleGrid3 singleGrid3"
}

#main-products .more  {
    grid-area: more;
}





/*This is the Main Footer Grid and all things in it - subscribe, blog, about us, etc*/
#main-footer  {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 0.5fr;
    grid-template-areas:
        "subscribe subscribe subscribe"
        "paperwork paperwork paperwork"
}

#main-footer .subscribe  {
    grid-area: subscribe;
}

#main-footer .paperwork  {
    grid-area: paperwork;
    background-color: #0499af;
}










.productTitle  {
    grid-area: productTitle;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid {
    grid-area: singleGrid;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid .single1  {
    grid-area: single1;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid .single2  {
    grid-area: single2;
    background-color: pink;
    height: auto;
}

#singleGrid .single3  {
    grid-area: single3;
    background-color: white;
    height: auto;
}

#singleGrid .single4  {
    grid-area: single4;
    background-color: white;
    height: auto;
}

#singleGrid .single5  {
    grid-area: single5;
    background-color: white;
    height: auto;
}











.productTitle2  {
    grid-area: productTitle2;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid2 {
    grid-area: singleGrid2;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid2 .single1  {
    grid-area: single1;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid2 .single2  {
    grid-area: single2;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid2 .single3  {
    grid-area: single3;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid2 .single4  {
    grid-area: single4;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid2 .single5  {
    grid-area: single5;
    background-color: #D3D3D3;
    height: auto;
    box-shadow: 0 0 20px gray;
}












.productTitle3  {
    grid-area: productTitle3;
}


/*This is the productgrid and all things in it - products, etc*/
#singleGrid3 {
    grid-area: singleGrid3;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(5, 18%);
    grid-template-rows: 100%;
    grid-template-areas:
        "single1 single2 single3 single4 single5"
}

#singleGrid3 .single1  {
    grid-area: single1;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid3 .single2  {
    grid-area: single2;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid3 .single3  {
    grid-area: single3;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid3 .single4  {
    grid-area: single4;
    height: auto;
    box-shadow: 0 0 20px gray;
}

#singleGrid3 .single5  {
    grid-area: single5;
    background-color: #D3D3D3;
    height: auto;
    box-shadow: 0 0 20px gray;
}