/* 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
*/


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

/* FONTS */

@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;
}

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

h2{
    margin-top:50px;
    margin-bottom:30px;
    background-color:#b1d5ff;
    border-radius: 50px;
    text-align: center;
    padding:10px;
    font-size: 1.6em;
    border: solid 2px white;
}

#theProcess{
    margin-top:50px;
}

.essayIMGDivs{
    margin:0 auto;
    text-align:center;
}

.essayIMGs{
    max-width:55%;
    height:auto;
    border-radius: 50px;
    border:solid 2px #81A4CD;
    margin:0px auto;
}

p{
    line-height:2.8em;
    letter-spacing: 0.05em;
}

.pIndent{
    text-indent: 2em;
}

#letterDivider{
    background-color:white;
    height:5px;
    border-radius:50px;
    border:none;
}

/* HEADER */

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

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

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

/* ----- HAMBURGER MENU ----- */

.hamburger{
    margin-left:50px;
}

.bar{
    width:3em;
    height:4px;
    margin:10px auto;
    display:block;
    background-color:black;
}

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

/* NAV */

.navigation{
    padding-bottom:30px;
    font-size:1.2em;
    display:none;
}

.navigation.active{
    padding: 10px;
    display: flex;
    justify-content: center;

}

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

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

.navigation 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;
}
/* -------- */

/* MAIN */

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

/* FOOTER */

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

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

/* ----- 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:#3E7CB1;
    padding:10px;
    border-radius:20px;
    text-decoration: none;
  }

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

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

/* ----- Eye Drawings Slideshow ----- */

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

.prev{
    margin-right:10px;
    margin-top:30px;
}

.next{
    margin-left:10px;
    margin-top:30px;
}

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

#eyeDrawingSec{
    text-align:center;
}

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



/* ------ 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;
    }

    .hamburger{
        margin:0 auto;
    }

    .navigation div{
        text-align: center;
    }

    .emails{
        word-break: break-all;
    }

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

    footer{
        padding-bottom:30px;
    }

    /* 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;
    }

    .essayIMGs{
        max-width:100%;
    }

    .slideshowImages{
        max-width:100%;
    }

}



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

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

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


    .navigation div{
        width:70%;
    }

    main{
        width:80%;
    }

    #footerMainDiv{
        width:70%;
    }

    footer h2{
        width:60vw;
    }

    footer h4{
        width:40vw;
    }

    .essayIMGs{
        max-width:90%;
    }

    .slideshowImages{
        max-width:90%;
    }
}


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

    .navigation div{
        width:60%;
    }

    main{
        width:70%;
    }

    #footerMainDiv{
        width:60%;
    }

    footer h2{
        width:50vw;
    }

    footer h4{
        width:35vw;
    }

    .essayIMGs{
        max-width:70%;
    }

    .slideshowImages{
        max-width:70%;
    }


}


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


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

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

    .navigation div{
        width:40%;
    }

    main{
        width:50%;
    }

    #footerMainDiv{
        width:40vw;
    }

    footer h2{
        width:30vw;
    }

    footer h4{
        width:25vw;
    }

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

    .essayIMGs{
        max-width:65%;
    }

    .slideshowImages{
        max-width:65%;
    }

}