/* defines common color variables*/
:root {
    --darkblue: rgb(4, 87, 87);
    --lightblue: rgb(158, 185, 185);
}

/* defines default text formatting*/
body {
    background-color: #d9dcd6;
    font-family: 'Arial';
    color: rgb(109, 109, 109);
}

/* defines text & spacing formatting for my header section*/
.header {
    padding: 10px 10px 10px 0px;
    font-family: 'Trebuchet MS';
    background-color:var(--darkblue);
    color: var(--darkblue);
}

/* defines text & spacing formatting for my specific header*/
.header h1 {
    padding: 10px 10px 10px 20px ;
    background-color: var(--lightblue);
    display: inline-block;
    font-size: 50px;
}

/* defines positioning of my navigation bar on the right side*/
nav {
    padding-top: 15px;
    margin-right: 20px;
    float: right;
    font-size: 35px;
    list-style-type: none;
}

/* applies to all list items to be inline with set margin width*/
li {
    display: inline-block;
    margin-left: 25px;
}

/* Defines text formatting specifcally for nav bar items*/
.a-nav {
    font-family: 'Gill Sans MT';
    color: var(--lightblue);
}

/* Defines header as relative to enable overlap text with sub-header*/
.headercontainer {
    position:relative;
}

/* defines image formatting, enabling changes when page is resized*/
.mainimage {
    height: auto;
    width: 100%;
    margin-bottom: 25px;
}

/* positions sub header as absolute to enable text overlap and provides text formatting*/
h2 {
    position: absolute;
    padding: 10px 10px 10px 30px;
    background-color: var(--lightblue);
    color:var(--darkblue);
    font-family: 'Trebuchet MS';
    font-size: 40px;
    top:80%;
    right:0px;
}

/* for each section of work ensures that display is flex - added flex-start property to enable image reformatting upon screen resizing*/
.section1 {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    text-align: left;
    padding-left: 20px;
}

/* assigns the text formatting for all section headers - all formatting other than padding match so one element is sufficient*/
h3, h4, h5, h6 {
    color: var(--darkblue);
    margin-left: 20px;
    margin-right: 20px;
    text-align:right;
    font-size: 40px;
    border-right-style:solid;
    font-family: 'Gill Sans MT';
}

/*Unique padding for each section to ensure vertical alignment of borders*/
.paddingh3 {
    padding: 15px 15px 120px 84px;
}

/*Defines image details to enable responsive resizing as page size changes; adds rounding property to image*/
.supportimage {
    height: auto;
    max-width: 10%;
    margin: 0px 20px 0px 0px;
    border-radius: 200px;
}

/*line spacing for paragraph*/
.topp {
    line-height: 140%;
    font-size: 20px;
}

/* for most sections of the page, ensures that display is flex*/
.sections {
    display: flex;
    flex-direction: row;
    padding: 10px;
    text-align: left;
    padding-left: 20px;
}

/*Unique padding for each section to ensure vertical alignment of borders*/
.paddingh4 {
    padding: 15px 15px 230px 107px;
}

/*margin spacing for skill images; images auto wrap so flex settings not required*/
.skillsimages{
    margin: 0px 20px 0px 0px;
    max-height: 400px;
}

/* Specific formatting for work section to enable image wrap of containers */
.worksection {
    display: flex;
    flex-flow: row wrap;
    padding: 10px;
    text-align: left;
    padding-left: 20px;
}

/*Unique padding for each section to ensure vertical alignment of borders*/
.paddingh5 {
    padding: 15px 15px 240px 95px;
}

/* Defines overarching image container to enable overlap of text boxes*/
.imagecontainer {
    position:relative;
}

/*border defined separate from the image to enable filtering to the image only*/
.mainworkimageborder {
    border-style: solid;
    border-width:5px;
    border-color:  var(--lightblue);
}

/*defines image formatting for pre-hover adding a filter by default*/
.mainworkimage {
    height: 450px;
    display: block;
    margin: 0px;
    filter:brightness(70%);
}

/*removes filter on image when hovered over*/
.mainworkimage:hover {
    filter:brightness(100%);
}

/*provides formatting for text box overlayed on imageremoves filter on image when hovered over*/
.maintext {
    position: absolute;
    bottom: 20px;
    padding: 10px 10px 10px 30px;
    background-color: var(--lightblue);
}

/*span formatting for inside the text box*/
.bold {
    font-weight: bold;
    line-height: 110%;
    color: var(--darkblue);
    font-size: 20px;
}

/*span formatting for inside the text box*/
.small {
    font-size: 10px;
}

/*separate defined container for support images given stacking is vertical rather than horizontal*/
.containersupport {
    display: flex;
    flex-direction:column;
}

/*border defined separate from the image to enable filtering to the image only*/
.supportworkimage1border {
    margin: 0px 100px 0px 47px;
    border-style: solid;
    border-width:5px;
    border-color: var(--lightblue);
    display: inline-block;
}

/*defines image formatting for pre-hover adding a filter by default*/
.supportworkimage1 {
    height: 240px;
    margin: 0px;
    display:block;
    filter:brightness(70%);
}

/*removes filter on image when hovered over*/
.supportworkimage1:hover {
    filter:brightness(100%);
}

/*provides formatting for text box overlayed on imageremoves filter on image when hovered over*/
.supporttext1 {
    position: absolute;
    bottom: 20px;
    padding: 10px 10px 10px 30px;
    margin-left: 50px;
    background-color: var(--lightblue);
}

/*border defined separate from the image to enable filtering to the image only*/
.supportworkimage2border {
    margin: 22px 100px 0px 47px;
    border-style: solid;
    border-width:5px;
    border-color: var(--lightblue);
    display: inline-block;
}

/*defines image formatting for pre-hover adding a filter by default*/
.supportworkimage2 {
    height: 175px;
    margin: 0px;
    display:block;
    filter:brightness(70%);
}

/*removes filter on image when hovered over*/
.supportworkimage2:hover {
    filter:brightness(100%);
}

/*provides formatting for text box overlayed on imageremoves filter on image when hovered over*/
.supporttext2 {
    position: absolute;
    margin-top:100px;
    bottom: 20px;
    padding: 10px 10px 10px 30px;
    margin-left: 50px;
    background-color: var(--lightblue);
}

/*Unique padding for each section to ensure vertical alignment of borders*/
.paddingh6 {
    padding: 15px 15px 15px 50px;
}

/*aligns contact information center to contact me, and ensures wrap during screen re-sizing*/
.vertical-align {
    display:flex;
    align-items:center;
    flex-wrap: wrap;
}

/*text formatting for contact information, added line height for readability during screen re-sizing*/
.a-contact {
    font-family: 'Gill Sans MT';
    color:  var(--darkblue);
    font-size: 30px;
    margin-top: 23px;
    text-decoration:underline;
    text-underline-offset: 10px;
    text-decoration-color: var(--lightblue);
    line-height: 160%;
}

/* formatting for screen size when work images wrap, elements specify margins that make the elements still visually appealing */
@media screen and (max-width: 1560px) {
    
    .supportworkimage1border {
        margin: 20px 100px 0px 370px;
    }
    
    .supporttext1 {
        margin-left: 370px;
    }

    .supportworkimage2border {
        margin: 22px 100px 0px 370px;
    }

    .supporttext2 {
        margin-left: 370px;
    }

} 

/* Moves nav bar below when mobile viewing; text sub-header higher into the image; section padding farther left; shrinking of work images to fit screen*/
@media screen and (max-width: 980px) {

    nav {
        float: none;
        font-size: 25px;
    }

    h2 {
        top: 60%;
        font-size: 30px;
    }

    h3, h4, h5, h6 {
        font-size: 20px;
    }

    .paddingh3 {
        padding: 15px 15px 120px 15px;
    }

    .paddingh4 {
        padding: 15px 15px 120px 28px;
    }

    .paddingh5 {
        padding: 15px 15px 120px 23px;
    }

    .mainworkimage {
        height: 250px;
    }

    .supportworkimage1border {
        margin: 20px 100px 0px 136px;
    }

    .supportworkimage1 {
        height: 140px;
    }
    
    .supporttext1 {
        margin-left: 140px;
    }

    .supportworkimage2border {
        margin: 22px 100px 0px 136px;
    }

    .supportworkimage2 {
        height: 103px;
    }

    .supporttext2 {
        margin-left: 140px;
    }

    .paddingh6 {
        padding: 15px 15px 10px 0px;
    }

    .a-contact {
        font-size: 20px;
    }

}

/* shrinks skills images to fit a smaller screen in a more visually appealing way */
@media screen and (max-width: 750px) {
        
    .skillsimages{
        max-height: 200px;
    }
    
}

/* revises all elements for optimal mobile viewing */
@media screen and (max-width: 575px) {
        
    h2 {
        top: 60%;
        font-size: 20px;
    }

    .topp {
        line-height: 140%;
        font-size: 10px;
    }
        
    .skillsimages{
        max-height: 100px;
    }
     
    .mainworkimage {
        height: 140px;
    }
        
    .supportworkimage1border {
        margin: 20px 100px 0px 136px;
    }
    
    .supportworkimage1 {
        height: 90px;
    }
            
    .supporttext1 {
        margin-left: 140px;
    }
        
    .supportworkimage2border {
        margin: 22px 100px 0px 136px;
    }
        
    .supportworkimage2 {
        height: 75px;
    }
        
    .supporttext2 {
        margin-left: 140px;
    }

    .bold {
        line-height: 90%;
        font-size: 10px;
    }
        
    .small {
        font-size: 5px;  
    }
}