html{font-size: 16px;} /*Mi REM */
*{margin: 0; padding: 0;
  box-sizing: border-box; }

body {background: #fff;
     font-family: Roboto, Arial, sans-serif;
     text-align: center;}
header {background-image: url(img/background.jpg);
        background-size: cover;}


h1 {font-family: Century Gothic, Arial;
    font-size: 6rem; 
    font-weight: bolder;
    text-align: center;
    letter-spacing: 0.4rem;
    margin: 1rem;}

img {border-radius: 50%;
     margin-bottom: 1rem;}

h3{color: #fff; 
   font-size: 1.5rem; 
   padding: 0.1rem; 
   background: #000000; 
   margin: 0.1rem;}

.diys {margin: 0.2rem;
       font-size: 1.7rem;}


/* Inicio y Nombres de grupo */
.menu {padding: 1rem 1rem 1rem 1rem; text-align: center;}
ul li{ list-style-type: none; display: inline;}
ul li a{ color: #ffffff; 
         text-decoration: none; 
         font-size: 1rem; 
         background: black; 
         padding: 1rem; 
         text-align: center;}
ul li a:hover{font-weight: bold;
               background-color: #bdeadc;
              color: black;}


/* Materias */
.materias {display: flex; 
           width: 100%; 
           justify-content: center;          
           }
.materias li {display: block;
              float: none;
              text-align: left;}
.materias article {margin-left: 0.2rem;}


/* Footer */
footer {margin: 1rem; 
       background: #000000; }
footer p {color:#ffffff; 
          font-size: 0.7rem; 
          text-align: center;}


/* Para Responsive */
@media ( max-width: 650px )  {
.materias { 
    flex-direction: column; flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
    }
.cursando { 
    flex-direction: column; flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
    }
h1 {
    font-size: 2.6rem;
}
img {
    border-radius: 50%;
    width: 8rem;
     margin-bottom: 0.3rem;
}
.diys {
    margin: 0.2rem;
       font-size: 1.3rem;
}
h3 {
    font-size: 1rem;
}
.menu { 
    padding: 1rem 1rem 1rem 1rem; width: 100%;
} 
ul li { 
    list-style-type: none; display: inline;
}
ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 0.5rem; 
    background: black; 
    padding : 0.3rem 0.8rem; 
    text-align: center;
}
ul li a:hover{
    font-weight: bold;
    background-color: #bdeadc;
    color: black;
}
}