/* ================================= 
  HOME PAGE
==================================== */



/* ================================= 
  Base Styles
==================================== */

*, *:before, *:after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

body {
    font-family: 'Josefin Slab', serif;
}

.mountain {
    background: linear-gradient(135deg, rgba(240,199,34,.6) 0%, rgba(233,221,114,.6) 14%, rgba(227,140,171,.6) 57%, rgba(84,139,70,.6) 100%) no-repeat center,
    #578e49 url("../img/photos/mtben.JPG") no-repeat center;
    background-size: cover;
    min-height: 100vh;
}

ul {
    list-style: none;
    
}

ul li a {
    text-decoration: none;
}

footer {
    background-color: #fff;
}


/* ================================= 
  Pseudoclasses
==================================== */

a:link {
    color: #fff;
    font-weight: bold;
    transition: color .4s ease-in-out;
}


a:visited {
   color: darkgray; 
}

a:hover {
   color: #13A4C3; 
}

/* ================================= 
  Typography
==================================== */


.nav-bar ul li {
    font-size: 2em;
    font-variant: small-caps;
    font-weight: bold;
    padding: .2em;
    border-left: 1px solid #fff;
}

.nav-bar ul li:first-child {
    border-left: 0px;
}

.nav-bar ul li .selected {
    color: #578e49;
}

h1,h2,h3, p {
    text-align: center;
    color: #fff;
}

h1,h2,h3 {
    font-variant:small-caps;
}
/* ================================= 
  Flex Rules and Layout
==================================== */

.flex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.content-gallery {
    flex: 1;
    align-items: center;
}

.content{
    flex: 1;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.nav-bar ul {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    align-self: center;
    padding: 0;
}

.nav-bar ul li {
   display: inline-block; 
}


footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.social-media {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
}





/* ================================= 
  Social Media Icons
==================================== */
.social-media li {
    display: inline-block;
}

.social-media li img {
    max-height: 2.5em;
    padding-right: 2em;
}


/* ================================= 
  GALLERY PAGES
==================================== */

.gal-nav {
    margin: 3em 0em 3em 0em;
    border-bottom: 1px solid #fff;
}

.gal-nav ul li {
    border-left: 0px;
}

.plain-bg {
    background: linear-gradient(135deg, rgba(233,221,114,.6) 0%, rgba(233,221,114,.6) 14%, rgba(227,140,171,.6) 77%, rgba(84,139,70,.6) 100%) no-repeat center;    
}

header {
    display: flex;
    flex-direction: column;
}

.hero {
max-width: 30%;
align-self: center;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    margin: 5em 10em 5em 10em;
}

.gallery li img {
    max-width: 100%;
    transition: transform .1s ease-in-out;
}

.gallery li img:hover {
    transform: translate(0,-10px);
}

.gallery li {
    display: inline;
    max-width: 30%;
    padding: .5%;
}

#overlay {
    background: rgba(0,0,0,0.8);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
}

#overlay img {
    margin: 5%;
    max-width: 60%;
    max-height: 80%;
}

#overlay p {
    color: white;
    margin-top: -4%;
    margin-left: 30%;
    margin-right: 30%;
    font-weight: bold;
    font-size: 1.3em;
    
}

#nextButton {
    max-height: 5%;
    margin-top: 500px;
    
    
}


/* ================================= 
  ABOUT PAGE
==================================== */

#about {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;
}

#headshot {
    border-radius: 100%;
    max-width: 15%;
    align-self: center;
    margin: 2%
}

.bio {
    max-width: 60%;
    text-align: left;
    align-self: center;
    margin-bottom: 5%;
}

.bio p {
    color:#578e49;
    font-weight: bold;
    font-size: 1.3em
}

/* ================================= 
  CONTACT PAGE
==================================== */

#contact {
    display: flex;
    flex-direction: column;
    max-width: 60%;
    min-height: 50vh;
    margin: auto;
    background: #fff;
    padding: 2%;
    margin-bottom: 10%    
}

#contact h1 {
    color:#578e49;
}

.contact-social-media{
    display: flex;
    justify-content: space-between;
    margin: 10%; 
}

.contact-social-media img {
    max-width: 45%
}
/* ================================= 
  Media Queries
==================================== */

@media (max-width: 769px) {
        .content-gallery {
            display: flex;
            flex-direction: column;
            align-items: center;
        }


        .logo img {
            margin: 0 auto;
            max-width: 60%;
        }

        .nav-bar ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .nav-bar ul li {
            font-size: 1.2em;
            display: block;
            text-align: center;
            margin-bottom: 1em;
            padding: .5em 1em .5em 1em; 
        }
    
        .gallery {
            flex-direction: column;
            width: 100%;
        }
    
        .gallery li {
            max-width: 100%;
            padding: 0em;
        }
        .bio {
            max-width: 50%;
            text-align: center;
        }
    
        #headshot {
            max-width: 40%;
            align-self: center;
            margin: 2%
        }
    
        .aboutMe {
            display: none;
        }

        footer {
            flex: 1;
        }

    }