/* global config*/ 

body{
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;

    grid-template-areas: 
    "header header header"
    "section section section"
    "footer footer footer";
}
header{
    grid-area: header;
    display: grid;

    grid-template-columns: repeat(3,1fr);
    grid-template-rows: auto;

    grid-template-areas: 
    "nav nav logo"
}

section{
    grid-area: section;
}

footer{
    grid-area:footer;
}

#mobile{
    display: none; /*hides the menu*/
}

nav{
    grid-area: nav;
}

/*next would be tablet*/ 


/* mobile media*/
@media only screen and (max-width:600px){
    body{
        width: 100%;
    
        display: grid;
    
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: auto;
    
        grid-template-areas: 
        
        "section"
        "footer"
        "header";
    }

    header{
        grid-area: header;
        display: grid;
    
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: auto;
    
        grid-template-areas: 
        "nav logo"
    }

    #logo{
        display: none; /*hides the logo*/
    }

    #desktop{
        display: none; /*hides the main menu*/
    }

    #mobile{
        display: inline; /*displays the menu*/

        position: absolute;
        bottom: 10px; /*position the menu at the bottom of the page*/
    }
    
}

p{
    font-size: 3vw;
}

h1{
    font-size: 4vw;
}



/*gallary on home page*/