@charset "utf-8";

*{margin:1em;
    padding:0;
    border:0;    
}


img{
    width:100%;
}

ul{
    list-style: none;
    margin:2em;
    padding:3em;
}
body{
    background-color: #a87cfa;
}
body{font-family: "trebuchet ms", arial, helvetica, sans-serif;
    background-color: #a87cfa;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html{
    height: -webkit-fill-available;
} 

header{
    margin:0;
    background-color: #a87cfa;
}

.logos{
    background-color: #eaa3e7;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

nav ul {
    margin:1em;
    border-radius: 7em;
    background-color: #410046;
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
    justify-content: center;
}
nav ul li{
    margin:0.2em 1.5em;
    border-radius: 1em;
    background-color: #eaa3e7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav ul li a{
    color:black;
    display:block;
    font-weight: bold;
    text-decoration: none;
}

.enlaces{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
}

.integrantes{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
main{
    background-color: #eaa3e7;
    flex-grow:1;
    display:flex;
    flex-direction: column;
}

article.materias{
    margin:auto;
    background-color: #eaa3e7;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
}
article.fotos{
    max-width: 800px;
    margin:4.5em;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
section >div{
    max-width: 18em;
    display: flex;
    flex-wrap: wrap;
}

section >h2{
    margin:auto;
    color:#410046;
    }
section >h3{
    margin:auto;   
    
    color:#410046;
}
section >h4{
    color:#410046;
}
section{
    margin:0;
}

footer{
    display:flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

@media all and (min-width:1050px){
    nav ul{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .datosacademicos{
        flex-direction: row;
        align-items: center;
    }
    article.info{
        max-width: 25%;
    }
    
}