:root{
--color1: rgb(47,191,42) ;
--color2: rgb(31, 185, 90);
--lightColor :#ffffff ; 
--padding: 8%;
--bgColor-1: #171a1c;
--bgColor-2: #22282a;
}

*{
margin: 0;
padding: 0 ;
box-sizing: border-box;

}

html{
    font-family: 'Merriweather', serif;
    font-size: 16px;
    color: var(--lightColor);
}
h1{
    font-size: 4.5rem;
    margin: 1.5rem 0;
}
h2{
    font-size: 2rem;
    letter-spacing: 0.12rem;
    cursor: pointer;
}
h3{
    font-size: 1.5rem;
    margin-bottom: 3.5rem;
}
h4{
font-size:1.25rem;
color: var(--color2);
letter-spacing: 0.12rem;
}
span{
    color: var(--color1) ;
    
    }
nav{
    background-color: var(--bgColor-2);
        padding-top: 2rem;
        padding-left: var(--padding);
    padding-right: var(--padding);
    position: fixed;
    width: 100%;
 z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;

    }
    
nav ul li{
        list-style-type: none;
        display: inline-block;
        margin: 0.8rem 1.5rem;
    
    }
    
nav ul li a{
    color: var(--lightColor);
    text-decoration: none;
    transition: 0.4s;
    
    }
nav ul li a:hover{
    color: var(--color1);
    
    }
p{
    font-size: 1.25rem;
    letter-spacing: 0.12rem;
    color: var(--color2);
}
h5{
    font-size: 1.37rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}
/*----------------------------------------------------------------------
------------------------------ section home-----------------------------
----------------------------------------------------------------------*/
.home{
width: 100%;
height: 100vh;
background-image: linear-gradient(to bottom, #22282a, #1f2427, #1c2123, #1a1d1f, #171a1c);
display: flex;
flex-direction: column;
}

.btn{
 background-color: var(--color1);
 color: var(--lightColor);
text-decoration: none;
font-weight: bold;
padding: 0.81rem 1.87rem;
border-radius: 30px;
 border: solid transparent 2px;
}
.btn:hover{
    background-color: transparent;
    border: solid var(--color1) 2px;
    transition: 0.4s;
}
.content{
flex-grow: 1; 
padding: 0 var(--padding);
display: flex;
align-items: center;
justify-content: space-between;
}
.content-tx{
position: relative;
bottom: 20px;
}
.social{
margin-top: 3.5rem;

}
.social a{
    text-decoration: none;
}
.social img{
margin-right:2rem ;
width: 2.5rem;
}
.social img:hover{
transform:scale(1.2) ;
transition: 0.4s;


}
.home .content-img{
width: 45%;
height: 90%;
position: relative;
align-self: flex-end;

}
.home .content-img img{
position: absolute;
bottom: 0;
height: 100%;
left: 50%;
transform: translateX(-50%);
transition: 0.8s;
}
.home .content-img:hover .img3{
bottom: 40px;

}
/*----------------------------------------------------------------------
----------------------------- section about-----------------------------
----------------------------------------------------------------------*/
.about{
    background-color: var(--bgColor-2);
    padding: 2rem var(--padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about .content-img {
width: 35%;

}
.about .content-img img{
width: 90%;

}
.about .content-tx{
width: 35%;
line-height: 200%;
}
/*----------------------------------------------------------------------
---------------------------- section Skills-----------------------------
----------------------------------------------------------------------*/
.Skills{
    background-color: var(--bgColor-1);
    padding: 2rem var(--padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Skills .content-img {
    width: 35%;
    
    }
    .Skills .content-img img{
    width: 90%;
    
    }
   .Skills .cont-skills{
width: 50%;

    }
    .content-skills{
display: flex;
flex-wrap: wrap;
margin-top: 4rem;

    }
.skill{
width: 100px;
height: 100px;
background-color: var(--lightColor);
border-radius: 50%;
margin: 0 2rem 2rem 0;
display: flex;
align-items: center;
justify-content: center;
    }
.skill img{
        width: 80%;
    }
/*----------------------------------------------------------------------
------------------------------ Footer ----------------------------------
----------------------------------------------------------------------*/
footer{
        background-color: var(--bgColor-2);
        padding: 2rem var(--padding);
    }

footer .conten-footer{

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer .conten-footer p{
    color: var(--lightColor);
    width: 500px;
    text-align: center;
    margin-top: 1rem;
}
footer .conten-footer .end{
color: var(--color1);
margin-top: 1rem;
}
/*----------------------------------------------------------------------
-------------------------- Hmbreger Menu -------------------------------
----------------------------------------------------------------------*/
#menu{
    display: none;
    position: relative;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    user-select: none;
}
#menu span{
    display: block;
    width: 33px;
    height: 4px;
    background-color: var(--lightColor);
    border-radius:6px ;
    transform-origin:0 0 ;
    transition: 0.4s;
    margin-bottom: 5px;

}
#menu.is-active span:nth-child(1) {
transform: translate(0px, -2px) rotate(45deg);
}
#menu.is-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(15px);
    }
#menu.is-active span:nth-child(3) {
    transform: translate(-3px, 3px) rotate(-45deg);
}
 #menu.is-active span{
  background-color: var(--color1);
}        
/*----------------------------------------------------------------------
-------------------------- media Queries -------------------------------
----------------------------------------------------------------------
*/
@media  screen and (max-width : 300px) {
    :root{
     --padding:1.5rem;
    }
    html{
        font-size: 11px ;
        

    }
    .home .content-img img {
        display: none;
    }
    nav > a{
        display: none;
    }
    nav{
        top: 0;
        left: 0;
        right: 0;
        height: 82px;
        background-color: var(--bgColor-1);
        border-bottom: 1px solid var(--bgColor-2);
        padding-top: 0;
        z-index: 5;
    }
    nav ul{
        display: none;
        position: fixed;
        top: 0;
        right : 0 ;
        width: 60vw;
        height: 50vh;
        background-color: var(--bgColor-2);
    
    
    }
    nav ul.is-active {
        display: block;
    }
    nav ul li {
        display: block;
        text-align: center;
        margin: 50px;
    }
    .home .content-img{
        display: none;
    }
    .home{
        background: var(--bgColor-1);
    }
    .content-tx{
        bottom: 0;
    
    }
    .social{
        margin-top: 70px;

    }
    .social img{
        margin-right:2rem ;
    }
    h3{
        margin-top: 70px;
    }
    #menu{
        display: block;
    }
    .about .content-img {
        display: none;
    }
    .about .content-tx{
        width: 100%;
       
    }
    .Skills .content-img{
        display: none;
    }
    .Skills .cont-skills {
        width: 100%;
        text-align: center;
    }
    .content-skills{
        margin-top: 2rem;
        justify-content: center;
        align-items: center;
    }
    .skills{
       width: 80px;
       height: 80px;
    }
    footer .conten-footer p{
    width: 100%;
    }
}
@media  screen and (min-width : 301px) and (max-width : 575px) {
:root{
 --padding:1.5rem;
}
html{
    font-size: 13px ;
}
.home .content-img img {
    display: none;
}
nav > a{
    display: none;
}
nav{
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    background-color: var(--bgColor-1);
    border-bottom: 1px solid var(--bgColor-2);
    padding-top: 0;
    z-index: 5;
}
nav ul{
    display: none;
    position: fixed;
    top: 0;
    right : 0 ;
    width: 60vw;
    height: 50vh;
    background-color: var(--bgColor-2);


}
nav ul.is-active {
    display: block;
}
nav ul li {
    display: block;
    text-align: center;
    margin: 50px;
}



.home .content-img{
    display: none;
}
.home{
    background: var(--bgColor-1);
}
.content-tx{
    bottom: 0;

}
.social{
    margin-top: 70px;
}
h3{
    margin-top: 70px;
}
#menu{
    display: block;
}
.about .content-img {
    display: none;
}
.about .content-tx{
    width: 100%;
   
}
.Skills .content-img{
    display: none;
}
.Skills .cont-skills {
    width: 100%;
    text-align: center;
}
.content-skills{
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
}
.skills{
   width: 80px;
   height: 80px;
}
footer .conten-footer p{
width: 100%;
}
}
@media  screen and (min-width : 576px) and (max-width : 767px) {
    :root{
     --padding:1.5rem;
    }
    html{
        font-size: 13px ;
    }
    .home .content-img img {
        display: none;
    }
    nav > a{
        display: none;
    }
    nav{
        top: 0;
        left: 0;
        right: 0;
        height: 82px;
        background-color: var(--bgColor-1);
        border-bottom: 1px solid var(--bgColor-2);
        padding-top: 0;
        z-index: 5;
    }
    nav ul{
        display: none;
        position: fixed;
        top: 0;
        right : 0 ;
        width: 30vw;
        height: 100vh;
        background-color: var(--bgColor-2);
    
    
    }
    nav ul.is-active {
        display: block;
    }
    nav ul li {
        display: block;
        text-align: center;
        margin: 50px;
    }
    
    
    
    .home .content-img{
        display: none;
    }
    .home{
      background: var(--bgColor-1);
    }
    .content-tx{
        bottom: 0;
    
    }
    .social{
        margin-top: 30px;
    }
    h3{
        margin-top: 10px;
    }
  
    .content{
        padding-top: 82px;
    }
    #menu{
        display: block;
    }
    .about .content-img {
        display: none;
    }
    .about .content-tx{
        width: 100%;
       
    }
    .Skills .content-img{
        display: none;
    }
    .Skills .cont-skills {
        width: 100%;
        text-align: center;
    }
    .content-skills{
        margin-top: 2rem;
        justify-content: center;
        align-items: center;
    }
    .skills{
       width: 80px;
       height: 80px;
    }
    footer .conten-footer p{
    width: 100%;
    }
}
@media  screen and (min-width : 768px) and (max-width: 991px) {
        :root{
         --padding:1.5rem;
        }
    .home{
        background: var(--bgColor-1);
    }
        .home .content-img img {
            display: none;
        }
        nav > a{
            display: none;
        }
        nav{
            top: 0;
            left: 0;
            right: 0;
            height: 82px;
            background-color: var(--bgColor-1);
            border-bottom: 1px solid var(--bgColor-2);
            padding-top: 0;
            z-index: 5;
        }
        nav ul{
            display: none;
            position: fixed;
            top: 0;
            right : 0 ;
            width: 30vw;
            height: 100vh;
            background-color: var(--bgColor-2);
        
        
        }
        nav ul.is-active {
            display: block;
        }
        nav ul li {
            display: block;
            text-align: center;
            margin: 50px;
        }
        
        
        
        .home .content-img{
            display: none;
        }
      
        .content-tx{
            bottom: 0;
        
        }
        .social{
            margin-top: 70px;
        }
        h3{
            margin-top: 70px;
        }
        #menu{
            display: block;
        }
        .about .content-img {
            display: none;
        }
        .about .content-tx{
            width: 100%;
           
        }
        .Skills .content-img{
            display: none;
        }
        .Skills .cont-skills {
            width: 100%;
            text-align: center;
        }
        .content-skills{
            margin-top: 2rem;
            justify-content: center;
            align-items: center;
        }
        .skills{
           width: 80px;
           height: 80px;
        }
        footer .conten-footer p{
        width: 100%;
        }
 }

 @media  screen and (min-width : 992px) and (max-width: 1279px) {
            :root{
             --padding:1.5rem;
            }
        .home{
            background: var(--bgColor-1);
        }
        html{
            font-size: 16px;
           
        }

    
            nav > a{
                display: none;
            }
            nav{
                top: 0;
                left: 0;
                right: 0;
                height: 82px;
                background-color: var(--bgColor-1);
                border-bottom: 1px solid var(--bgColor-2);
                padding-top: 0;
                z-index: 5;
            }
            nav ul{
                display: none;
                position: fixed;
                top: 0;
                right : 0 ;
                width: 30vw;
                height: 50vh;
                background-color: var(--bgColor-2);
                
            
            
            }
            nav ul.is-active {
                display: block;

            }
            nav ul li {
                display: block;
                text-align: center;
                margin: 50px;
            }
            
            
            
            .home .content-img img{
                display: block;
             height: auto;
             width: 100%;
             padding-bottom: 100px ;
            }
          
            .content-tx{
                bottom: 0;
            
            }
            .social{
                margin-top: 70px;
            }
            h3{
                margin-top: 70px;
            }
            #menu{
                display: block;
            }
            
            .about .content-tx{
                width: 60%;
               
            }
            
            .Skills .cont-skills {
                width: 50%;
                text-align: center;
            }
            .content-skills{
                margin-top: 2rem;
                justify-content: center;
                align-items: center;
            }
            .skills{
               width: 80px;
               height: 80px;
            }
            footer .conten-footer p{
            width: 100%;
            }
}
@media  (max-height : 300px){
    :root{
     --padding:1.5rem;
    }
    html{
        font-size: 12px ;
    }
    .home .content-img img {
        display: none;
    }
    nav > a{
        display: none;
    }
    nav{
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
        background-color: var(--bgColor-1);
        border-bottom: 1px solid var(--bgColor-2);
        padding-top: 0;
        z-index: 5;
    }
    nav ul{
        display: none;
        position: fixed;
        top: 0;
        right : 0 ;
        width: 30vw;
        height: 100vh;
        background-color: var(--bgColor-2);
    
    
    }
    nav ul.is-active {
        display: block;
    }
    nav ul li {
        display: block;
        text-align: center;
        margin: 50px;
    }
    
    
    
    .home .content-img{
        display: none;
    }
    .home{
      background: var(--bgColor-1);
    }
    .content-tx{
        bottom: 25px;
    
    }
    .social{
        margin-top:-20px;
    }
    h3{
        margin-top: 10px;
    }
  
    .content{
        padding-top: 82px;
    }
    #menu{
        display: block;
    }
    .about .content-img {
        display: none;
    }
    .about .content-tx{
        width: 100%;
       
    }
    .Skills .content-img{
        display: none;
    }
    .Skills .cont-skills {
        width: 100%;
        text-align: center;
    }
    .content-skills{
        margin-top: 2rem;
        justify-content: center;
        align-items: center;
    }
    .skills{
       width: 80px;
       height: 80px;
    }
    footer .conten-footer p{
    width: 100%;
    }
}
@media (min-height : 301px) and (max-height : 500px) {
    :root{
     --padding:1.5rem;
    }
    html{
        font-size: 13px ;
    }
.home{
    background: var(--bgColor-1);
}
    .home .content-img img {
        display: none;
    }
    nav > a{
        display: none;
    }
    nav{
        top: 0;
        left: 0;
        right: 0;
        height: 75px;
        background-color: var(--bgColor-1);
        border-bottom: 1px solid var(--bgColor-2);
        padding-top: 0;
        z-index: 5;
    }
    nav ul{
        display: none;
        position: fixed;
        top: 0;
        right : 0 ;
        width: 30vw;
        height: 100vh;
        background-color: var(--bgColor-2);
    
    
    }
    nav ul.is-active {
        display: block;
    }
    nav ul li {
        display: block;
        text-align: center;
        margin: 50px;
    }
    
    
    
    .home .content-img{
        display: none;
    }
  
    .content-tx{
        bottom: 0;
    
    }
    .social{
        margin-top: 20px;
    }
    h3{
        margin-top: 20px;
    }
    #menu{
        display: block;
    }
    .about .content-img {
        display: none;
    }
    .about .content-tx{
        width: 100%;
       
    }
    .Skills .content-img{
        display: none;
    }
    .Skills .cont-skills {
        width: 100%;
        text-align: center;
    }
    .content-skills{
        margin-top: 2rem;
        justify-content: center;
        align-items: center;
    }
    .skills{
       width: 80px;
       height: 80px;
    }
    footer .conten-footer p{
    width: 100%;
    }
}