/*---------- VARIABLES CSS ---------*/
:root {
    --colorPrimario: #14213D;
    --colorSecundario: #000000;
    --colorTerciario: #FCA311;
    --colorCuatenario: #FFFFFF;
    --colorQuintenario: #E5E5E5;

    --fuenteInter: "Inter";
}

@media (max-width: 1300px) {
    .sobreMi_presentacion_descripcion_texto {
        width: 650px;
    }
}

@media (max-width: 1200px) {
    .sobreMi_presentacion_descripcion_texto {
        width: 600px;
    }
}

@media (max-width: 1024px) {

    /*---------- QUIEN SOY (BIEVENIDA) ----------*/
    .bienvenidaDiv {
        flex-direction: column;
        gap: 80px;

    }

    .bienvenidaDiv_pre {
        align-items: center;
    }

    .bienvenidaDiv_text {
        text-align: center;
    }

    /*---------- SOBRE MI ----------*/
    .sobreMi_presentacion {
        flex-direction: column;
        align-items: center;
        gap: 100px;
        margin: 10% 0;
    }

    .sobreMi_presentacion_foto {
        flex-direction: row;
    }
    .sobreMi_presentacion_descripcion_texto {
        width: 600px;
    }
}

@media(max-width: 700px) {

    /*---------- BARRA NAVEGACIÓN ----------*/
    .headerPag_nav_div {
        position: absolute;
        right: -100%;
        width: 100%;
        top: 0;

        background-color: var(--colorPrimario);
        flex-direction: column;
        text-align: center;

        padding: 70px 0 20px 0;
        transition: 0.3s;
        border-bottom: 2px solid var(--colorTerciario);

    }

    .headerPag_nav_div_link {
        border: none;
        padding: 0;
    }

    .headerPag_nav_div.active {
        right: 0;
    }

    .headerPag_nav_span {
        display: block;
        font-size: 1.5rem;
        color: var(--colorCuatenario);
        font-weight: bold;
        z-index: 2;
    }

    /*---------- QUIEN SOY (BIENVENIDA) ----------*/
    h1 {
        width: 300px;
        font-size: 3rem;
    }

    .bienvenidaDiv_text {
        width: 300px;
    }

    /*---------- TITULOS ----------*/
    .proyectos_titulo, .sobreMi_titulo, .herramientas_titulo {
        flex-direction: column;
        text-align: center;
    }
    
    /*---------- PROYECTOS ----------*/
    .proyectos_lista_principal_img {
        width: 300px;
    }

    /*---------- SOBRE MI ----------*/
   .sobreMi_presentacion_foto{
    flex-direction: column;
   }

   .sobreMi_presentacion_descripcion_texto {
    width: 280px;
   }

   /*---------- PIE DE PAGINA ----------*/
   .footerContainer{
    flex-direction: column;
   }
}