*{ -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;  
margin: 0;
padding: 0;

    background-color: antiquewhite;
    color: dimgray;
    text-align: center;
    font-family: 'Lato', sans-serif;
    
}


header nav { 
    padding: 2em;
    margin: 0.5em;
    
}

header nav ul {       
    display: flex;
    text-decoration: none;
    justify-content: space-around;
    width: 100%;
    align-items: center;
    
}

ul{
    list-style: none;
}


header nav ul li { 
    margin: 0.2em;
    flex-basis: 25%;
    
    }

header nav ul li a { 
    text-decoration: none;
    background-color: tan;
    padding: 0.5em;
    border: 1em;
    color: black;
    display: block;
    
}

header nav ul li a:hover {
    background-color: sienna;
    color: wheat;
}



header nav ul li img {
    height: 3.2em;
    width:4.5em;
    display: flex;
    margin: 0em;
    padding: .5em 0em .5em 0em;
    
}


.titulo img { 
    border-radius: 2em;
    width: 32%;
    max-width: 100%;
    margin-bottom: 2em;
    margin-top: -2.2em;
    }

h1 { 
    font-size: 2em;
    color: maroon
    }
 
  


.titulo { 
 padding: 2em;
 margin: 1em;
    
    }


h2 { 
    font-size: 1.3em;
    color: black;
    margin:0.5em;
    
    }

.titulo p { 
 color: maroon;
    font-size: 1.5em;
}


.materiasap {
    flex-direction: column;
    align-content:flex-end;

}



.materiasaprobadas {
     border:  0.5em solid tan;
    margin:1.5em;
    padding: 0.5em;

    }

.materiasencurso {
     border:  0.5em solid tan;
    margin:1.5em;
    padding: 0.5em;

}



.integrantes {
margin:1.5em;
    padding: 0.5em;
      border:  0.5em solid tan;
    
}

.integrantes nav ul li a:hover {
    color: sienna;
}

.pantallas img {
    display: block;
    margin: auto;
    padding-top: 1em;
    align-items: center;
    width: 30%;
    height: auto;
    
}

.pantallas {
    margin: 1em;
    padding: 0.5em;
    margin-left: 2em;
    margin-right: 2em;
    border:  0.5em solid tan
    
}



footer { 
    font-size: 0.8em;
    margin: 5em;
       
}




@media (min-width:35em){
    .materiasap {
        display: flex;
    }
}