/* club activities 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 masthead'
        'nav linkcontainer linkcontainer linkcontainer'
        'footer footer footer footer';
    max-width:100%;
    margin:10px;

        /* I DID NOT CHANGE THE NAME IS THE HTML AND CSS
         FOR LINKCONTAINER-- do not confuse. it is what holds the 
         main content of this page.*/
}
/* --------------------------- 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;
    max-width:1100px;
    display:grid;
    grid-template-areas:
        'banner banner banner'
        'L1 L1 L2'
        'L3 L4 L4'
        'L5 L6 L6';
    margin: 2em;
    grid-gap: 2em;
}

.linkcontainer img {
    margin-left: auto;
    margin-right: auto;
    display:block;
    max-width: 60%;
    margin-top: 20px;
    box-shadow: 0px 0px 20px 2px;
}


.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 {
        /*max-width: 50px;*/
      
        text-align:center;
}

.L1 {
    grid-area: L1;
    text-align: right;
}

.L2 {
    grid-area: L2;
    
}

.L3 {
    grid-area: L3;

}

.L4 {
    grid-area: L4;
    text-align: left;
    
}

.L5 {
    grid-area: L5;
    text-align: right;
}

.L6 {
    grid-area: L6;
}

.L6 img{
    max-width:100%;
}

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

#fcol1 {
    grid-gap:1em;
}

#fcol2 {
    grid-gap:1em;
}

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

@media only screen and (max-width:950px){
    .container {
        grid-template-areas: 
        'masthead'
        'nav'
        'linkcontainer'
        'footer';
        grid-gap:.5em;
    }

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

    
.linkcontainer {
    grid-area: linkcontainer;
    min-height: none;
    min-width:none;
    display:grid;
    grid-template-areas:
        'banner'
        'L2'
        'L1'
        'L3'
        'L4'
        'L5'
        'L6';
    }

    .L1, .L4, .L5 {
        text-align: center;
    }

    .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%;
    }

   
}