/*FUENTES TIPOGRAFICAS --------------------------*/

    /*Lato, Sans-Serif para texto*/

@font-face{
    font-family:lato, sans-serif;
    src: url(fuentes/lato.ttf)
}

    /*Pattaya, Decorativa para títulos*/

@font-face{
    font-family:pattaya;
    src: url(fuentes/pattaya.ttf)
}

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

*{
    box-sizing: border-box;
}


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


    /*IMAGENES --------------------------------------*/

img{
    max-width: 100%;
    height: auto;
    width: 8em;
}


    /*LISTAS Y ENLACES ------------------------------*/

    /*Quitar subrayado a los links*/
a{
    text-decoration: none;
}

    /*Quitar puntos y margen a las listas*/
ul,
ol{
    list-style: none;
    padding: 0;
}

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

    /*BODY*/

body{
    font-family: 'Lato', sans-serif;
    display: flex;
    flex-direction: column;
}


    /*HEADER ---------------------------------------*/

header{
    background-color: #e54141;
    padding-bottom: 0.3em;
    width: 100%;
}

    /*Logo de FADU*/

#fadu{
    width: 12em;
}


    /*Logo de DGPC*/

#dgpc{
    width: 6em;        
}

    /*Div con Logos de Instituciones*/

.contenedora2{
    display: flex;
    justify-content: space-between;
    margin: 0.5em;
}


    /*Barra de NAVEGACION principal*/

nav ul{
    display: flex; 
    margin: 0.5em;
    /*flex-wrap: wrap;*/
    justify-content: center;
}

nav ul li{
    background-color: #ffcd5c;
    width: 20%;
    height: 2.5em;
    margin: 0.3em;
    box-shadow: 0em 0.3em 0em rgba(0, 0, 0, 0.5) 
}

nav ul li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 700;
    font-style: italic;
    color:white;

}

nav ul li a:hover{
    background-color: white;
    color: #e54141;
    font-style: bold italic;
    font-weight: 900;
    
}


    /*MAIN -----------------------------------------*/

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /*PRESENTACION ---------------------------*/

article{
    background-color: #e54141;
    border-radius: 2em;
    box-shadow: 1em 1em 0em rgba(255, 205, 92, 0.8);
    display: flex;
    color: white;
    flex-direction: column;
    align-items: center;
    margin: 4em 0em;
    width: auto;
    flex-wrap: wrap;
}

article h1{
    font-family: 'Pattaya', sans-serif;
    text-shadow: 0.12em 0.12em 0em black;
    letter-spacing: 0.05em;
    margin: 1em 0em 0em 0em;
}


figure{
    display: flex;
    align-items: center;
}

figcaption{
    display: flex;
    flex-wrap: wrap;
    margin: 0em 1em;
}

#perfil{
    border-radius: 50%;
    border:solid 0.3em #ffcd5c;
}

    /*BOCETOS -------------------------------*/

#boceto{
    font-family: 'Pattaya', sans-serif;
    color: #e54141;
    border-bottom: solid 0.3em #e54141;
    text-align: center;
}

/*background-color: #ffcd5c;
    color: #e54141;*/

#dispositivos{
    display: flex; 
    justify-content: center;
}

#dispositivos li{
    background-color: #ffcd5c;
    width: 7em;
    height: 2.5em;
    margin: 0.3em;
    
    border-radius: 0.5em;
    box-shadow: 0em 0.3em #e54141;
}

#dispositivos li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 700;
    color: #e54141;
}

#dispositivos li a:hover{
    background-color: #e54141;
    border-radius: 0.5em;
    color: white;
}


    /*INTERESES -----------------------------*/
    
#misintereses{
    font-family: 'Pattaya', sans-serif;
    color:#ffcd5c;
    margin:1em;
    border-bottom: solid 0.3em #ffcd5c;
    text-align: center;
}

#intereses{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

#intereses li{
    background-color: #e54141;
    border-radius: 100%;
    width: 11em;
    height: 11em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0.5em 0.5em 0em #ffcd5c;
    margin: 0.5em 0.5em;
}


    /*MATERIAS ------------------------------*/

    /*Materias Aprobadas --------*/    

    /*Sección de Materias*/

#materias{
    background-color: #e54141;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 4em 0em;
    padding: 2em 0em;
}

    /*Títulos de sección Materias*/

.titulo{
    font-family: 'Pattaya', sans-serif;
    color: white;
    letter-spacing: 0.05em;
    border-bottom: solid 0.3em white;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2em 0em 0em 0em;
}


    /* Para que un texto esté dentro de un círculo y centrado*/

.materias h3{
    display: flex;
    width: 7em;
    height: 7em;
    background-color: #ffcd5c;
    border-radius: 50%;
    align-items: center;
    text-align: center;
    justify-content: center;
    box-shadow: 0.3em 0.3em 0em rgba(0, 0, 0, 0.5);
}

    /*Items de lista en sección materias*/

.materias{
    display: flex;
    justify-content: center;
    margin: 0em 1em;
    align-items: flex-end;
}

    /*Cátedra + Nivel*/
    
.materias ul{
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 0.3em 0.3em 0em rgba(0, 0, 0, 0.5);
}

    /*Contenedora de lista en materias*/

#materiasaprobadas{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    /*Materias en curso --------*/ 

#encurso{
    display: flex; 
    justify-content: center;
    flex-wrap: wrap;
}

#encurso li{
    background-color: #ffcd5c;
    width: 8em;
    height: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0em 0.3em 0em rgba(0, 0, 0, 0.5);
    margin: 0.5em;
    flex-wrap: wrap;
}

    /*Rótulos de mis compañeros*/

#vm27{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 4em;
}


#grupo{
    font-family: 'Pattaya', sans-serif;
    color: #ffcd5c;
    text-align: center;
    border-bottom: solid 0.3em #ffcd5c;
}

#equipo{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#equipo li{
    background-color: #e54141;
    border-radius: 1em;
    width: 10em;
    height: 11em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 1em 1em 0em #ffcd5c;
    flex-wrap: wrap;
    margin: 1em 1em;
}

#equipo img{
    border-radius: 50%;
    margin:0.5em 0em;
    border:solid 0.3em #ffcd5c;
    width: 7em;
}

#equipo a{
    color:black;
    background-color: #ffcd5c;
    padding: 0.5em;
    border-radius: 1em;
}

#equipo a:hover{
    background-color: white;
    color:#e54141;
}

    /*FOOTER ---------------------------------------*/

.contenedora{
    display: flex;
    flex-direction: column;
    background-color: #ffcd5c;
    padding: 2em 3.2em;
    width: 100%;
    margin: 0em;
}

.items{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content:space-between;
    padding: 0 0 2em 0;
    
}
    

.items:not(:last-of-type){
    border-bottom:solid 0.3em #e54141;
    margin-bottom: 1em;
    padding-bottom: 1em;
}

.items:last-child{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    


footer p{
    background-color: #e54141;
    color: white;
    padding: 2em 3.2em;
    margin: 0em;
}

    /*LOGOS DE INSTITUCIONES -----------------------*/