/*hoja de Estilos*/

/*font-family: 'Roboto', sans-serif, ´ópen sans´ */

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
</style>



tittle {
    font-family: 'roboto';
}



header {
 
    margin: auto;
    padding: 0px 0px 30px 0px;
    align-content: center;
    color: white;
    display: flex;
    justify-content: center;
    font-size: 14px;
}

header nav{
    width: 76%;
    background-color: rgba(148, 186, 147, 0.98);
    height: 50px;
    border-radius: 15px;
    border-style: double;
    padding: 0px 0px 8px 0px;
}


header nav ul {
    list-style: none;
    display: flex;
    text-align: center;
    }
   


header nav ul li a {
    text-decoration: none;
    color: white;
    padding: 2px;
    display: flex;
    align-items: center;
    margin: 0 0 0 20px;
    text-decoration: none;
    text-align: center;
}


.contenedor{
background-color: rgba(2,0,1,0.3);
    width: 76%;
    text-align: center;
    margin: auto;
     border-radius: 15px;
     padding: 30px 0px 5px 0px;
}

img{
    border-radius: 50%
  
}


#titu{
font-family: 'roboto';
  text-align: center;
  color: #94BA93;
  background: white;
  border-radius: 15px;
  padding: 10px 0px 10px 0px;
  margin: 110px 200px 0px 200px;
 font-size:20px;
}

#materias{
  text-align: center;
  color: white;
  padding: 0px 0px 0px 0px;
  margin: 0px 210px 0px 200px;
 font-size:15px;
}

.materias02{
list-style: none;
  margin: 4.5px 0px 0px 00px;  
}

h1{
  color: white;
  padding: 5px 0px 0px 0px;
  font-size:35px; 
  font-family: 'roboto';
}

html {
    background-repeat:repeat;
    align-content: center;

}



body{
    padding: 7% 2% 2% 2%;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin: auto;
}




footer {
    text-align:left;
    font-family: sans-serif;
    font-size:10px;
    font-stretch: normal;
    align-content: center;
    color: white;
    margin: 60px 10px 10px 10px;
}








@media (max-width:60em) {
    header nav ul li a {
      margin: 0 0 0 0px; 
    font-size: 12px;
    }
    
  
}


@media (max-width:55em) {
   
    #titu{
        margin: auto;
    }
    
    #materias{
        margin: auto;
    } 
    img{
        margin: auto;
    }
    h1{
    margin: auto;
    font-size: 30px;
    padding: 20px 0px 25px 0px;
    }
}



@media (max-width:40em) {
    header nav ul li a {
      margin: 0 0 0 0px; 
    font-size: 10px;
    }
    
    #titu{
        margin: auto;
    }
    
    #materias{
        margin: auto;
    } 
    img{
        margin: auto;
        max-width: 200px;
        height: auto;
    }
    h1{
        margin: auto;
        font-size: 30px;
        padding: 20px 0px 25px 0px;
    }
}