/*CSS Reset */
:root{
    --cor-de-fundo: #e3dfff;
    --cor-de-link: #000000;
 }
 
 body {
     box-sizing: border-box;
     background-color: var(--cor-de-fundo) ;
     font-family: 'Raleway';
     margin: 0;
     padding: 0;
     line-height: 1;
 }
 ol, ul,li {
     list-style: none;
 }
 a{
     text-decoration: none;
     color: var(--cor-de-link);
 }

 nav li :hover{
    color:#a37dfb ;
}
 
 /*BEM (Bloque, Elemento, Modificador)
 
 /*Sección Menu*/
 header{
     background-color: rgb(209, 195, 253);
     padding: 20px;
 }
 .menu__list__item__contato{
     display: none;
 }
 
 /*Sección Title*/
 section.title{
 padding-top: 30px;
 }
 .title__profile {
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.title__profile:hover {
    transform: scale(1.1);
}
 .title__bio{
     font-size: 45px;
     font-weight: bold;
 }
  /*correo*/
 .correo_container{
     display: flex;
     flex-direction: row;
     justify-content: center;
 }
 .correo_container input{
    display: none;
 }
 .correo_container button{
     border: none;
     background: none;
     cursor: pointer;
     font-size: 1em;
 }
 .correo_container img{
   padding-left: 5px;

 }
  /*Redes sociales*/
 .title__network li{
     background: #a37dfb;
     border-style: solid;
     border-width: 5px;
     border-radius:5px;
     border-color: #a37dfb;
 }
 .title__network :hover{
     background: #692afb;
     border-color: #692afb;
 }
 
 /*Sección About*/
 
 .about{
         display: flex;
         flex-direction: column;
         width: 60%;
         padding-left: 20%;
     }
 
 .about__container{
         display: flex;
         flex-direction: column;
         background:#c8bffe;
         border: 2px solid #c8bffe;
         border-radius: 10px;
         padding-left: 40px;
 }
 
 .skills__line{
     background:#c8bffe ;
     border: 2px solid #c8bffe;
     border-radius: 10px;
     text-align: center;
     width: 50%;
 }
 .skills__box:hover{
    transform: scale(1.3);
 }
 /*Sección Hobbies*/
 .hobbies__line{
     background: #c8bffe;
     border: 2px solid #c8bffe;
     border-radius: 10px;
 }
 .hobbies__box:hover{
    transform: scale(1.3);
 }
 
 /* Experiencia Académica*/

 .academic__courses__box{
    display: flex;
    align-items: center;
    background: #c8bffe;
    border-radius: 10px;
    
 }
 /* experiencia*/
 .experience__box{
    background: #c8bffe;
    border-radius: 10px;
 }
 .experience__info-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
 }
 .experience button {
    background: #8e7aff;
    color: #000000;
    padding: 14px 28px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
    border: 1px solid #8b5ff0;
}
 .experience button:hover{
     background: #8b5ff0;  
 }
 
 
 
 /*Contacto*/
 .formcontato{
    background: #c8bffe;
 }
 .formcontato__text{
     padding-left: 20px;
 }
  .formcontato__form{
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items:flex-start;
  }
 .formcontato__input{
     background: transparent;
     border-radius: 5px;
     border: 2px solid #8e7aff;
 }
 .formcontato__textarea{
     background: transparent;
     border-radius: 5px;    
 }
 .formcontato__botao{
    background: #8e7aff;
    color: #000000;
    padding: 14px 28px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
    border: 1px solid #8b5ff0;
}
.formcontato__text button:hover{
    background:#8b5ff0  ; 

}
 /*footeer*/
 footer{
     display: flex;
     padding: 2rem;
     justify-content: center;
     background-color:rgb(209, 195, 253);
 }
 .footer__rodape{
     display: flex;
     flex-direction: row;
     padding-top: 20px;
     gap: 10px;
 }
 
 
 /*Tablet*/
 @media (min-width: 500px) {
 
 /* Menú */
header{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     gap: 10px;
 }
 .menu__logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
 }

 .menu__list{
     display: flex;
     flex-direction: row;
     gap: 10px;
    
 }
 /*title*/
 .title{
     display: flex;
     align-content: center;
     width: 80%;
 }
 .title__div{
     display:flex;
     flex-direction: row-reverse;
     align-items: center;
     padding-left: 20px;
     gap: 30px;
     justify-content: space-around;
 }
 .title__container{
     display: flex;
     flex-direction: column;
     text-align: center;
     padding-left: 15%;
 }
 .title__profile{
     width: 25%;
 }
 .title__network{
     display: flex;
     justify-content: center;
     gap: 20px;
     align-items:center;
     
 }
 .about h2{
     text-align: center;
 }
 /*Skills*/
 .skills{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   padding-top: 50px;
  
   
 }
 .skills__line{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 50px;
     padding-left: 20px;

 }
 
 
 /*Hobbies*/
 .hobbies {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 50px;
     padding-left: 20px;
 
 }
 .hobbies__line{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 50px;
     padding: 20px;
 }
 .hobbies__box ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0px;
 }
 
 /*Formación Académica*/
 .academic{
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 50px;
     padding-left: 20px;
     
 }
 .academic__courses__box{
    padding: 20px;
 }
 .academic__courses__list{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
 }
 
 /*Experiencia Profesional*/
 .experience{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding-top: 50px;
     align-items: center;
     flex-direction: column;
 }

 .experience__box{
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     width: 60%; 
     justify-content: center;
     padding: 20px;
 }

 .experience__img{
     width: 50%;
     border-radius: 10px;
     transition: transform 0.3s ease;
    }
         
.experience__img:hover{
        transform: scale(1.1);
      }

 .formcontato{
     display: flex; 
     flex-direction:row ; 
     flex-wrap: nowrap;
     gap: 20px;
     width: 80%;
     justify-content: center;
     align-items: center;
     padding: 20px;
     border-radius: 10px;
     margin: 50px;
     
 }
 .imagen_contacto{
     width: 90%;
     border-radius: 10px;
     transition: transform 0.3s ease;
}
     
  .imagen_contacto:hover{
    transform: scale(1.1);
  }
  }
 
 /*Mobile*/
 @media (max-width: 500px) {
 
 /*Menu*/
 header{
     display: flex;
     justify-content: space-around; 
     align-items: center;
    
 }
 .menu__logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
 }
 .menu__header{
     display: flex;
     flex-direction: row;
     align-items: center;
    
 }
 .menu__list{
     display: none;
 }
 .menu__list__item__contato{
     display:flex;
     align-items: center;
 }
 /*Titulo*/
 .title{
     display: flex;
 }
 .title__div{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 .title__profile{
     width: 40%;
 }
 .title__container{
     display: flex;
     flex-direction: column;
     width: 90%;
     align-items: center;
 }
 .correo_container button{
     width: 100%;
 }
 
 .title__network{
     display: flex;
     flex-direction: row;
     gap: 20px;
     padding-left: 0;
 }
 
 /*Sección sobre mi*/
 .about{
     display: flex;
     flex-direction: column;
     width: 90%;
     padding-left: 5%;
     
 }
 .about__container{
     display: flex;
     flex-direction: column;
     
     padding-left: 30px;
 }
 
 /*Skills*/
 .skills{
     display: flex;
     flex-direction: column;
     padding-left: 20px;
     width: 90%;
 }
 .skills__line{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 20px;
     white-space: nowrap;
     width: 100%;
 }
 
 /*Hobbies*/
 .hobbies{
     display: flex;
     flex-direction: column;
     padding-left: 20px;
     width: 90%;
 }
 .hobbies__line{
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-evenly;
     gap: 50px;
     padding: 10px;
 }
 .hobbies__box ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
 }
  
 /*Formación Académica*/
 .academic{
     display: flex;
     flex-direction: column;
     padding-left: 20px;
     width: 90%;
 }
 .academic__courses__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
 }
 
 /*Experiencia Profesional*/
 .experience{
     display: flex;
     flex-direction: column;
     padding-left:20px;
     width: 95%;
 }
 .experience__box{
     display: flex;
     flex-direction: column-reverse;
     gap: 20px;
     width: 90%; 
 }
  /*Contacto*/
  .formcontato{
     display: flex;
     flex-direction: column;
     width: 100%;
     
  }
  .imagen_contacto{
    width: 90%;
    padding: 20px;
    
 }
 
 
 /*Footer*/
 }