:root {
    --cold-turkey: #d3c0c4;
    --body-color: #131432;
    --indigo: #4958c7;
    --shakespeare: #57a1d5;
    --east-bay: #50537e;
    --red-violet: #cd1cb7;
    --kabul: #674a43;
    --otro: #2b355a;
    --thunder: #3b333a;
    --river-bed: #455660;
    }
@media (min-width: 769px) {
    /* navigation */
    .menu {
        display: flex; 
        flex-direction: row;
        position: static;
        width: auto;
        height: auto;
        background-color: transparent;
        justify-content: space-around;
        align-items: normal;
    }

    .menu li {
        width: 120px;
    }

    .menu li a{
        padding: 0.5rem 0.7rem;
    }

    .menu-toggle {
        display: none; 
    }

    nav{
        justify-content: center;
        border: none;
    }

    .logo{
        margin-right: 18%;
        font-size: 50px;
    }

    /* arrow down animation */
    .box-arrows{
        display: none !important; 
    }

    header{
        margin-left: 15%;
    }

    /*  titles*/
    .sub-title{
        font-size: 2.5rem;
    }
    .title, .title span{
        font-size: 3.5rem;
    }

    /*  about me */
    .container-aboutme{
        display: flex;
        flex-direction: row;
    }

    .profile-image{
        width: 280px;
    }
    .div-borde{
        width: 100%;
    }
    .p-about-me{
        margin-top: 4rem;
    }

    /*  projects */

    .container-project{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between; /* Espacio entre los elementos */
        gap: 40px; /* Invertir el orden de los elementos */
    }

    .left, .right{
        flex: 1;
    }
      
    .container-project:nth-child(odd) {
        flex-direction: row-reverse; /* Invertir para los padres impares */
      }
      
    .container-project:nth-child(even) {
        flex-direction: row; /* Mantener orden natural para los padres pares */
    }

    /* modal */
    .modal-p{
        font-size: 1rem;
    }

    .view-code-btn{
        font-size: 1rem;
    }

    /* contact section */

    .container{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-top: 2rem;
    }

    form{
        width: 400px;
    }

    /* footer */
    
    footer .left-f{
        font-size: .8rem;
    }

}

@media (min-width: 1000px){
    .izquierda {
        top: -140px; /* Ajusta la posición superior */
        left: 0px;
        width: 160px; /* Aumenta el ancho para mantener la proporción */
        height: 340px; /* Aumenta el alto proporcionalmente */
        border-radius: 0 160px 160px 0; /* Ajusta el border-radius para el nuevo tamaño */
    }
    
    .derecha{
        width: 160px; /* Aumenta el ancho para mantener la proporción */
        height: 340px;
        border-radius: 160px 0 0 160px;
        top: -140px;
        right: 0px;
    }
}