@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap');
/* Se definen colores, tamaños y tamaños de fuente predeterminados para trabajar de una forma mas sencilla */
:root {
    /* COLORES */
    --color_primario: #662e1c;
    --color_secundario: #EBDCB2;
    --color_beage: #C9A66B;
    --color_terracota: #AF4425;
    /* TAMAÑOS */
    --ancho_maximo: 1600px;
    --padding_izquierda_derecha: 20px;
    --padding_arriba_abajo: 100px;
    --altura_header: 200px;
    /* TAMAÑOS DE FUENTE */
    --titulo_h1: clamp(1rem, 7vw, 2.6rem);
    --titulos_h2: clamp(1.2rem, 5.6vw, 2rem);
    --subtitulo_seccion_principal: clamp(1.1rem, 4vw, 2rem);
    --parrafo_seccion_principal: clamp(0.6rem, 2.3vw, 1.1rem);
    --parrafo_secciones: clamp(1.2rem, 2.5vw, 1.4rem);
}
/* Son los cambios que se le aplicana  toda la pagina */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Sirve para eliminar estilos de listas predeterminados */
ul,
ol {
    list-style: none;
}
/* Para quitar decoraciones predeterminadas */
a {
    text-decoration: none;
}
/* Sirve para generar un desplazamiento suave y mejorar la experiencia de usuario, tambien para coger el 100% del tamaño disponible */
html {
    height: 100%;
    scroll-behavior: smooth;
}
/* Definimos el tipo de letra gracias a la libreria importada, le colocamos minimo y el fondo del body como negro */
body {
    font-family: "Raleway", sans-serif;
    min-height: 100%;
    background-color: var(--color_beage);
}

/* ESTILOS GLOBALES COMPARTIDOS */
.estilo_secciones_globales {
    margin: 0 auto;
    width: min(100%, var(--ancho_maximo));
    padding: var(--padding_arriba_abajo) var(--padding_izquierda_derecha);
}
.titulos_secciones {
    font-size: var(--titulos_h2);
    color: var(--color_primario);
    text-align: center;
    margin-bottom: 30px;
}
.titulos_h3 {
    color: var(--color_terracota);
    font-size: clamp(1rem, 4vw, 1.5rem);
}
/* ------------NAV BAR */
.header {
    width: 100%;
}
.barra_navegacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    /* Esta funcion sirve para que la barra se ajuste a la pantalla independientemente del tamaño */
    width: min(100%,var(--ancho_maximo));
    padding: 0 var(--padding_izquierda_derecha);
    height: var(--altura_header);
}
.barra_navegacion h1 {
    font-size: var(--titulo_h1);
    color: var(--color_primario);
}
.imagen_menu{
    width: 30px;
    height: 30px;
    cursor: pointer;
    position: fixed;
    top: 10px;
    right: 20px;
    z-index: 3;
}
.icono_menu {
    display: none;
}
/* Significa que cuando seleccionemos el menu icono, el ul links va a tomar las características que se pongan abajo, en este caso que tome su tamaño orginal para mostarar el menu */
.icono_menu:checked ~ .ul_links_nav { 
    height: 100vh;

}

.ul_links_nav {
    background-color: #c9a66bdc;
    width: 100%;
    /* Sirve para dejar estatico y que se sobreponga al texto que esta detras */
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 0vh;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Hace que se de la transicion en .4 seg y muestre su altura cuando se active el checkbox */
    transition: height .4s ease;
}
@keyframes acelerate{
    0% {
        transform: rotate(0deg);
        }
        50% {
        transform: rotate(180deg);
        }
        100% {
        transform: rotate(360deg);
        }
}
.link_nav {
    color: var(--color_terracota);
    font-size: 2.2rem;
    font-weight: bold;
}
/* Animacion nav */
.link_nav:hover{
    color: var(--color_primario);

}

.icono_habilidades {
    width: 100px;
}
/* Animacion skills */
.icono_habilidades:hover{
    animation: acelerate 3s forwards;
}

/* ---SECCION PRINCIPAL */
.seccion_principal{
    background-color: var(--color_secundario);
}
.seccion_principal_article {
    text-align: center;
    
}
.seccion_principal_h2 {
    color: var(--color_primario);
    font-size: var(--titulos_h2);
}
.seccion_principal_h3 {
    font-size: var(--subtitulo_seccion_principal);
    color: var(--color_terracota);
}
.seccion_principal_p {
    font-size: var(--parrafo_seccion_principal);
    color: var(--color_terracota);
    margin: 15px 0;
}
.btn_contenedor {
    display:flex;
    justify-content: center;
    gap:1rem;
}
/* Animacion botones */
.boton {
    background-color: var(--color_primario);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 5px 15px;
    color: var(--color_beage);
    transition: transform 2s;
}
.boton:hover{
    color: var(--color_secundario);
    transform: scale(0.9);
}
.img_principal{
    width: 100%;
    display: none;
    transition: transform 2s;
}
.img_principal:hover{
    transform: scale(1.3);
}
/* Seccion SOBRE MI */
.seccion_sobreMi {
    background-color: var(--color_secundario);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.p_sobreMi {
    color: var(--color_terracota);
    text-align: center;
    margin-bottom: 30px;
}
.imagen_sobreMi {
    width: 100%;
    max-width: 350px;
}


/* Seccion Habilidades */
.seccion_Habilidades{
    background-color: var(--color_secundario);

}
.article_Habilidades {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* Seccion Proyectos */
.seccion_proyectos{
    background-color: var(--color_secundario);
}
.contenedor_proyectos{
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;     
}
.contenedor_proyecto {
    justify-content: start;
    align-items: center;
    grid-column: 1/6;
    justify-items: center;
    display: grid;
    justify-content: center;
}
.titulos_h3 {
    text-align: center;

}
/* Animacion imagenes proyectos */
.img_pryecto{
    width: 100%;
    max-width: 300px;
    transition: transform 2s;
}
.img_pryecto:hover{
    color: var(--color_secundario);
    transform: scale(0.9);

}
.p_proyecto {
    color: var(--color_terracota);
    width: 80%;
    max-width: 330px;
    text-align: center;
}
.footer_riwi{
    color: var(--color_primario);
    display: grid;
    position: static;
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: repeat(3 1fr);
    gap: 10px;
    width: min(100%,var(--ancho_maximo));
    padding: 0 var(--padding_izquierda_derecha);
    height: var(--altura_header);
}
/* Animacion Riwi coders */
.riwi{
    transition: transform 2s;
}
.riwi:hover{
    color: var(--color_terracota);
    transform: scale(1.1);
}

.riwip{
    grid-column: 3/3;
    grid-row: 1/3;
    font-size: 0.8rem;
}


/* Toda esta seccion es para los cambios que va a tener la pagina a la hora de estar en 768px hasta 1023px */

@media (min-width: 768px){

    /* Barra de navegacion */
        .barra_navegacion {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
        }
        .imagen_menu{
            display: none;
        }
        .icono_menu {
            display: none;
        }
        .ul_links_nav {
            background-color: transparent;
            width: auto;
            height: auto;
            position:static;

            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        .link_nav {
            color: var(--color_terracota);
            font-size: 1.2rem;
            font-weight: bold;
        }
        /* ---SECCION PRINCIPAL */
        .seccion_principal {
            display: flex;
            justify-content: space-around;

        }
        .seccion_principal_article {
            text-align: initial;
            width: 54%;
        }

        .btn_contenedor {
            justify-content: start;
            gap: 15px;
        }
        .boton {
            background-color: var(--color_primario);
            font-size: 1.4rem;
            padding: 7px 17px;
        }
        .img_principal{
            width: 40%;
            display: block;
            max-width: 350px;
            max-height: 270px;
            object-fit: cover;
            object-position: left;
        }

        /* Seccion SOBRE MI */
        .seccion_sobreMi {
            background-color: var(--color_secundario);
            flex-direction: row;
            gap: 30px;
            justify-content: space-around;
        }
        .p_sobreMi {
            max-width: 400px;
        }
        /* SKILLS */
        .article_Habilidades{
            display: flex;
            justify-content: center;
            flex-direction: row;
            gap: 30px;
        }
        /* Seccion Proyectos */
        .seccion_proyectos{
            background-color: var(--color_secundario);
        }
        .contenedor_proyectos{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 40px;    
        }

        .img_pryecto{
            width: 100%;
            max-width: 350px;

        }
        .footer_riwi{
            display: flex;
            justify-content: space-around;
            height: 100px;
        }
        .riwi{
            font-size: 3rem;
        }
        .riwip{
            grid-column: 3/3;
            grid-row: 1/3;
            font-size: 1.5rem;
        }

}

/* Toda esta seccion es para los cambios que va a tener la pagina a la hora de estar en 1024px en adelante*/

@media (min-width: 1024px){
    /* Barra de navegacion */
        .barra_navegacion {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 auto;
        }
        .imagen_menu{
            display: none;
        }
        .icono_menu {
            display: none;
        }
        .ul_links_nav {
            background-color: transparent;
            width: auto;
            height: auto;
            position:static;

            display: flex;
            flex-direction: row;
            gap: 10px;
        }
        .link_nav {
            color: var(--color_terracota);
            font-size: 2rem;
            font-weight: bold;
        }
        .barra_navegacion{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        /* ---SECCION PRINCIPAL */
        .seccion_principal {
            display: grid;
            grid-template-columns: repeat(3 1fr);
            grid-template-rows: repeat(3 1fr);

        }
        .seccion_principal_article {
            grid-column: 1/4;
            grid-row: 1/4;
        }
        .seccion_principal_h2{
            font-size: 3rem;
        }
        .seccion_principal_h3{
            font-size: 2.5rem;
        }
        .seccion_principal_p{
            font-size: 1.5rem;
        }
        .btn_contenedor {
            grid-column: 3/4;
            margin-top: 50px;
            gap: 10px;
        }
        .boton {
            background-color: var(--color_primario);
            font-size: 2rem;
            padding: 10px 20px;
    
        }
        .img_principal{
            grid-column: 3/3;
            grid-row: 2/3;
            width: 100%;
            display: block;
            max-width: 1000px;
            max-height: 500px;
            object-fit: cover;
            object-position: left;
        }

        /* Seccion SOBRE MI */
        .seccion_sobreMi {
            background-color: var(--color_secundario);
            flex-direction: row;
            gap: 30px;
            justify-content: space-around;
        }
        .h2_sobreMi{
            font-size: 3rem;
        }
        .p_sobreMi {
            max-width: 400px;
            font-size: 1.5rem;
        }
        /* SKILLS */
        .article_Habilidades{
            display: flex;
            justify-content: center;
            flex-direction: row;
            gap: 50px;
        }
        .h2_habilidades{
            font-size: 3rem;
        }
        .icono_habilidades{
            width: 200px;
        }
        /* Seccion Proyectos */
        .seccion_proyectos{
            background-color: var(--color_secundario);
        }
        .contenedor_proyectos{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 40px;    
        }
        .h2_proyectos{
            font-size: 3rem;
        }
        .titulos_h3{
            font-size: 2rem;
        }
        .p_proyecto{
            font-size: 1rem;
        }

        .img_pryecto{
            width: 100%;
            max-width: 350px;
        }
        .footer{
            display: flex;
            justify-content: center;
            width: 100%;
        }
    }