* {
    box-sizing: border-box;
}
*+*{
    margin: 0;
}

/*Top of page styles*/
#top-header{
    display: flex;
    flex-direction: column;
    background-color: #F3CEF7;
    position: relative;
    padding-bottom: 0.5em;
}
#top-top{
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
}
#top-top > a{
    display: flex;
}
#top-top > button{
    display: flex;
    flex-direction: column;
    margin-right: 2em;
    background-color: #F3CEF7;
    border: 0;
    justify-content: center;
}
#top-top > button > .menu-lines{
    background-color: rgb(0, 0, 0);
    min-width: 85%;
    height: 0.4em;
    border-radius: 0.2em;
    margin: 0.25em;
    align-self: center;
}
#top-top > a > img{
    padding-left: 1em;
    min-width: 20px;
    max-width: 120px;
}
    /*navigation styles*/
    .navigation{
        display: none;
        margin-right: 2em;
        list-style-type: none;
        align-self: flex-end;
    }
    .navigation > li{
        margin-top: 0.8em;
    }
    .navigation > li > a{
        text-wrap: nowrap;
        text-decoration: none;
        color: #2b0653;
    }

/*intro styles*/
#brief-intro{
    display: flex;
    flex-direction: column;
    padding-left: 3em;
    padding-right: 3em;
    padding-top: 2em;
    padding-bottom: 2em;
    background-image: url(../assets/VanGogh-style-painting.jpg);
    background-color: #0000004f;
    background-blend-mode: overlay;
    background-repeat: round;
}
#brief-intro > *{
    text-align: center;
    color: #ffffff;
}
#brief-intro > h2{
    margin-bottom: 0;
}

/*art styles*/
.art{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.art-pieces{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.art > section > a >img{
    max-width: 100%;
    padding: 0.5em;
}
.art > section >img{
    max-width: 100%;
}
.art > section > h4{
    transform: translate(0,-50px);
    margin: 0;
    padding: 0;
    color: #91e39b;
}
    /*Image spacing*/
    .art > section > img{
        padding: 0.5em;
    }

/* view more link styles*/
#view-more-art{
    text-align: center;
    background-color: #F3CEF7;
    padding: 0.25em;
}
/*bottom bar styles*/
#bottom-bar{
    background-color: #F3CEF7;
    height: 4em;
}

/*footer styles*/
footer{
    text-align: center;
}
    /*top link styles*/
    #top-link{
        
    }
    /*contact icons styles*/
    #contact-icons{
        list-style-type: none;
        display: flex;
        justify-content: center;
    }
    #contact-icons > li{
        padding-right: 1.5em;
    }
    /*copyright styles*/
    #copyright{
        padding: 1em;
    }
/*styles for current page*/
.current-page{
    font-weight: bold;
}

/*about page styles*/
#headshot > img{
    width: 100%;
}

/*contact page styles*/
#contactMe{
    text-align: center;
}

#contact-sections > section{
    text-align: left;
}
#contact-sections > section > *{
    margin-left: 2em;
    margin-right: 2em;
}
#contact-sections > #contact-form{
    
}
#contact-form > form{
    display: flex;
    flex-direction: column;
}
#contact-form > form > section{
    display: flex;
    flex-direction: column;
    padding-bottom: 2em;
}
#message{
}
#submit-button{
    max-width: 25%;
}
/*lightbox styles*/
#overlay{
    display: none;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, 0.722); 
}
#closeOverlay{
    position: fixed;
    top: 25%;
    left: 80%;
    display: none;
}
#lightBox-img1, #lightBox-img2, #lightBox-img3, #lightBox-img4, #lightBox-img5, #lightBox-img6, #lightBox-img7, #lightBox-img8, #lightBox-img9, #lightBox-img10{
    position: relative;
    max-width: 60%;
    top: 20%;
    left: 20%;
    right: 20%;
    padding: 2em;
    display: none;
}
/*VanGogh slideshow styles*/
.VanGogh{
    max-width: 100%;
    display: none;
    margin: 0.5em;
}
#slideshow >img{
    position: relative;
    z-index: 0;
}
.showing{
    max-width: 100%;
    margin: 0.5em;
    display: none;
}
.darken{
    display: none;
}
.show{
    display: block;
}
.toolTipReplacement{
    position: relative;
    max-width: 60%;
    top: 20%;
    left: 20%;
    right: 20%;
    padding: 2em;
    color: #91e39b;
}
    /*media queries*/
    @media(min-width:768px){
        .navigation{
            display: flex;
            flex-direction: row;
            margin-right: 0;
            align-self: center;
        }
        .navLinks{
            position: relative;
        }
        #top-top > button{
            display: none;
        }
        .navigation > *{
            padding-right: 3em;
            font-size: 1.5em;
        }
        #current-page{
            padding-bottom: 0.7em;
            padding-left: 0.5em;
            padding-right: 0.5em;
            padding-top: 0.5em;
        }
        #about-section{
            display: grid;
            grid-template-columns: 45% 55%;
        }
        #about-section > #headshot{
            padding-right: 3em;
        }
        #contact-sections{
            display: grid;
            grid-template-columns: 65% 35%;
        }
        #lightBox-img1{
            max-width: 28%;
            top: 16%;
            left: 35%;
            right: 35%;
        }
        #lightBox-img2, #lightBox-img3, #lightBox-img4, #lightBox-img5, #lightBox-img6, #lightBox-img7, #lightBox-img8, #lightBox-img9, #lightBox-img10{
            max-width: 35%;
            top: 16%;
            left: 35%;
            right: 35%;
        }
        .toolTipReplacement{
            max-width: 35%;
            top: 10%;
            left: 35%;
            right: 35%;
        }
        #closeOverlay{
            top: 20%;
            left: 90%;
        }
        .VanGogh{
            max-width: 100%;
            display: none;
        }
        
    }