* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: roboto;
    font-size: 100%;
    list-style: none;
    box-sizing: border-box;
  }

  img {
    /* para que una imagen nunca sea mayor
          que la caja que las contiene */
    max-width: 100%;
    height: auto;
  }

  /* selector múltiple */
  h1,
  h2,
  h3,
  h4,
  p {
    /* redefine los márgenes inferiores
      para que midan el tamaño de la tipografía */
    margin-bottom: 1em;
  }


  /*----------------------------
      HEADER PARA TODOS
  ------------------------------*/

  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #000000;
    flex-direction: column;
  }

/*--------------  Barra de Navegación ----------------*/

header nav ul {
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 15px;
  justify-content: center;
  }

header nav ul li {
    min-width: 4em;
  }


header nav ul li a {
    color: white;
    font-weight:300;
    padding: .25em .5em;
    text-align:center;
    display:block;
    padding-top: .1em;
    text-decoration: none;
  }


body {
    display: flex;
    margin: 0;
    background-color: white;
    flex-direction: column;
    font-family: sans-serif;
    justify-content: space-between;
}

h1{
    padding-top: .7em;
    font-family: sans-serif;
    font-size: 3em;
    text-align:center;
    display:block;
    color: black;
}

#logo{
  width: 20%;
}

img {
    display: block;
    margin: auto;
    width: 80%;
}

h3 {
    color: black;
    font: sans-serif;
    padding: 20px;
    text-align: center;
    font-weight: 300;
    
}


a{
    color: white;
    font-size: 1.5em;
}

footer { 
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000000;
    color: #f1f1f3;
    font-weight: 300; 
    font-family: roboto;
    font-size: 0.8em; 
    text-align: center;
    background-size: contain;
    padding:1.5em;
}

h2{
  font-weight: 500; 
  font-family: roboto;
  font-size: 1.2em; 
  text-align: center;
  color: #f1f1f3;
}

ul{
  font-weight: 300; 
  font-family: roboto;
  font-size: 1em; 
  text-align: center;
  color: #f1f1f3;
  padding: 1em;
}

.materias{
  padding: 5em;
  background-color: #0091BF;
}

.titulo{
  padding: 1em;
}


nav a:hover{
  color: orange;
}


.datosacademicos{
  background-color:teal;
}

.todosintegrantesvm13{
  background-color: rgb(0, 12, 65);
}

.todosintegrantesvm13 a:hover{
  background-color: red;
}

 /*--------------  Para Escritorio ----------------*/
  
 @media(min-width:1024px) {

.materias{
    display: flex;
    padding: 2em;
    background-color: #0091BF;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
}

.materiasaprobadas{
  text-align: left;
}

img {
  display: block;
  margin: auto;
  width: 20%;
}

#fadunight{
  margin: 2em;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  background-color: #000000;
  flex-direction: row;

}

#logo{
  width: 30%;
}

nav a:hover{
    color: orange;
}

}