/* COLORS */

/* winter palette 6 colors - 
 #FEFEFE - white (ish)
 
 #D1F6FE - very light blue (almost a teal)

 #8FCDEF - light blue

 #B4B8D7 - pastel purple

#35628E - light navy blue

#012C43 - dark navy blue
*/


/* Other Blue Palette -

#054A91 - navy blue

#3E7CB1 - steel blue (its like a pale darker light blue color)

#81A4CD - pastel blue-purple

#DBE4EE - pastel blue-white
*/

/* Galaxy Green/Blue colors - 

#013026 - dark green

#014760 - another navy blue (more on the green side tho)

#107E57 - forest green

#A1CE3F - yellow-lime green

#CBE58E - pastel pale green
*/

/* Partial Green Palette -

#157A6E - pastel dark forest-sage green

#499F68 - pastel forest green

#77B28C - pastel light green
*/


/* ----------------------------------------------------------------------------------- */

@font-face{
    font-family: corner of the sky;
    src: url(../Fonts/kg_corner_of_the_sky/KGCorneroftheSky.ttf);
}

@font-face{
    font-family: naturally;
    src: url(../Fonts/naturaly/Naturaly.otf);
}

@font-face{
    font-family: heyComic;
    src: url(../Fonts/hey_comic/Hey\ Comic.ttf);
}


*{
    box-sizing: border-box;
}

body{
    background-color: #012C43;
    margin:0px;
    font-family: corner of the sky, 'Times New Roman', Times, serif;
    font-size:.8em;
}



header section{
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding:10px;
}

header h1{
    width:7.5em;
    margin-left:10px;
}


main{
    width:90vw;
    margin: 0 auto;
    background-color: #8FCDEF;
    padding: 1.6em;
    border-radius: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    border: solid 2px white;
}

header{
    background: linear-gradient(#3E7CB1, #81A4CD);
    border-bottom: solid 2px white;
}

nav{
    padding-bottom:30px;
    font-size:1.2em;
}

nav a {
    border-radius: 20px;
    padding:10px;
    color:black;
    text-decoration: none;
}

nav a:hover{
    background-color: #D1F6FE;
    transition: 0.5s;
}

nav div{
    width:70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: #B4B8D7;
    border-radius: 50px;
    border: solid 2px white;
}

.settings{
    background-color:#DBE4EE;
    padding:5px;
    border-radius: 5px;
    text-align:right;
    width: 20%;
    margin-left:10px;
    text-align:center;
}

h1{
    background-color:#DBE4EE;
    border-radius: 50px;
    text-align: center;
    padding:10px;
    font-size: 2em;
    border: solid 2px white;
}

footer{
    background: linear-gradient(#81A4CD, #3E7CB1);
    padding:10px;
    font-size:1em;
    border-top: solid 2px white;
}

footer section{
    /* border: solid 2px lime; */
    margin-top:10px;
    margin-bottom:20px;
}

footer h2{
    text-align:center;
    background-color:#DBE4EE;
    border-radius: 50px;
    width:50vw;
    margin:auto;
    border: solid 2px white;
    /* font-size: 1.7em; */
}

footer h4{
    text-align:center;
    background-color:#DBE4EE;
    border-radius: 50px;
    width:40vw;
    border: solid 2px white;
    margin:auto;
}

#footerMainDiv{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    margin:0 auto;
    width:70vw;
    margin-top:20px;
    background-color:#B4B8D7;
    padding:10px;
    padding-top:20px;
    border-radius: 50px;
    border: solid 2px white;
    font-size:1em;
}

footer p{
    margin-top:10px;
}

/* ----------------------------------------- */


/* --------About Me Section-------- */


#aboutSec{
    font-size: 1.2em;
    /* border:solid 2px lime; */
    text-align:center;
}

/* #aboutSec h1{
    font-size: 2em;
    padding-bottom:20px;
} */

#myPicDiv{
    margin: auto;
    width:70vw;
}

#myPic{
    max-width:100%;
    height: auto;
    border-radius: 50px;
    border: solid 2px white;
}

#aboutSec p{
    margin-top:20px;
    background-color:#DBE4EE;
    border-radius: 50px;
    padding:20px;
    font-size: 1.1em;
    border: solid 2px white;
    text-align:left;
}

/* -------------------------------- */



/* ----- Resume ----- */

.resumeSections p{
    text-align:center;
}

.resumeSections h2{
    background-color:#DBE4EE;
    text-align:center;
    border-radius:30px;
    border:solid 2px white;
    margin-top: 20px;
    margin-bottom: 20px;
}

.resumeSections h4{
    margin-bottom:20px;
}

.addressSec{
    text-align:center;
}

.titleAndYearDivs{
    font-size: 1.1em;
    display:flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom:10px;
}

.titleAndYearDivs h3{
    background-color:#D1F6FE;
    border: solid 2px white;
    border-radius: 20px;
    padding: 10px;
}

.titleAndYearDivs h6{
    width:50%;
    text-align:right;
}

.Education h3, h5{
    text-align:center;
    background-color:#D1F6FE;
    border: solid 2px white;
    border-radius: 20px;
    padding: 5px;
    margin-bottom:30px;
    font-size:1.4em;
}

#referencesDiv h4{
    width:50%;
    margin: auto;
    text-align:center;
    background-color:#DBE4EE;
    border-radius: 50px;
    border:solid 2px white;

}

.downloadDiv{
    padding:5px;
    text-align:center;
}

.button{
    color:white;
    background-color:#064161;
    padding:10px;
    border-radius:20px;
    text-decoration: none;
  }

.button:hover{
    background-color:#D1F6FE;
    color:black;
}

/* -------------------------------- */



/* ----- Photography ----- */

.h2NoContainer{
    background-color:#DBE4EE;
    margin: auto;
    border-radius: 50px;
    text-align:center;
    font-size:2em;
    border:solid 2px white;
    padding:10px;
    word-break: break-all;
    margin-top:20px;
}

#bestWorkSec{
    text-align:center;
}

#bestWorkSec h2{
    background-color:#DBE4EE;
    border-radius: 20px;
    border:solid 2px white;
    width:50%;
    margin: 20px auto;
}


.slideshowImages{
    max-width:100%;
    border:solid 2px #81A4CD;
    border-radius:10px;
}

.prev{
    margin-right:10px;
}

.next{
    margin-left:10px;
}

.prev, .next{
    background-color:#DBE4EE;
    border:solid 2px white;
    width:10%;
    padding:5px;
    border-radius: 20px;
    font-size:1.3em;
}

/* -------------------------------- */


/* ----- Fun Facts ----- */

.card{
    background-color:#DBE4EE;
    padding:20px;
    border-radius: 20px;
    margin:20px auto;
    border: solid 2px white;
}

.cardIMGs{
    max-width:100%;
    height:auto;
    border: solid 2px #81A4CD;
    border-radius: 10px;
}

/* -------------------------------- */



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

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


    header img{
        max-width:80px;
        margin: auto;
    }

    header h1{
        font-size:1.4em;
    }

    header section{
        flex-direction: column;
    }

    nav div{
        text-align: center;
    }

    .settings{
        margin: auto;
        width:45%;
        justify-content:center;
    }

    #footerEmailDiv, .addressSec a{
        /* font-size:.8em; */
        word-break:break-all;
    }

    footer{
        padding-bottom:30px;
    }

    /* about me section */

    #aboutSec h1{
        font-size:1.4em;
    }

    #aboutSec p{
        font-size:1em;
    }

    /* ---- */

    /* resume */

    .titleAndYearDivs{
        flex-direction:column;
        justify-content:center;
        align-items: center;
    }

    .titleAndYearDivs h3, h5{
        text-align:center;
    }

    .titleAndYearDivs h6{
        font-size: 1.05em;
        text-align:left;
        width:100%;
        text-align:center;
    }

    .Education h3{
        text-align:center;
    }

    /* --------- */

    /* ----- Photography ----- */

    #photoH1{
        font-size:1.4em;
    }

    #bestWorkSec h2{
        font-size:1.4em;
    }

    .prev, .next{
        width:25%;
    }

}


@media screen and (min-width: 576px){
    .settings{
        width:13%;
    }

    #bestWorkSec{
        width: 80%;
        margin: auto;
    }
}




@media screen and (min-width: 750px){

    header h1{
        width:10em;
        margin-left:10px;
    }

    header section{
        justify-content:space-evenly;
    }


    nav div{
        width:70%;
    }

    main{
        width:80%;
    }

    #bestWorkSec{
        width: 75%;
        margin: auto;
    }

    #myPicDiv{
        width:60vw;
    }

    .cardIMGDivs{
        width:80%;
        margin: auto;
    }

    #footerMainDiv{
        width:70%;
    }

    footer h2{
        width:60vw;
    }

    footer h4{
        width:40vw;
    }
}


@media screen and (min-width:900px){

    nav div{
        width:60%;
    }

    .settings{
        width:9%;
    }

    main{
        width:70%;
    }

    #bestWorkSec{
        width: 70%;
        margin: auto;
    }

    #myPicDiv{
        margin: auto;
        width:45vw;
    }

    #footerMainDiv{
        width:60%;
    }

    footer h2{
        width:50vw;
    }

    footer h4{
        width:35vw;
    }


}


@media screen and (min-width: 1500px){


    body{
        background: radial-gradient(#3E7CB1, #012C43);
    }

    header h1{
        width:10em;
        margin-left:10px;
    }

    nav div{
        width:40%;
    }

    .settings{
        width:5%;
    }

    main{
        width:50%;
    }

    #bestWorkSec{
        width: 65%;
        margin: auto;
    }

    #myPicDiv{
        margin: auto;
        width:30vw;
    }

    .cardIMGDivs{
        width:70%;
        margin: auto;
    }

    #footerMainDiv{
        width:40vw;
    }

    footer h2{
        width:30vw;
    }

    footer h4{
        width:25vw;
    }


    .titleAndYearDivs h6{
        font-size: 1.2em;
    }



}