@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');

*{margin: 0; font-family:'Roboto'; text-decoration: none;}

/* NOMBRE Y FOTO */

.foto { margin-top: 2rem;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0.2rem solid #0B0B3B;}

.info h1 {text-align: center; color: #0B0B3B; font-size: 1.6rem; margin-top: 1rem; }

.info h4 {text-align: center; color: #fae1b9; font-size: 1.4rem; padding-bottom: 1rem; margin-top: -0.7rem; }


/* CUERPO PRINCIPAL */

body { margin: 0rem auto; background-image: url(../img/2.jpg); text-align: center; }


/* BOTONES NAVEGACION PRINCIPAL */

.menu nav{ background: #fae1b9; margin: 10px 160px; padding: 0rem; 
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 0.1rem solid #9bd1c3;}

.menu nav ul { padding: 0; }

.menu nav ul li { display: inline-block; }

.menu nav ul li a { color: #0B0B3B; display:inline-block; font-size: 0,5rem; padding: 1rem; }

.menu nav ul li a:hover{ background: #0B0B3B; color: #9bd1c3;
border-radius: 22px 22px 22px 22px;
-moz-border-radius: 22px 22px 22px 22px;
-webkit-border-radius: 22px 22px 22px 22px; }

/* MATERIAS */

.materias{  background-color: #0B0B3B; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; align-content: center; padding: 4rem 2rem 4rem 8rem; margin: 20px 160px;
border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-webkit-border-radius: 40px 40px 40px 40px;
border: 0.1rem solid #fae1b9;}

.materias h2{ text-align: left; font-size: 1rem; padding-top: 1rem; color: #9bd1c3; margin-top: -1.1rem; margin-left: 0.8rem; }

.materias h4{ text-align: left; font-size: 1rem; padding-top: 1rem; padding-bottom: 1rem; color: #fae1b9; }
  
.materias p{ text-align: left; font-size: 0.7rem; padding-bottom: 1rem; color: #f3e6fd; }
  
.parrafo { width: 20%; }

.icon {width: 0.7rem; height: 1rem; text-align: left; margin-bottom: 1rem; }


/* INTEGRANTES */

.integrantes nav{ margin-bottom: 3rem; margin-top: 2rem; font-size: 0.6rem; }

.integrantes nav ul { padding: 0; }

.integrantes nav ul li { display: inline-block; }

.integrantes nav ul li a { color: #0B0B3B; display:inline-block; padding: 1rem; font-size: 1rem; background: #fae1b9; margin: 0rem 1rem 0rem 1rem;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0.1rem solid #0B0B3B; }

.integrantes nav ul li a:hover{ color: #9fa8de; 
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0.1rem solid #0B0B3B;}

/** PIE DE PAGINA **/

footer{ text-align: center; font-size: 0.5rem; padding: 1rem; color: #343239; margin-top: -2rem; }


@media(max-width: 60rem){

.menu section { width: 33%; margin: 0rem; }

.menu nav {font-size: 0.7rem; margin: 0px 10px;}
    
.foto {width: 60%; }

.materias{ width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: center; padding: 0rem 2rem 0rem 2rem; padding-top: 1rem; margin: 0rem 0rem 0rem -2rem; }

.icon {margin: 0rem 0rem 0rem 2rem;}

.materias h2{ font-size: 1rem; width: 8rem; margin: 1rem 0rem 0rem 2rem;}

.materias h4{ font-size: 1rem; width: 8rem; margin: 0rem 0rem 0rem 2rem;}
  
.materias p{ font-size: 0.7rem; width: 8rem; margin: 0rem 0rem 1rem 2rem;}
  
.parrafo { width: 40%; }

.integrantes nav {font-size: 0.7}

}