style.css

:root{
    
   --color-de-fondo: #F5F5F5;
   --color-de-link: #000;
   --color-titulos:#464646;
   --color-fondo-azul:#eaf2fd;
   --color-cajas:#fbfbfb;
   --azul-botones:#2a7ae4;
}

body {
    box-sizing: border-box;
    background-color: var(--color-de-fondo) ;
    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);
}



/*Sección Menu*/

section.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    height: 10vh;
    margin: 0px 153px;
    
    
}

/*Sección Title*/
header.menu__header{
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-titulos);
    

}
section.menu nav ul.menu__list{
    display: flex;
    justify-content: space-between;
    font: 16px;
    width: 750px;
}

section.menu nav ul.menu__list li:nth-child(6){
    color: black;
    font-weight: 800;

}
section.title{
    margin: 0 153px;
    width:80% ;
    color: var(--color-titulos);
}
section.title div.title__div{
    justify-content: space-around;
    align-content: flex-start;
    display: flex;
    flex-direction: row-reverse;

}
section.title div.title__container h2{
    font-size: 50px;
    font-weight: 700;
    line-height: 61px;
    text-align: center;
}



section.title div.title__div div.title__container h3{
    font-size: 17px;
    line-height: 23px;
    width: 600px;
    margin-bottom: 30px;
    text-align:center;
    margin-left: 100px;
}
section.title div.title__div div.title__container ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0px;
    width: 500px;
    font: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    margin-left: 160px;
}



section.skills{
    margin: 64px 100px;


}
section.skills h3.skills__title{
    font-size: 32px;
    text-align: center;
}
section.skills div.skills__line{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
}
section.skills div.skills__box{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    background-color: var(--color-cajas);
    margin: 22px 15px 22px 50px;
    width: 150px;
    height: 160px;
}
section.skills div.skills__box ul{
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-titulos);

}


/* Experiencia Académica*/

section.academic{
    padding: 64px 0;
    

}
section.academic h2.academic__title{
    font-size: 32px;
    text-align: center;
    

}
section.academic div.academic__courses{
    display:flex;
    flex-direction: row;
    
    justify-content: center;
    text-align: center;

}
section.academic div.academic__courses__box{
    width: 26.6rem;
    margin: 0 1 rem;

}
section.academic div.academic__courses__box ul{
    margin: 32px;
    padding: 0;
    
}
section.academic div.academic__courses__box ul li{
    padding: 0;
    margin: 32px;

}
div.academic__courses__box ul li.academic__courses__item__img{
    background-color: var(--color-cajas);
    padding: 8%;

}



/* experiencia*/

section.experience{
    padding: 64px 0;
    margin: 64px 100px;   
    
    
}
section.experience h2.experience__section__title{
    font-size: 32px;
    text-align: center;
}

section.experience div.experiencie__box{
   
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    background-color: var(--color-cajas);
    margin: 22px 15px 40px 100px;
    height: 30%;
    width: 30%;
    
   
    
}
section.experience div.experiencie__box div.experience__info-container{
    padding:  0px;
    margin: 70px;
    text-align: center;
    

}
section.experience div.experiencie__box div.experience__info-container h2{
    font-size: 25px;
    font-weight: 600;
}
section.experience div.experiencie__box div.experience__info-container h3{
    font-size: 18px;
    color: var(--color-titulos);
}
    

section.experience div.experiencie__box img.experience__img{
  height: 100%;
  width: 100%;
 
}
section.experience div.experiencie__box div.experience__info-container div.experience__description button{
   font-size: 15px;
   background-color: white;
   border-color: white;
   padding: 8px;
   font-weight: 300;

    
    
}

/*Contacto*/

section.formcontato{
    
   
    display: flex;
    flex-direction: column;
    
    
    

}
section.formcontato div.formcontato__text h2{
    font-size: 32px;
    text-align: center;
    
}
section.formcontato div.formcontato__text h3{
    text-align: center;  
    font-size: 18px;
    
     
 }

section.formcontato div.formcontato__text form.formcontato__form{
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
    padding: 30px; 
    
    align-items: center;
    margin-left: 23%;
    width: 50%;
    height: 50%;
    font-size: 18px;
}

section.formcontato div.formcontato__text form.formcontato__form button{
    font-size: 20px;
    font-weight: 300;
    background-color: white;
   border-color: white;
}

/*footeer*/

section.footer{
    text-align: center;
    font-size: 15px;
    color: #464646;

   
}




/*Tablet*/


@media  (max-width: 768px) {

/* Menú */

section.menu nav ul.menu__list{
    width: 168px;
    height: 19px;
    font-weight: 500;
    font-size: 14px;
    line-height: 19px;
    
    order: 1;
    flex-grow: 0;
    flex-direction: column;
    align-items:stretch;
    text-align: left;
    margin-left: 0;

}
section.title{ 
    width: 524px;
    height: 52px;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    padding: 3rem;

}
/*title*/

section.title div.title__div div.title__container ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
    gap: 10px;
    width: 100px;
    height: 60px;
    flex: none;
    order: 0;
    flex-grow: 0;
    

    
}
section.title div.title__div div.title__container ul{
   
    width: 200px;
    height: 60px;
    justify-content: space-between;
    font-size: 15px;
    margin-left: 0%;
    
    
   
   
}

section.title div.title__div div.title__container h3{
    width: 524px;
    height: 38px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    flex: none;
    order: 1;
    align-self: strech;
    flex-grow: 0;
    padding: 5%;
    margin-left: 0%;
}
section.skills {
    margin-top: 10rem;
    margin-left: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 32px;
    width: 768px;
    height: 390px;
    flex: none;
    order: 3;
    align-self: stretch;
    flex-grow: 0;
}

/*Skills*/

section.skills div.skills__box{
    display: flex;
    flex-direction: column;
    width: 100%;
    
    
    
    width: 75px;
    height: 80px;
}
section.skills div.skills__line{
   
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   
    
    
    
}

/*Formación Académica*/
section.academic{
    background-color: var(--color-de-fondo);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 32px;
    width: 750px;
    height: 291px;
    flex: none;
    order: 5;
    align-self: stretch;
    flex-grow: 0;
    margin-left: 20%;
  

   
}
section.academic h2.academic__title{
   width: 233px;
   height: 26px;
   font-weight: 700;
   font-size: 22px;
   line-height: 26px;
   flex: none;
   order: 0;
   flex-grow: 0;
    

}
section.academic div.academic__courses{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 16px;
    width: 704px;
    height: 169px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

}


/*Experiencia Profesional*/


section.experience{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 32px;
   gap: 16px;
   width: 768px;
   height: 1100px;
   flex: none;
   order: 6;
   align-self: stretch;
   flex-grow: 0;
    
    
}
section.experience h2.experience__section__title{
    width: 268px;
    height: 26px;
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    text-align: center;
    flex: none;
    order: 0;
    flex-grow: 0;
    padding-bottom: 1rem;
}
section.experience div.items__experiencia{
   
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 0px;
   gap: 64px;
   width: 704px;
   height: 1911px;
   flex: none;
   order: 1;
   align-self: stretch;
   flex-grow: 0;
}


section.experience div.experiencie__box{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 704px;
    height: 500px;
    flex: none;
    order:0;
    align-self: stretch;
    flex-grow: 0;
    margin-left: 0%;
   
    
   
    
}
section.experience div.experiencie__box img.experience__img{
    width: 700px;
    height: 60%;
    border-radius: 0px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    margin-left: 0%;
   
  }
section.experience div.experiencie__box div.experience__info-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: auto;
    gap: 8px;
    width: 704px;
    height: 20%;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
   

    

}

section.experience div.experiencie__box div.experience__info-container div.experience__title{
    width: 704px;
    height: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}
section.experience div.experiencie__box div.experience__info-container div.experience__text{
    width: 704px;
    height: 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

section.experience div.experiencie__box div.experience__info-container div.experience__description button{
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   padding: 0px;
   gap: 16px;
   width: 100px;
   height: 40px;
   flex: none;
   order: 2;
   flex-grow: 0;
   box-sizing: border-box;
   
}


/*Contacto*/
section.formcontato{
    
   
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    gap: 10px;
    width: 768px;
    height: 637px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    
    
    

}
section.formcontato div.formcontato__text h2{
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    height: 40px;
    text-align: left;
   
}
section.formcontato div.formcontato__text h3{
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    height: 20px;
    text-align: left;
   
}
section.formcontato div.formcontato__text h2,h3{
   
    margin-left: 20%;
    
    width: 656px;
   
    flex: none;
    order: 0;
    flex-grow: 0;
   
    
    
}


section.formcontato div.formcontato__text form.formcontato__form{
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;  
    padding: 0px; 
    
   gap: 32px;
    margin-left: 20%;
    width: 704px;
    height: 397px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

section.formcontato div.formcontato__text form.formcontato__form button{
    font-size: 20px;
    font-weight: 300;
    background-color: white;
   border-color: white;
}

/*footeer*/

section.footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding:32px;
    gap: 10px;
    width: 768px;
    height: 102px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
    margin-left: 10%;
   
    color: #464646;

   
}

}