/* index html style*/

/* FUTURE EDITOR NOTES ------------------

        Hello hypothetical student
        who will eventually be editing this page,
        How are You? thats awesome! Im good too!

        You will find rulesets in this CSS that do nothing
        and effect nothing... dont despair! I tried
        to get rid of all of them but I tweaked 
        this bad boy for a long time so there are some little
        tid bits that I probably forgot to delete. 

        I used CSS Grid for layout, mainly grid template
        areas. look it up! its an awesome way to make 
        responsive websites. if you have any questions, 
        hit me up! 
        
        Love,
        Zach

    */

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

p {
    font-size: 18px;
}
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;
}

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

/*container elements--------------------------------------*/
.masthead {
    grid-area: masthead;
    background:black;
}

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

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

.content-main {
    grid-gap:2em;
    grid-area: content-main;
    display:grid;
    padding:20px;
    grid-template-areas:
        'banner banner'
        'about about'
        'feat-mapper feat-mapper'
        'content2 content3';
    max-width: 900px;
}

.officers {
    display:grid;
    grid-area: officers;
    grid-template-areas:
        'box5 box5' 
        'box1 box2'
        'box3 box4';

    max-height:80%;
    margin-left:1em;
    margin-top: 20px;
    max-width:400px;
    grid-gap:1em;
}

.officers div {
    width: auto;
    margin:.5em;
}

.officers img {
    width:200px;
    height:200px;
    border-radius: 20%;
    box-shadow: 0px 0px 20px 2px;
}

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

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

.tab1a, .tab1, .tab2, .tab3, .tab4 {
    box-shadow: 0px 0px 10px 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;
}

/* content-main elements---------------------------------*/


.banner {
    grid-area: banner;

}

.banner img{
    
    display:block;
    margin-left: auto;
    margin-right: auto;
    max-width:100%;
}

.about {
    grid-area: about;
    text-align:center;
}



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

.feat-mapper {
    grid-area: feat-mapper;
    text-align:center;
    margin-bottom:20px;
}

.feat-mapper img {
    margin:0 auto;
    max-width: 80%;
    box-shadow: 0px 0px 20px 2px;
}

.content2 {
    margin:0 auto;
    grid-area: content2;
}

.content2 img {
    margin-right:auto;
    margin-bottom:auto;
    box-shadow: 0px 0px 20px 2px;
    height:200px;
    width:200px;
}

.content3 {
    margin:0 auto;
    grid-area: content3;
}

.content3 img {
    box-shadow: 0px 0px 20px 2px;
    margin-right:auto;
    margin-bottom:auto;
    height:200px;
    width:200px;
}

/* officer elements -------------------------------------*/

.box1 {
    grid-area: box1;
}

.box2 {
    grid-area: box2;
}

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

.box4 {
    grid-area: box4;
}

.box5 {
    color:black;
    grid-area: box5;
    background: lightgrey;
    height:550px;
    width: 400px;
    /*grid-gap:2em;*/
    box-shadow: 0px 0px 20px 2px;
    padding: 1em; 
}

.box6 {
    grid-area: box6;
}

/* footer elements */

#fcol1 {
    grid-gap:1em;
}

#fcol2 {
    grid-gap:1em;
}

/*---------------- media queries-------------------- */
/*-----------------max-width 1400px -----------------*/

@media only screen and (max-width:1400px){
    .container {
        grid-template-areas: 
        'masthead masthead'
        'nav content-main'
        'officers officers'
        'footer footer';
        grid-gap:.5em;
    }
    .content-main{
        margin-left:none;
    }

    .officers {
        margin:0 auto;
    }

    .nav div {
        width:100px;
        height: 100px;
    }

    body{
        background-size: auto;
    }

}

/*----------------max-width 950px -------------------*/

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

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

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

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

    .content-main img {
        max-width:100%;
    }
    .masthead img{
        max-width:100%;
    }
}

/*--------------------max-width 500px--------------*/

@media only screen and (max-width:600px){

    .content-main{
        margin:0 auto;
        grid-gap:0;
    }

    .content-main {
        grid-template-areas:
        'banner'
        'about'
        'feat-mapper'
        'content2'
        'content3'
        'footer';

    }

    

    .content-main img {
        max-width:100%
    }
    .banner {
       max-width: 100%;
    }

    img {
        max-width: 100%;
    }
}