/* useful links style */

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
a {
    text-decoration: none;
    text-decoration-color: none;
}
a:link {color: black;}      /* unvisited link */
a:visited {color: black;}   /* visited link */
a:hover {color: black;}     /* mouse over link */
a:active {color: black;} 

li {
    margin: 5px 0;
    text-align: left;
}

p {
    font-size: 16px;
}

.container {
    display:grid;
    grid-template-areas: 
        'masthead masthead masthead'
        'nav linkcontainer linkcontainer'
        'footer footer footer';
    max-width:100%;
    margin:10px;
}
/* --------------------------- body content*/

.masthead {
    grid-area: masthead;
    background-color: black;
}

.nav {
    grid-area: nav;
    display: grid;
    grid-template-areas:
        'tab1a'
        'tab1'
        'tab2'
        'tab3'
        'tab4';
    max-height:600px;
    color:black;
    margin-top:10px;
}

.nav div {
    text-align:center;
    width:100px;
    height:100px;
}

.linkcontainer {
    grid-area: linkcontainer;
    min-height: 600px;
    display:grid;
    grid-template-areas:
        'banner banner banner banner'
        'L1 L2 L3 L4'
        'L5 L6 L7 L8'
        'L9 L10 L11 L12';
    margin: 2em;
    
}


.footer {
    grid-area: footer;
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer div{
    width: 200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* --------------nav------------------------- */
.tab1a, .tab1, .tab2, .tab3, .tab4 {
    box-shadow: 0px 0px 20px 2px;
    grid-area:tab1;
    transition:.1s;
    background:rgb(46, 177, 46);
    font-weight:bolder;
    border-radius:20%;
}

.tab1a {
    grid-area:tab1a;
}

.tab1 {
    grid-area:tab1;
}

.tab2 {
    grid-area:tab2;
}

.tab3 {
    grid-area:tab3;
}

.tab4 {
    grid-area:tab4;
}

.tab1a:hover, .tab1:hover, .tab2:hover, .tab3:hover, .tab4:hover{
    
    height:140px;
    background:lightgreen;
}

/* -------------------------- mapcontainer content----------*/
.banner {
    text-align: center;
    grid-area: banner;
}

.L1, .L2, .L3, .L4, .L5, .L6, .L7, .L8, .L9, .L10, .L11, .L12 {
        margin: 2em;
        grid-gap:2em;
        text-align:center;
}

.L1:hover, .L2:hover, .L3:hover, .L4:hover, .L5:hover, 
.L6:hover, .L7:hover, .L8:hover, .L9:hover, 
.L10:hover, .L11:hover, .L12:hover {
    background-color: lightslategray;
    transition: .1s;
    
}


/* footer elements -----------------*/

#fcol1 {
    grid-gap:1em;
}

#fcol2 {
    grid-gap:1em;
}

#fcol3 {
    grid-gap:1em;
}


/* Media Queries-----------------------------*/

@media only screen and (max-width:1400px){
    .linkcontainer {
        grid-area: linkcontainer;
        margin: 0;
        display:grid;
        grid-template-areas:
            'banner banner'
            'L1 L2'
            'L3 L4'
            'L5 L6'
            'L7 L8'
            'L9 L10'
            'L11 L12';
        
    }

    .L1, .L2, .L3, .L4, .L5, .L6, .L7, .L8, .L9, .L10, .L11, .L12 {
        margin: 0;
        grid-gap: 0;
        padding:0;
    }
}

   
@media only screen and (max-width:950px){
    .container {
        grid-template-areas: 
        'masthead'
        'nav'
        'linkcontainer'
        'footer';
        grid-gap:.5em;
    }
    .linkcontainer {
        grid-template-areas:
        'banner'
        'L1'
        'L2'
        'L3'
        'L4'
        'L5'
        'L6'
        'L7'
        'L8'
        'L9'
        'L10'
        'L11'
        'L12';
        grid-gap:2em;
    }

    .nav {
        grid-template-areas:
        'tab1a tab1 tab2 tab3 tab4';
        grid-gap:1em;
        margin:0 auto;
    }

    .mapcontainer {
        min-width: 500px;
        margin: none;
    }

    .nav div {
        width:50px;
        height:50px;
        font-size: 10px;
    }
   
    .tab1a:hover, .tab1:hover, .tab2:hover, .tab3:hover, .tab4:hover{
        height:50px;
    }

    .masthead img{
        width:400px;
    }

    .footer {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: none;
        text-align:left;
    }

    img {
        max-width: 100%;
    } 
}