* {margin: 0;
   padding: 0;
}

body {background-image: url(../2/imagenes/fondo.jpg)
}

nav ul {list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        background-color: white;;
        border-radius: 1em;
        padding: .5em;
        margin: 1em;
}

nav ul li {width: 2em;
           height: 1em;
           display: flex;
           align-items: center;
           align-content: center;
           justify-content: center;
           font-family: tajawal, sans-serif;
           font-weight: bold;
}


body {background-color: bisque;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

/*
main {background-color: bisque;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

*/

main {background-color: bisque;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
}

h1 {background-color: white;
    padding: .25em .5em ;
    border-radius: 1em;
    font-family: tajawal, sans-serif;
    color: crimson;
    justify-content: center;
    margin: auto;
    text-align: center;
    max-width: 20em;
    margin-top: 1em;
}

img {margin: auto;
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
    max-height: 15em;
    max-width: 15em;
    margin-top: 2em;
}

.usuario {margin: auto;
          text-align: center;
          max-width: 20em;
}

p {font-family: sans-serif;
}

h2 {font-family: sans-serif;
}

main ul li {font-family: sans-serif;
}

.materias {list-style: none;
            display: flex;
            justify-content: center;
            margin: auto;
}

.integrantes {list-style: circle;
              display: flex;
              justify-content: center;
              margin: auto;               
}

p {margin-bottom: 1em;
}

h2, footer {margin-top: 2em;
            margin-bottom: 1em;
}

header, footer {background-color: crimson;
                padding: .25em;
}

.materias {background-color: #fffbf7;
           padding: 0.75em 1em 0.5em 1em;
           border-radius: 1em;
           display: flex;
           flex-direction: column;
           justify-content: center;
}

.estudiante1 {text-decoration: underline;
              font-weight: bold;
              color: crimson;
              margin-bottom: 1em;
              font-size: 1.2em;
}

.destacado1 {margin-bottom: .5em;
            font-weight: bold;
            display: flex;
            flex-wrap: wrap;
}

.destacado2 {margin-bottom: .5em;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
            margin-bottom: 1em;
}

.destacado3 {margin-bottom: .5em;
            font-weight: bold;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
}

section {display: flex;
        flex-wrap: 1;
        flex-direction: column;
        margin: 1em;
}

section ul {margin: 1em;
}

footer {display: flex;
        margin: auto;
        padding: 1em;
        font-family: sans-serif;
}


header {height: 3em;
        display: flex;
        justify-content: center;
        color: white;
        align-content: center;
        align-items: center;
        font-family: tajawal, sans-serif;
        font-weight: bolder
}


main div ul li img {display: flex;
                    margin: 0;
                    justify-content: space-between;
                    max-height: 2em;
                    max-width: 2em;
                    margin: 1em 3em 0em 3em
}

.redes {display: flex;
        flex-direction: row;
        justify-content: space-between;
        list-style: none;
        margin: 1em 1em .5em 1em;
}

.redes1 {display: flex;
         flex-direction: row;
         justify-content: space-around;
         list-style: none;
         margin: .25em 1em 2em 
}

h2 {display: flex;
    justify-content: center;
    margin-bottom: 0;
    text-decoration-line: underline
}

section ul li {list-style: none;
                display: flex;
                justify-content: center;
                margin-bottom: .5em;
}

section ul {display: flex;
            flex-direction: column;
            margin: 1em 2em 2em 2em;
    
}

@media ( min-width: 40em ) {
  
     aside {display: flex;
            justify-content: center;
            text-align: center;
     }
    
     section ul li {height: 2em;
     }
     
     
     main div {display: flex;
               flex-direction: column;
               justify-content: center;
               align-content: center;
               align-items:center;
               max-width: 60%;
               margin: auto;
     }
    
 }
