*{
    transition:all 0.3s ease;
}


#main{
    width:99.5%;
    height: 580px;
    margin:0px 0px 0px 3px;
    border:1px solid black;
    box-shadow: 0px 0px 10px 10px rgba(0, 19, 54, 0.76);
    overflow:hidden;
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.header{
    width:100%;
    height: 40px;
    box-shadow:0px -2px 1px 5px rgba(4, 26, 68,0.4) ;
    background:linear-gradient(90deg,rgb(4, 26, 68),rgba(4, 26, 68,0.7));
    

}
.header-front{
    height: 33px;
    width: 480px;
    
    padding:7px 0px 0px 20px;
    float:left;
    font-size: 25px;
    background:linear-gradient(45deg,yellow , green);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-rest{
    width:160px;
    height:30px;
    float:left;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    padding-top: 10px;
    color:whitesmoke;
   
}
.header-rest a{
    text-decoration: none;
    color:whitesmoke;
   
}
.header-rest:hover{
    font-size: 20px;
    color:yellowgreen;
    border-radius: 5mm;
    box-sizing: content-box;

    background-color: rgb(235, 189, 225);
    
}
.header-rest a:hover{
    font-size: 20px;
    color:yellowgreen;
    border-radius: 5mm;
    box-sizing: content-box;
    
    background-color: rgb(235, 189, 225);
    
}

.skill{
    opacity:0;
    width:200px;
    height:150px;
    
}
.skill:hover{
    opacity:.9;
    background-color: rgb(11, 218, 114);
    text-align: center;
    border-radius: 5mm;
    color:black;
    position:absolute;
    margin-top: 8px;

}
.only-hovr{
    opacity:0;
    width:20 px;
    height:20px;
    box-sizing: content-box;
    
}
.only-hovr:hover{
    width:200px;
    height:40px;
    font-size: 13px;
    background-color: burlywood;
    color:black;
    border-radius: 8mm;
    opacity:1;
    padding-top: 10px;
    
    right:35px;
    top: 45px;
    position:absolute;
}



.content{
     width:60%;
     height:540px;
     float:left;
     
     font-family:Arial, Helvetica, sans-serif;
    /* background-color: rgba(7, 27, 99, 0.932);*/
    
}
.description{
    height:320px;
    width:54%;
    padding:80px 0px 0px 100px;    
}
.description h1,h2,p{
    
    
    background:linear-gradient(45deg,yellow , green);
    background-clip: text;
    -webkit-text-fill-color: transparent;

}
.description h1{
    font-size: 50px;
    
    animation:h 3s  ease-in-out ;
    animation-delay: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards ;
    
}
@keyframes h{
    
    0%{
         font-size:5px;
    }
    
    100%{
        font-size: 50px;
    }
}
.description h2{
    font-size: 30px;
}
.description p{
   font-size: 16px;
}
.social-media{
    height: 140px;
    width:60%;
    display:flex;
}
.social-media div{
    width:20%;
    overflow:hidden;
    align-items: center;
    justify-content: center;
}
#insta img,#X img,#lnkdin img{
    height: 30px;
    width:30px;
    float:left;
    margin-top: 10px;
}
#insta img:hover,#lnkdin img:hover,#X img:hover{
   margin-bottom: 10px;
   
   margin-left:10px;
    transform: scale(1.2);
}
.image{
    width:34.0086%;
    height: 480px;
    float:left;
   /* background-color: rgba(7, 27, 99, 0.932);*/
    padding:60px 0px 0px 80px;
    
    
}
.image img{
    height: 400px;
    width: 400px;
    border:2mm solid peru;
    border-radius: 50%;
    object-fit: cover;
   
}