*{box-sizing: border-box;}



body {background-color: ghostwhite;}

html {font-size: 16px; 
    text-decoration: none; 
    list-style-type: none; 
    margin: 0; 
    font-family: roboto, sans-serif;
}

header {margin top: 1rem;
        margin-bottom: 1rem;}

ul li a {text-decoration:none; color: white;}
ul li a:visited {text-decoration: none; color:white;}
ul li a:hover {color: grey; font-weight: bold;}

ul li {
    text-decoration: none;
    list-style-type: none;
    display: inline;
    margin-top: 2rem;
    margin-right: 1rem;
    font-family: roboto, sans-serif;
    border-right: 1px solid;
    padding-right: 1rem;
    border-color: white;
 }


ul li:hover{font-weight: 500; color: black;}


.botones {background-color: #00c3a7;
          padding: 0.1rem 0 0.1rem 0;
          text-align: right;
 }

a {text-decoration:none; color: grey;}
a:visited {text-decoration: none; color:grey;}
a:hover {color: #00c3a7;}


.foto img {width: 100%;}

h1 {color:white;
    text-align: left;
    float: right;
}       

.grupo{background-color: #00c3a7;
       margin-top: -2.4rem;
       }

h2 {text-align: center;
    font-size: 2.5rem;
    color: white;
    
}


h4{font-size: 1.3rem;
   font-weight: 550;
   color: black;}

h4:hover{font-weight: 700; color: aqua;}

.alumnos{display: flex; justify-content: space-around;}

.alumnos article {text-align: center;}

.alumnos article img{border-radius: 100%; height: 60%; position: relative;}

.alumnos article img:hover {opacity: 0.5;}



.descripcion {text-align: center;
              margin: 0 12rem 3rem 12rem;
              color: #00c3a7;
              background-color: #EDEDED;
              padding: 2rem;
              box-shadow: 10px 10px 25px -8px rgba(0,0,0,0.22);}

h3 {font-size: 1.5rem;}

.descripcion p {color: gray;
                text-align: center;
                }

.datos {display: flex; justify-content: space-around;
        background-color: #00c3a7;
        color: white;
        }

footer {background-color: #000000;
        color: white;
        font-size: 0.7rem;
        padding: 1rem 2rem 1rem 2rem;
}



@media (max-width: 500px) {
    
   .alumnos {display: flex;
	         flex-direction: column;
	         flex-wrap: nowrap;
	         justify-content: flex-start;
	         align-items: stretch;
	         align-content: stretch;
                }
    .botones {text-align: center;}
    
    
    .descripcion {text-align: center;
              margin: 0;
              color: #00c3a7;
              background-color: #EDEDED;
              padding: 2rem;
              }
    
    .alumnos article a img {width: 60%;}
    
   
}