*{ 

        padding: 0px;
        margin: 0px;

}

html{ 

        scroll-behavior: smooth;
}


header{ 

        width: 98%; 
        padding-top: 30px;
        text-align: center;
 
                 
                
 }

body {
        box-sizing: border-box;
        width: 98%  ;
        font-family: 'Special Elite', cursive;
        color: rgba(1, 1, 1, 0.678);
        padding: 10px;
        margin: 5px;
        
       

}


.navegacion-container{
        position: sticky ;
        top:0;
        z-index: 1;
        padding: 5px;
        width: 98%;
       
}

.navegacion {  
        
        height: 100px;
        text-align: center;
        text-decoration: none;
        list-style: none;   
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
}

.menu{

                text-decoration: none;
                padding: 10px;
                margin: 5px;
                line-height: 20px;
                width: 150px;
                font-size: x-large;
                
}

li.menu:hover{ 
                background-color: rgba(229, 223, 213, 0.567);
                padding: 20px;
                border-radius: 10px;
                width: fit-content;
                transition: 1s;}


a { list-style: none; text-decoration: none;}



a:visited{ 
                list-style: none; color: grey;
}

.container{

               
                margin-right: 15px;
                margin-left: 15px;
                padding: 30px;
                width:98%;
                height: auto;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
                
}



 

.flexitem {  
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 90%;
                

}

.gallery { 
        
        max-width: 500px;
        opacity: 0.6;
        transition-property: width;
        transition-duration: 2s;
        transition-timing-function: cubic-bezier(0, 0, 0.86, 0.14);
        transition-delay: 0s;


}

img:hover { 
        opacity: 10;
        border: 10px solid rgba(255, 255, 255, 0.651);
        
}

.aboutme { 

     
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
               margin-top: 100px;
        }
      
       .aboutme__container { 

                display: flex;
                justify-content: center;
                align-items: center;
                gap: 50px;
                width: 60%;
       }
        .aboutme__image img {
        
         min-width: 400px;
          min-height: 400px;
        
        
        }




.form{
                margin-top: 30px;        
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px;
            
      
      
        


}

.form-container{ 

                display: flex;
                width: 48%;
                flex-direction: column;
                flex-wrap: wrap;
                align-items: center;
                align-content: center;


}

.form-input{ 

                width: 90%;
                margin: 15px;
                height: auto;
                padding: 5px;
}

.form-input-button{  

background-color: rgba(130, 136, 136, 0.658);
width:80px;
border-radius: 10px;
padding: 10px;
border-style: initial;

}



.socialMedia{ 

                background-color: rgba(63, 62, 60, 0.212);
                padding: 60px;
                margin: 0;
                text-align: center;
   
}

@media  only screen and ( max-width:800px) {
        .form-input { width:100% }

.navegacion {  display: none ;}

.header { font-size: 10px;}



 }








@media  (max-width: 700px) {
        

        .aboutme__container { 


                flex-direction: column; gap: 20px;
        }
        
}