*{
     margin:0;
     padding:0 ;
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


}
 
html{
    scroll-behavior: smooth;

}

.container{
    padding: 0 100px 0 100px;

}
 nav ul,
 .main-info-section,
 .work-category{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;

 }

body{
    background-color: #252627;

}

header{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
     padding: 20px 0;
}

.navbar{
    background-color:#181818;

}


header h1,
header a,
.text p,
.about h1,
.skills h1,
.work h1,
.contact h1{
    color: #707070;
}
li{
    list-style: none;
    margin-left: 30px;

}

a{
    text-decoration: none;
    font-size: .9rem;
    text-transform: uppercase;
    position: relative;
    
    top: 50%;
    bottom: 50%;
    transform: translateY(-50%);

}

.main-info-section{
    height: calc(100vh-81.6px);

}

.text{
   margin-top: 120px; 
}
.text h1{
    color: blanchedalmond;
    font-size: 3rem;
    cursor: context-menu;
}
.text span{
    display:inline-block ;
}
span:hover{
    color: #48CFAD;
    transition: all.5s;

}
span.name{
    color: #ED5565;

}
span.m-left{
    margin-left: -10px;
    
}
.text p{
    letter-spacing: 3px;
    word-spacing: 10px;
    font-size: .8rem;

}
.text a{
    padding: 12px 25px;
    background-color: none;
    border: 3px solid #ED5565;
    color:#ED5565;
    font-size: .8rem ;
    position: relative;
    top: 80px;
    overflow: hidden;
    transition: .5s;
    display: inline-block;

}

.text a:hover{
    color:#fff;

}

.text a::before{
    content:'';
    background-color: #ED5565;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:0%;
    z-index: -1 ;
    transition: .5s;

}

.text a:hover::before{
height: 100%;
}

.profile-image img {
  
    width: 450px;
    margin-top: 50px;
    /* position: fixed; */
   
}

.about{
    height: 100vh;
    margin-top: 100px;

}
.about h1,
.work h1{
    font-size: 10rem;
    z-index: 0;
    opacity: .1;

}

.about-me-info{
    max-width: 900px;
    background-color: #252627;
    box-shadow: 0 0 1.2rem rgba(0,0,0,.25);
    padding: 50px;
    position: relative;
    top: -70px;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    z-index: 1;

}

.about-me-info p{
    font-size: 1.3rem;
    color: #BEBEBE;
}

.about-me-info p:nth-child(2),
.about-me-info p:last-child{
    margin-top: 30px;

}

.about img{
    width: 300px;
    position: relative;
    top: -300px;
    left: calc(100% - 40px);
    right: calc(100% - 100px);
    transform: translateX(calc(-100% + 100px));
}

.skills{
    height: 100vh;
    
}
.skills h1,
.contact h1{
    text-align: right;
    font-size: 10rem;
    opacity: .1;

}

.skills-info{
    font-size: 1.4rem;
    color: #BEBEBE;
    max-width: 800px;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    text-align: center;
    margin-bottom: 50px;

}
.html{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;

}

div[class^='tag-']{
    clip-path: polygon(75% 5%, 100% 50%, 75% 100%,0% 100%,0% 50%,0% 0%);
    width: 120PX;
    height: 30PX;
    background-color: #1785a7;
    margin-right: 30px;

}

div[class^='tag-'] p {
    color: #fff;
    text-align: left;
    padding-left: 10px;
    font-size: 1.1rem;
    padding-top: 3px;

}

.progessbar{
    position: relative;
    width: 600px;
    height:20px ;
    border: 2px solid #48CFAD;
    border-radius: 20px;
    margin-top: 7px;

}

div[class^='bar-']{
    position: absolute;
    background-color: #48CFAD;
    height: 10px;
    border-radius: 20px;
    margin: 2.7px;

}


.bar-C{
    width: 50%;
    background-color: #48CFAD;
}
.bar-html{
    width: 80%;
    background-color: #48CFAD;
}

.bar-css{
    width: 75%;
    background-color: #48CFAD;
}

.bar-javascript{
    width: 40%;
    background-color: #48CFAD;
}

.bar-IOT{
    width: 95%;
    background-color: #48CFAD;
}



.work-category button{
    text-transform: capitalize;
    border: 3px solid #ED5565;
    padding: 15px 30px;
    color:#ED5565;
    border-radius: 50px;
    font-size: 1.1rem;
    letter-spacing: 1px;
    background-color: #252627;
    outline: none;
    cursor: pointer;
}

div[class^='category-']{
    margin-top: 50px;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
    grid-gap: 110px;

}

.work a{
    justify-self: center;
    position: relative;
    display: inline-block;

}

.work-category .active{
    background-color: #ED5565;

}

button.active{
    color: #fff;

}

.work a img{
    width: 350px;
    justify-self: center;

}


div.hideCategory{
    display: none;
}

.showCategory{
    display: block;

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

form input,
form textarea{
    display: block;
    width: 500px;
    padding: 20px;
    background-color: #252627;
    border: 3px solid #707070;
    margin: 20px 0;
    outline: none;
    font-size: 1.2rem;
    color: #fff;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);

}


form input:last-child{
    width: 150px;
    background-color: #ED5565;
    border: none;
    cursor: pointer;

}

footer hr{
    border: 2px solid #707070;
    margin-top: 80px;

}

footer p{
   text-align: center;
   color: #707070;
   font-size: 1.2rem;
   padding: 30px 0;
    
}