@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');


</style>
*{margin:0; padding 0; box-sizing:border-box;}  
body{font-family: 'Josefin Sans', sans-serif; text-align: center; margin: 0;  }

/* NAV SUPERIOR */ 
header nav {
    background:#E9FFFE; 
    text-decoration:none;
    color: #757575;
    padding: 1%; 
    text-align: center;
    margin: 0rem;
    flex-wrap: wrap;
}
header nav ul li {display: inline-block;}
header nav ul li a{
    text-decoration: none;
    padding: 2rem;
    padding-bottom: 1rem;

    background:#E9FFFE; 
    text-decoration:none;
    color: #757575; 
    text-align: center;
       
}

header nav ul li a:hover{
     background:#757575;
     color:#E9FFFE;
     border-radius: 1rem;
    padding-top: 1rem;
    
}

a:link {
    color: #757575;
}
a:visited {
    color: #757575;
}


/* PRESENTACION */ 
.presentacion {
    align-content: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    background: #C5EAE9;
    padding:1%;
    flex-wrap: wrap;
    
    }
.presentacion article{
    box-sizing: 30%;
    color:#FFFF;
    text-align: center;
    width: 30%;
    padding:2%;
    margin: 5%;
    margin-top: 10%;
    vertical-align: middle;
    justify-content: center;
    text-shadow: 0.18rem 0.2rem 0.5rem #4d4d4d;
    
}
.presentacion article h1{font-size: 2.2rem;  
}
.avatar {box-sizing: 30;    
    min-width: 5%;
    margin: 5%;
    border-radius: 10rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
    
}


/* NAV  INTEGRANTES */ 
.integrantes{
    background:#E9FFFE; 
    text-decoration:none;
    color: #757575;
    padding: 2%; 
    text-align: center;
    margin: 0rem; 
}
.integrantes ul li {display: inline-block;
}
.integrantes ul li a{
    text-decoration: none;
    padding: 2rem;
    color: #757575; 
    text-align: center;
}
.integrantes ul li a:hover{
     background:#757575;
     color:#E9FFFE;
     border-radius: 1rem;
    
}

/* MATERIAS APROBADAS */ 
.MATERIAS{
    color: white;
    margin: 1%;
    align-content: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
    
}

.sec-sin-col{
    color: white;
    margin: 1%;
    align-content: center;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    
}

    

.CBC{background: #7D6AF7;
    padding: 3%; 
    padding-left: 1%;
    padding-right: 1%;
    margin: 1%;
    align-content: center;
    vertical-align: middle;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
    min-width: 20rem;
}

.Nivel-1{background: #E99DDB;
    padding: 3%;
    padding-left: 1%;
    padding-right: 1%;
    margin: 1%;
    align-content: center;
    vertical-align: middle;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
}
.Nivel-1{ margin-top: 1.5rem; }

.Nivel-2{background: #FE851D;
    margin-left: 1%;
    height: 20rem;
    padding: 3%;
    margin-top: 10%;
    align-content: center;
    vertical-align: middle;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
}

.EN1{ background: #FE851D;
     align-content: center;
    vertical-align: middle;
    padding: 2%;
    margin: 1%;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
}
.EN2{background: #7D6AF7;
     align-content: center;
    vertical-align: middle;
    padding: 2%;
    margin: 1%;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
}
    

.nombre-de-la-app{background: #E99DDB;
    align-content: center;
    vertical-align: middle;
    padding: 2%;
    margin: 0%;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
}

.datos-uni{background: #FE851D;
    align-content: center;
    vertical-align: middle;
    padding: 2%;
    margin: 1%;
    border-radius: 2rem;
    box-shadow: 0.2rem 0.3rem 1rem #4d4d4d;
    max-width: 55%;
}

.icono-fadu{ 
    box-sizing: 2rem;
    min-width: 2%;
    
}
    
/* FOOTER */ 
footer{
    background:#E9FFFE;
    color: #757575; 
    padding: 1%;
}

footer a:hover{
    background:#757575;
     color:#E9FFFE;
     border-radius: 0.5rem;
     padding: 0.5rem;   
}

footer p {font-size: 0.6rem; }

@media (max-width:31rem){
    header nav {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
           
    }
      header nav ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
          margin: 0;
 
           
    }
     header nav ul li {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
  
           
    
    
}