/***** Header *****/

#header {
    width:1200px; 
    margin-right: auto;
    margin-left: auto;

}

#header img {
    display: inline-block;
    margin-top: 33px;
}

#header nav {
    float: right;
    margin-top: 33px;
}

#header a {
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif,;
    font-weight: 400;
    font-size: 18px;
    color: #244bff;
}

.mar-right{
    margin-right:24px;
}

.mar-left{
    margin-left:24px;
}


/***** About *****/

#about {
    width:1200px; 
    overflow: auto;
    margin-right: auto;
    margin-left: auto;
}

#about h1 {
    font-family: 'Roboto', sans-serif,;
    text-align: center;
    text-transform: uppercase;
    margin-top: 125px;
    font-weight: 700;
    font-size: 36px;
    color: #244bff;
    clear: both;
}
.bio {
    width: 600px;
    height: 319px;
    background-color: #244bff;
    float:left;
}

.bio img {
    
    float:left;
    padding-top: 65px;
    padding-left: 26px;
}

.bio p {
    font-family: 'Roboto', sans-serif,;
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    color: #FFFFFF;
    overflow: auto;
    padding-left: 18px;
    margin-top: 60px;
    padding-right: 10px;
}

.skills h3 {
    font-family: 'Roboto', sans-serif,;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 20px;
    letter-spacing: 4px;
}

.skills {
width: 600px;
height: 319px;
float: left; 
background-color: #2eb5f0;
}  


.skills ul {
    list-style: none;
    font-family: 'Roboto', sans-serif,;
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    color: #FFFFFF; 
    margin-left: 85px;
    margin-top: -11px;
}

.skills li {
    list-style-image: url("../img/skill-box.png");
}

.skills span {
    padding-left: 3px;
}

    


/***** Portfolio *****/

#portfolio {
    height: 930px;
    background-color: #21ffcc;
    width: 1200px;
    margin-top: 103px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
}

#portfolio h1 {
    font-family: 'Roboto', sans-serif,;
    text-align: center;
    text-transform: uppercase;
    padding-top: 22px;
    font-weight: 700;
    font-size: 36px;
    color: #244bff;
}

.image-left{
    padding-left: 40px;
}

.image-right{
    padding-left: 22px;
}


#portfolio p {
    color: #244bff;
    text-align: left;
    font-family: 'Roboto', sans-serif,;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    margin-top: 8px;
}

.caption-left {
    margin-left: 47px;  
}

.caption-right {
    margin-left: 30px;
}

#portfolio .full-width {
    overflow: auto;
    display: flex;
    justify-content: center;
}

#portfolio .half-width-left {
    width: 600px;
    float: left;  
}

    
#portfolio .half-width-right {
    width: 600px;
    float: left;
}

#image-top {
    margin-top:10px;
}
#image-bottom {
    margin-top: 25px;  
}
   

/***** Contact *****/

#contact {
    width:1200px; 
    margin-right: auto;
    margin-left: auto;
}

#contact h1 {
    font-family: 'Roboto', sans-serif,;
    text-align: center;
    text-transform: uppercase;
    margin-top: 125px;
    font-weight: 700;
    font-size: 36px;
    color: #244bff;
}



#contact .email {
    text-decoration: none;
    font-family: 'Roboto', sans-serif,;
    font-size: 24px;
    font-weight: 400;
    color: #244bff;
    letter-spacing: 1px;
    float: left;
    margin-top: 66px;
}
 

#contact ul {
    list-style: none; 
    float: right;
    margin-top: 54px;
}

#contact ul li {
    display: inline-block;
    margin-left: 25px;
}

.copy-right {
    display: block;
    margin: 0 auto;
    padding-top: 129px;
    text-align: center;
    clear:both;

}