@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --Font-principal: 'Raleway', serif;
    --background-color-1: #f5f5f5;
    --background-color-2: #EAF2FD;
    --Form-Font-color-1: #A2A2A2;
    --Form-border-color: #C8C8C8;
    --Space-blanck-white: #FFFFFF;
    --principal-blue: #2A7AE4;
    --principal-font-color: #464646;
    --Font-regular: 400;
    --Font-semiBold: 600;
    --Font-Medium: 500;
    --Font-Bold: 700;
}

.body{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    background-color: var(--background-color-1);
}


/*Header*/
.Header{
    display: flex;
    align-items: center;
    padding-left: 0.7rem;
    padding: 1rem;
}

.Header_Nav{
    font-family: var(--Font-principal);
    font-size: 14px;
    color: var(--principal-font-color);
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin-left: auto;
}

/*Se ocultan los elementos Mobile first*/
.Header_Nav li:nth-child(1){
    display: none;
}
.Header_Nav li:nth-child(2){
    display: none;
}
.Header_Nav li:nth-child(3){
    display: none;
}
.Header_Nav li:nth-child(4){
    display: none;
}
.Header_Nav li:nth-child(5){
    display: none;
}

/*Header Autor*/
.Header_H2{
    padding-left: 0.5rem;
    padding-right: 1rem;
    font-family: var(--Font-principal);
    font-weight: var(--Font-Bold);
    font-size: 16px;
    color: var(--color-1);
}


/*Sección Perfil*/
.Main_sect_Profile{
    display: flex;
    box-sizing: border-box;
    flex-direction: column-reverse;
    padding: 1rem 1rem 1rem 1rem;
    width: 100%;
}

.Main_sect_Profile_texto{
    padding-top: 1rem;
}

.Main_sect_Profile_Imagen{
    width: 6rem;
    height: auto;
}

.Main_sect_Profile_texto_H1{
    font-family: var(--Font-principal);
    font-size: 22px;
    font-weight: var(--Font-Bold);
    padding-bottom: 1rem;
    color: var(--principal-font-color);
}

.Main_sect_Profile_texto_p{
    font-family: var(--Font-principal);
    font-size: var(--Font-regular);
    color: var(--principal-font-color);
    padding-bottom: 1rem;
}

    /*Redes de contacto*/
.Main_sect_Profile_texto_networks{
    font-family: var(--Font-principal);
    font-size: 14px;
    font-weight: var(--Font-semiBold);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Main_sect_Profile_texto_networks_li{
    display: flex;
    gap: 1rem;
    margin: auto;
}

/*Sección Sobre mi*/
.Main_sect_Sobremi{
    background-color: var(--background-color-2);
    padding: 1rem;
    font-family: var(--Font-principal);
    color: var(--principal-font-color);
}

.Main_sect_Sobremi_H2{
    font-size: 22px;
    font-weight: var(--Font-Bold);
    padding-bottom: 1rem;
}

.Main_sect_Sobremi_paragraph{
    font-size: 14px;
    font-weight: var(--Font-regular);
    padding-bottom: 1rem;
}


/*Sección Skills*/

.Main_sect_Skills_H2{
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: var(--Font-principal);
    font-weight: var(--Font-Bold);
    font-size: 22px;
    color: var(--principal-font-color);
}

    /*Div contenedor*/
.Main_sect_Skills_Images{
    display: flex;
    padding: 0rem 0.5rem;
    margin-bottom: 0;
    flex-flow: row wrap;
    flex-grow: 1;
    height: 28.125rem;
    justify-content: space-between;
}

    /*Contenedor Imagenes individual*/
.Main_sect_Skills_Images_Figure{
    width: 9.75rem;
    height: 7.375rem;
    padding:1rem;
    margin: 1rem 0.5rem;
    text-align: center;
    font-family: var(--Font-principal);
    font-size: 16px;
    font-weight: var(--Font-Bold);
    background-color: var(--Space-blanck-white);
    box-sizing: border-box;
}

    /*Propiedades de imagen*/
.Main_sect_Skills_Images_Figure img{
    height: 60%;
    width: auto;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/*Sección Hobbies*/
.Main_sect_Hobbies_H2{
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: var(--Font-principal);
    font-weight: var(--Font-Bold);
    font-size: 22px;
    color: var(--principal-font-color);
}

    /*Div contenedor*/
.Main_sect_Hobbies_Images{
    display: flex;
    padding: 0rem 0.5rem;
    margin-bottom: 0;
    flex-flow: row wrap;
    flex-grow: 1;
    height: 28.125rem;
    justify-content: space-between;
}

    /*Contenedor Imagenes individual*/
.Main_sect_Hobbies_Images_Figure{
    width: 9.75rem;
    height: 7.375rem;
    padding:1rem;
    margin: 1rem 0.5rem;
    text-align: center;
    font-family: var(--Font-principal);
    font-size: 16px;
    font-weight: var(--Font-Bold);
    background-color: var(--Space-blanck-white);
    box-sizing: border-box;
}

    /*Propiedades de imagen*/
.Main_sect_Hobbies_Images_Figure img{
    height: 60%;
    width: auto;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

/*Sección Formación*/
.Main_sect_Formacion{
    background-color: var(--background-color-2);
}

.Main_sect_Formacion_H2{
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    font-family: var(--Font-principal);
    font-weight: var(--Font-Bold);
    font-size: 22px;
    color: var(--principal-font-color);
}

    /*Div contenedor General*/
.Main_sect_Formacion_Images{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 33.6875rem;
    padding: 1rem 2rem 2rem 2rem;
}

    /*Div contenedor Individual*/
.Main_sect_Formacion_Images_Box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18.5rem;
    height: 10.5625rem;
    text-align: left;
    font-family: var(--Font-principal);
    color: var(--principal-font-color);
}

    /*Div contenedor Imagen individual y textos*/
.Main_sect_Formacion_Images_Box_Img{
    background-color: var(--Space-blanck-white);
    height: 7.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Main_sect_Formacion_Images_Box_Img img{
    height: 4rem;
    width: auto;
}

.Main_sect_Formacion_Images_Title_H3{
    font-size: 16px;
    font-weight: var(--Font-Bold);
}

.Main_sect_Formacion_Images_Text_P{
    font-size: 14px;
    font-weight: var(--Font-Medium);
}

/*Sección Experiencia profesional (Projects)*/
.Main_sect_Projects{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--Font-principal);
    color: var(--principal-font-color);
}

.Main_sect_Projects_H2{
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    font-weight: var(--Font-Bold);
    font-size: 22px;
}

    /*Contenedor Imagen y botones*/

.Main_sect_Projects_Div_principal{
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding: 0 2rem 2rem 2rem;
    justify-content: space-between;
}

.Main_sect_Projects_article{
    display: flex;
    flex-direction: column;
    align-items: left;
}

.Main_sect_Projects_article_left img{
    width: 100%;
    padding-bottom: 1rem;
}

.Main_sect_Projects_article_right{
    height: 5.6875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Main_sect_Projects_article_right_tittle{
    font-size: 14px;
    font-weight: var(--Font-Bold);
}

.Main_sect_Projects_article_right_p{
    font-size: 14px;
    font-weight: var(--Font-Medium);
}

    /*Botones*/
.Main_sect_Projects_article_right_buttons{
    font-size: 14px;
    font-weight: var(--Font-semiBold);

}

.Main_sect_Projects_article_right_buttons_1{
    width: 6.75rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    border-color: var(--principal-blue);
    color: var(--principal-blue);
}
    /*Boton al pasar sobre él*/
.Main_sect_Projects_article_right_buttons_1:hover{
    background-color: #e2e2e2ea;
}

.Main_sect_Projects_article_right_buttons_2{
    width: 6.75rem;
    height: 2.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
    background-color: var(--principal-blue);
    color: var(--Space-blanck-white);
    border: 1px solid var(--principal-blue);
}

    /*Boton al pasar sobre él*/
.Main_sect_Projects_article_right_buttons_2:hover{
        background-color: #589ef5;
}

/*Sección Contacto (Formulario)*/
.Main_sect_contact{
    background-color: var(--background-color-2);
    height: 40rem;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    font-family: var(--Font-principal);
}

.Main_sect_contact_image{
    display: none;
}

.Main_sect_contact_Form_Text{
    height: 6.875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.Main_sect_contact_Form_Text_h2{
    font-size: 22px;
    font-weight: var(--Font-Bold);
    color: var(--principal-font-color);
    padding-bottom: 0.5rem;
}

.Main_sect_contact_Form_Text_p{
    font-size: 16px;
    font-weight: var(--Font-Medium);
    color: var(--principal-font-color);
}

.Main_sect_contact_Form_Form{
    display: flex;
    flex-direction: column;
    gap: 2rem;  
    padding-top: 2rem;
    position: relative;
}

    /*Personalización de los campos del formulario*/
.form-input{
    display: flex;
    width: 95%;
    height: 1.9rem;
    padding: 0.8rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 16px;
    color: var(--Form-Font-color-1);
    outline: none;
    position: relative;
    box-shadow: 0 1px 0 var(--Form-border-color);
}
    
.form-textarea{
    width: 95%;
    height: 6.8125rem;
    padding: 1.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 16px;
    color: var(--Form-Font-color-1);
    line-height: 1.5;
    resize: none;
    box-shadow: 0 1px 0 var(--Form-border-color); /*Desplazamiento Horizontal /Desplazamiento Vertical / Desenfoque*/
}

.form-label-name{
    position: absolute; /*Campos flotantes con este atributo*/
    left: 0.75rem;
    top: 2.5rem;
    font-size: 12px;
    font-weight: var(--Font-regular);
    color: var(--principal-blue);
    display: none;
}

.form-label-email{
    position: absolute;
    left: 0.75rem;
    top: 8rem;
    font-size: 12px;
    font-weight: var(--Font-regular);
    color: var(--principal-blue);
    display: none;
}

.form-label-subject{
    position: absolute;
    left: 0.75rem;
    top: 13.5rem;
    font-size: 12px;
    font-weight: var(--Font-regular);
    color: var(--principal-blue);
    display: none;
}

.form-label-message{
    position: absolute;
    left: 0.75rem;
    top: 19rem;
    font-size: 12px;
    font-weight: var(--Font-regular);
    color: var(--principal-blue);
    display: none;
}

    /* Mostrar el label cuando el input o textarea está enfocado o tiene contenido */
.form-input:focus + .form-label-name,
.form-input:not(:placeholder-shown) + .form-label-name {
    display: block;
}

.form-input:focus + .form-label-email,
.form-input:not(:placeholder-shown) + .form-label-email {
    display: block;
}

.form-input:focus + .form-label-subject,
.form-input:not(:placeholder-shown) + .form-label-subject {
    display: block;
}

.form-textarea:focus + .form-label-message,
.form-textarea:not(:placeholder-shown) + .form-label-message {
    display: block;
}

    /*Cambiar de ubicación el texto del  usuario*/
.form-input:focus::placeholder{
    transform: translateY(0.2rem);
}

.form-input:focus{
    padding: 1.6rem 0.75rem 0 0.75rem;
}

    /*Boton Enviar*/
.form-button{
    width: 8.3125rem;
    height: 2.5rem;
    cursor: pointer;
    background-color: var(--principal-blue);
    color: var(--Space-blanck-white);
}

.form-button:hover{
    background-color: #589ef5;
}

/*Footer*/
.Footer{
    font-family: var(--Font-principal);
    height: 6.375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: var(--Font-Medium);
    gap: 0.5rem;
}

/*Media queries*/

@media(min-width:768px) {

        /*Cambio Navegación tablet*/
    .Header{
        padding: 1rem 2rem;
    }
    
    .Header_Nav{
        font-size: 16px;
    }

    .Header_Nav li:nth-child(6){
        font-weight: var(--Font-Bold);
    }

        /*Cambio Sección Perfil tablet*/
    .Main_sect_Profile{
        flex-direction: row;
        align-items: center;
        padding: 2rem;
    }

    .Main_sect_Profile_Imagen{
        height: 9.125rem;
        width: auto;
        padding-left: 2rem;
    }

    .Main_sect_Profile_texto{
        padding-right: 2rem;
    }

    .Main_sect_Profile_texto_H1{
        padding-bottom: 0.5rem;
    }

    .Main_sect_Profile_texto_p{
        font-size: 16px;
        padding-bottom: 0.5rem;
    }

    .Main_sect_Profile_texto_networks_li{
        font-size: 16px;
    }

        /*Cambio Sección sobre mí tablet*/
    .Main_sect_Sobremi{
        padding: 2rem 3rem 2rem 2rem;
    }
    
       /*Cambio Sección Skills tablet*/ 
    .Main_sect_Skills_Images{
        padding: 0 2rem 2rem 2rem;
        height: 19rem;
    }

    .Main_sect_Skills_Images_Figure{
        width: 14rem;
        margin: 1rem 0;
    }

        /*Cambio Sección Skills tablet*/ 
    .Main_sect_Hobbies_Images{
        padding: 0 2rem 2rem 2rem;
        height: 19rem;
    }
    
    .Main_sect_Hobbies_Images_Figure{
        width: 14rem;
        margin: 1rem 0;
    }

        /*Cambio Sección Formación tablet*/ 
    .Main_sect_Formacion_Images{
        height: 12.5625rem;
        flex-direction: row;
    }

    .Main_sect_Formacion_Images_Box{
        width: 14rem;
    }

        /*Cambio Sección Contacto tablet*/
    .Main_sect_contact{
        height: 37.8rem;
    }
    .Main_sect_contact_Form_Text{
        height: 4.5rem;
    }    
    
}

@media(min-width:1025px) {
    
        /*Cambio Navegación PC*/
    .Header{
        font-size: 16px;
        padding: 2rem 6rem;
        text-align: center;
    }

    .Header_Nav{
        gap: 2rem;
    }

        /*Se muestran los elementos ocultos del Nav*/
    .Header_Nav li:nth-child(1){
        display: block;
    }
    .Header_Nav li:nth-child(2){
        display: block;
    }
    .Header_Nav li:nth-child(3){
        display: block;
    }
    .Header_Nav li:nth-child(4){
        display: block;
    }
    .Header_Nav li:nth-child(5){
        display: block;
    }

        /*Cambio Navegación PC*/
    .Main_sect_Profile{
        padding: 2rem 6rem;
        height: 27rem;
        justify-content: space-between;
    }


    .Main_sect_Profile_Imagen{
        height: 23rem;
        width: auto;
        padding-left: 0;
    }
    
    .Main_sect_Profile_texto{
        padding-right: 1rem;
        width: 47rem;
    }

    .Main_sect_Profile_texto_H1{
        padding-bottom: 1.5rem;
        font-size: 42px;
    }

    .Main_sect_Profile_texto_p{
        font-size: 22px;
        padding-bottom: 1.5rem;
    }
        
        /*Cambio Sección Sobre mí PC*/
    .Main_sect_Sobremi{
        padding: 4rem 6rem;
    }

    .Main_sect_Sobremi_H2{
        font-size: 32px;
    }

    .Main_sect_Sobremi_paragraph{
        font-size: 16px;
    }

        /*Cambio Sección Skills PC*/
    .Main_sect_Skills_H2{
        font-size: 32px;
        padding: 2rem 6rem;
    }

    .Main_sect_Skills_Images{
        padding: 0 6rem 5.5rem 6rem;
        height: auto;
    }
        
    .Main_sect_Skills_Images_Figure{
        width: 11rem;
        height: 10.875;
        margin: 0;
    }

        /*Cambio Sección Hobbies PC*/
    .Main_sect_Hobbies_H2{
        font-size: 32px;
        padding: 0 6rem 2rem 6rem;
    }
    
    .Main_sect_Hobbies_Images{
        padding: 0 6rem 5.5rem 6rem;
        height: auto;
    }
            
    .Main_sect_Hobbies_Images_Figure{
        width: 11rem;
        height: 10.875;
        margin: 0;
    }

        /*Cambio Sección Formación PC*/
    .Main_sect_Formacion_H2{
        font-size: 32px;
        padding: 5.125rem 6rem 2rem 6rem;
    }

    .Main_sect_Formacion_Images{
        height: 21.6875rem;
        padding: 0 6rem 5.125rem 6rem;
        flex-direction: row;
    }

        /*Div contenedor Individual PC*/
    .Main_sect_Formacion_Images_Box{
        width: 22rem;
        height: 19.6875rem;
    }
    
        /*Div contenedor Imagen individual y textos PC*/
    .Main_sect_Formacion_Images_Box_Img{
        height: 17.875rem;
    }

    .Main_sect_Formacion_Images_Box_Img img{
        height: 8.125rem;
    }
    
    .Main_sect_Formacion_Images_Title_H3{
        font-size: 22px;
        padding-top: 0.5rem;
    }
    
    .Main_sect_Formacion_Images_Text_P{
        font-size: 16px;
        padding-top: 0.5rem;
    }

        /*Sección Projects PC*/
    .Main_sect_Projects{
        padding: 2rem 6rem;
    }

    .Main_sect_Projects_H2{
        padding: 0 6rem 2rem 6rem;
        font-size: 32px;
    }

    .Main_sect_Projects_Div_principal{
        padding: 0;
    }

    .Main_sect_Projects_article{
        flex-direction: row;
        align-items: center;
    }

    .Main_sect_Projects_article_left img{
        width: 60rem;
        padding: 0 1rem 0 0;
        align-items: flex-start;
    }

    .Main_sect_Projects_article_right{
        width: 16.275rem;
    }

    .Main_sect_Projects_article_right_tittle{
        font-size: 22px;
        padding-bottom: 0.5rem;
        text-align: center;
    }
    
    .Main_sect_Projects_article_right_p{
        font-size: 16px;
        padding-bottom: 0.7rem;
        text-align: center;
    }
    
        /*Botones*/
    .Main_sect_Projects_article_right_buttons{
        font-size: 16px;
        font-weight: var(--Font-regular);
    
    }
    
    .Main_sect_Projects_article_right_buttons_1{
        width: 7.25rem;
        height: 3.1875rem;
    }
    
    .Main_sect_Projects_article_right_buttons_2{
        width: 7.25rem;
        height: 3.1875rem;
    }
    
        /*Contacto PC*/
    .Main_sect_contact{
        height: 49.25rem;
        flex-direction: row;
        padding: 4rem 6rem 0 6rem;
        justify-content: center;
        align-items: center;
    }

    .Main_sect_contact_image{
        display: flex;
        height: 39.25;
        width: 30.375rem;
        align-items: center;
    }

    .Main_sect_contact_Form_Form{
        height: auto;
        padding-left: 1rem;
    }

    .Main_sect_contact_Form_Text{
        height: 5.25rem;
        padding-left: 1.5rem;
    }

    .Main_sect_contact_Form_Text_h2{
        font-size: 32px;
    }

        /*Ajuste de indicadores formulario PC*/
    .form-label-name{
        left: 1.75rem;
    }

    .form-label-email{
        left: 1.75rem;
    }

    .form-label-message{
        left: 1.75rem;
    }

    .form-label-subject{
        left: 1.75rem;
    }

        /*Boton Enviar PC*/
    .form-button{
        width: 9rem;
        height: 3.1875rem;
        cursor: pointer;
    }

}