@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Montserrat:wght@300&family=Roboto:ital,wght@1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}


.intro{
    background-image: url('../imagenes/zorrofondo2.jpg');
    width: 100%;
    height:min(120vh,auto) ;
   
}


.contenedora{
    width: min (50rem, 100% ); 
    width: 60%;
    margin: auto;
    padding: 0.5rem;
}


/* header */

header {
    gap: 0.5em;
}

.navegation{
    padding: 10px;
    display: flex;
    justify-content: space-around;
}


.navegation ul {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    list-style-type:none;
    font-size: 1rem;
    margin-top: 1em;
    
}
.navegation ul li {
    text-decoration: none;
    display: inline-block;
}

.navegation ul li a {
    color: whitesmoke;
    text-decoration: none;
    display: block;
    transition: all 0.5s;
    padding: 0.5rem 1rem;
    transition: 0.4s linear;
    border-radius: 5px;
    font-family:'Raleway', sans-serif;
}

.navegation ul li a:hover{
    background-color:rgba(209, 225, 255, 0.459) ;
    border-radius: 7px;
}
/* //header ----------------------------------------*/


/* presentacion */
#fotoluli{
    border-radius: 50em;
}
.perfil-contenedor{
    margin-top: 2em;
}
.perfil-contenido{
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.perfil-texto{
    margin-top: 0.5rem;
    text-align: center;
    font-size:1.5rem ;
    font-family: lighter;
}
.perfil-texto h1{
    font-size: 4rem;
    color: #FFC863;
    margin: 1.rem;

}

.perfil-texto h4 {
    font-weight: 400;
    font-size: 0.7em;
    margin: 0.9rem ;
    
}
.texto-presentacion h6{
    font-size: 1.15rem;
    font-weight: lighter;
}
.texto-presentacion h3{
    font-size: 2.5rem;

}
.info-presentacion{
    border: 1px solid whitesmoke;
    border-radius: 40px;
    margin-top: 4.4rem;
    padding: 1.3rem;
    margin-bottom: 8.1875rem;
    margin-left: 1em;
    margin-right: 1em;
    max-width: 40em;
}
.texto-presentacion{
    
    margin: auto;
    font-weight: 300;
}


.presentacion-contenido, .perfil-texto{
    color:aliceblue;
    font-family: sans-serif;
}

.presentacion-contenido{

    width: 95%;
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 5rem;
    align-items: center;
}
.presentacion-contenido h3{
    font-size: 2rem;
    margin-bottom: 0.3em;
    margin-left: 0.3em;
}

#insta{
    color: #FFC863;
}
span{
    border-bottom:1px solid white ;
    padding-bottom: 0.5rem;
}
.titulo-proyecto span, .titulo-materias span{
    border-bottom:1px solid #193068;
    padding-bottom: 0.5rem;
}
/* presentacion -----------------*/






/* proyecto destacados */

.titulo-proyecto, .titulo-materias{
    font-size: 1.8em;
    display: flex;
    justify-content: center;
    margin: 1em;
}

article{
    width: 90%;
    margin: auto;
}
 .proyectos_destacados{
    margin-top: 2em;

}
.proyecto-info{
background-color: whitesmoke;
color: rgb(36, 36, 36);
height: 12em;
display: flex;
align-items: center;
justify-content: center;
}
.proyecto-texto{
    width: 80%;
    margin: 0.5em;
}

h2, p {
    margin-top: 4em;
}
.proyecto-imagenes{
    background-color: #FFC863;
}
.imagen{
    display: flex;
    justify-content: center;
    height: 100%;

}  
.snaer{
    background-color: #193068;
}

/*/--------------------*/

/* Info de las materias */

.materias-contenedora{
    margin-top: 4em;
    max-width: 55em;
}
ul{
    list-style-type:none;
}
.materias-cursadas ul, .materias-cursando ul{
    margin-top: 1em;

}

.materias-cursadas, .materias-cursando{
    height: 14em;
    width: 18em;
    margin: auto;
    margin-bottom: 3em;
    background-color: whitesmoke; 
    color: #1C3069;
    padding: 1em;
}
.materias-cursadas h3, .materias-cursando h3{
    margin-bottom: 0.5em;
}

.materias-cursadas ul li, .materias-cursando ul li{
    margin-bottom: 0.3em;
}
/*/--------------------*/

.redes_sociales {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 1em;
    margin-top: 1em;
    max-width: 20em;
    
}

.redes_sociales {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 1em;
    margin-top: 1em;
    max-width: 20em;
    
}
.redes_sociales h5{
    font-size: 1.3em;
 
}
.redes_sociales img{

}
.portfolio{
    margin-top: 2em;
    margin-bottom: 1em;
    display: flex;
    justify-content: center;
}

.portfolio a{
    padding: 1.3em;
    background-color: #193068;
    border-radius: 8px;
    color: whitesmoke;
    list-style: none;
    text-decoration: none;
}

h2, p {
    margin: 10px;
}

.boceto{
    display: flex;
    justify-content: center;
}
.boceto a{
    display: flex;
    justify-content: center;
    color: whitesmoke;
    padding: 1.3em;
    background-color: #193068;
    border-radius: 8px;
    text-decoration: none;

}


/* footer */
footer{
    background-color: #193068;
    color: whitesmoke;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.8em;
}

/*/--------------------*/
.academicos img{
    width: 8em;
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    margin: 0;
}

.academicos h2 span{
    border-bottom: 1px solid #193068;
    padding-bottom: 0.5rem;
}
.uba{
    display: flex;
    align-items: center;
}
div.ubas{
    margin-left: 2em;
}
/* cambios a partir de los 640px */
@media (min-width: 40em) {


    /* para que el perfil quede apaisado */
    .perfil-contenido{
        flex-direction:row;
        justify-content: space-evenly;
        max-width: 50em;


    }

    .perfil-texto{
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .info-presentacion{


    }

    /* Proyectos destacados */
    article{
        margin-bottom: 3em;
        width: 100%;
        
    }
    .proyectos_destacados{
        display: flex;
        width: 60%;
        margin: auto;
        margin-bottom: 3em;
    }
    .proyecto-info{
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 15.6em;
    }

    .proyecto-imagenes{
    width: 50%;
    margin-top: auto ; 
    align-items: flex-end; 
    }

    .imagen{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    }  

    .materias-contenedora{
        display: flex;
        height: 15em;
        margin: auto;
    
    }
    .portfolio{
        width: 23em;

    }
    
    .portfolio:hover {
        width: 23em;
    }
    .portfolio a:hover {
        background-color: #2a50b9;
    }
    .boceto a:hover{
        background-color: #2a50b9;

     }
    

}