body{
    margin:0;
    font-family:  'Open Sans', sans-serif;; 
}

.subtitle{
    padding-top: 20px;
    width:80px;
    border-bottom: 5px solid rgb(241, 241, 61);
    border-radius: 2px; 
    position: relative;
    left:45%;
}
p{
    line-height: 2;
    
    
}
h1{
   margin:  auto;
   line-height: 2;
   font-size: 3.5rem;
   color:#fff;
   word-spacing: normal;
}

h5{

    font-size: 2.0rem;
    margin: 0 auto 40px auto;
    color:#ffffff;   
}

h2{
    
    color:rgb(44, 43, 43);
    font-size: 2.5rem;
    font-weight: bolder;
   
}

h4{
    color:rgb(44, 43, 43);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
}
/* header */
#nav{
 
    background-image: url(images/New3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
    height: 700px; 
    background-blend-mode: darken;
 
}

.intro{
    text-align: center;
    color: #fff;
    position: relative;
    top: 250px;
    font-size: larger;
}
.name{
    color:rgb(241, 241, 61);
}

/* nav */
nav{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 25px;
    right: 20px; 
}

nav a{
 color: #ffffff;
 font-size: 1.0rem;
 margin: 10px 3px;
}

nav a:hover{
    color: rgb(241, 241, 61);
}

.nav-link{
    margin:10px 20px;
}

/* About */
#about{
    text-align: center;
    padding-top: 5%;
    padding-bottom: 6%;
}
.bio{
    text-align: justify;
    color: rgb(44, 43, 43); 
    width:60%;
    position: relative;
    left: 140px;  
}
.profile{
    float: left;
    width:50%;
    
}
.skills{
    float:right;
    width: 50%;
    padding-top: 80px;
    position: absolute;
    right:10px;
    
}
    

.profile-picture{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 50px auto 30px auto;
}

.skillbar{
    position: relative;
    width:100%;
    height:40px;
    background-color:rgb(226, 225, 225);
    margin-bottom: 40px;
}

.title{
    position: absolute;
    width:100px;
    height:40px;
    padding-left: 10px;
    float:left;
    color:#fff;
    line-height: 2.5rem;
    font-weight: bold;
    z-index: 10000;
    border-radius: 2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 1px 0 1px #333;   
}

.progress-value{
    position: relative;
    float:right;
    padding-right: 10px;
    line-height: 2.5rem;
    color: black;
    z-index: 10000;
}

.progress{
    height:40px;
    position:absolute;
    border-radius: 5px;
    box-shadow: 2px 0 2px #555;   
}

.htmlColor{
    background-color: #305e8a;
}
.cssColor{
    background-color: #305e8a;
}
.jsColor{
    background-color: #305e8a;
}
.reactColor{
    background-color: #305e8a;
}
.html{
    background-color:#28527a;
}
.css{
    background-color:#28527a;
}
.js{
    background-color: #28527a;
}

/* project */
#project{
    height: 500px;
    background-color: rgba(233, 233, 233, 0.466);
    
}

.project1{
    width: 150%;
    border: 1px solid;
    padding: 15px;
    box-shadow: 5px 10px #888888;
    
}

#project-carousel{
    padding: 40px 30px;
    align-items: center;
}

.text-slide{
   width:50%;
   position: absolute;
   right:20px;
   padding-left: 20px;
   padding-top: 40px;
}

.text-slide ul{
    display: flex;
    padding: 20px 10px;  
}

.text-slide ul li{
    margin: 10px 20px;
}
.project-button{
    margin:20px;
    align-items: flex-start;
}

/* Contact */

#contact{
    padding:0;
}
.top-contact{
    padding:80px 0;
    text-align: center;
    
}

.contact-button{
    margin-top:50px;
}

.footer-link{
    width:30px;
    margin:10px 20px;
    padding-top: 70px;
}

.bottom-contact{
    background-color: rgba(15, 13, 13, 0.794);
    text-align: center;
    margin-bottom: 0;
    
    
  
}
.copyright{
    color:white;
    font-size: 0.6rem;
    margin-top: 60px;
    font-weight: lighter;
    text-align: center;
    margin-bottom: 0;
}

/* media query */
@media (max-width: 1100px){
    h1{
        font-size: 3.0rem;
    }
    
    .skills{
        
        width: 80%;
        display: inline-block;
        position: relative;
        top:10px;
        margin-left: 120px;
    }

    .profile{   
        width:100%;  
    }
}

@media (max-width: 993px){
h1{
    font-size: 2.5rem;
}
.nav-link{
    font-size: 0.9rem;
}
.text-slide{
    display: inline-block;
    position: relative;
    top:10px;
}
.project1{
    width: 80%;
    position: relative;
    left:10%;

}

#project{
    height: 700px;
    
}

.text-slide{
    width:80%;
    position: relative;
    left:10%;
    padding-top:20px;
}
.text-slide ul{
    display: flex;
    padding-top:5px;  
}

.text-slide ul li{
    margin-top:5px;
}
.project-button{
    align-items: flex-start;
    position: relative;
    bottom:35px;
}

.contact-button{
    margin-top: 20px;
}

}

@media (max-width: 881px){
  

    h1{
        font-size: 2.0rem;
    }
    
    .nav-link{
        margin:10px 3px;
    }
    .bio{
        text-align: justify;
        position: relative;
        left:100px;
    }
    
    .skills{
        margin-left: 60px; 
    }

    .profile{   
        width:100%;  
    }

    #project{
        height: 600px;
    }
    .subtitle{
  
        position: relative;
        left:30%;
    }
    
}