@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap');


*{padding: 0; margin: 0; box-sizing: border-box;transition: 1s all;}

/* Estilos generales */
body{ font-family: 'Roboto', sans-serif;}

/* Nav-vinculos */
nav{ background:#bbb3ff; padding: 1rem;}
nav ul li{ display: inline-block;} 
nav ul li a{ color: #8275F4; text-decoration: none; padding: 1rem;}
.link-activo{ background:#ffffff; padding: 1rem;} 

/* header-datos personales */
.header-perfil{ display: flex; align-items: center; background: #8275F4; padding: 5rem;}

header{ 
background-size: cover;
background-position: center;
height: 16rem;}

/* imagen */
.imagen-alumno{ display: block; justify-content: center; border-radius: 9rem; width: 9rem; height: 9rem; border: 0.2rem solid; border-color: #bbb3ff; }
.nombre-alumno {color: #F5F6FA; text-align: center; font-size: 1.5rem; font-weight: 500; margin-top: 1rem; padding-bottom: 0.5rem;}

/* materias */
.listado-materias{ padding: 1rem; background: #ffffff; color: #000000; font-weight: 300; text-decoration: none;}
.titulo-article-perfil{font-size: 1rem; font-weight: 500; color: #bbb3ff; text-align: center; margin: 1rem 0 0 0;}
.datos-materias {font-size: 1rem; font-weight: 500; color: #838EA6; text-align: center; margin: 1rem 0 0 0; }

.inicio 
.columna-1{width: 100%; text-decoration: none; }
.columna-2{width: 100%; text-decoration: none; }


/* footer */
footer p{ color: #e6e6e6; font-weight: 300; font-size: 0,7rem; background: dimgrey; padding: 1rem;}

/* Article Materias en curso */
.article-materias {margin: 0rem 0rem 1.5rem 0rem;}
.materias-en-curso {font-size: 0.8rem; font-weight: 300; color:#838EA6; text-align: center; margin: 1rem 2rem 0.5rem 2rem;}
.div-materias-curso {display: inline-block;justify-content: center;}
.boton-materias-en-curso {width: 55%; background: #8275F4; color: #F5F6FA; font-weight: 500; font-size: 0.8rem; border: none; border-radius: 0.2rem; padding: 0.6rem; margin: 1rem 0 0 5.5rem;}
.titulo-compatibilidad {font-size: 1.5rem; font-weight: 700;}


/* Cuando es mayor a 768px */
@media screen and (min-width:48rem) {
    
nav{ background: #bbb3ff;} 
    
.inicio {display: flex; justify-content: space-between; margin: 1rem 0 0 5.5rem;}
.materias-en-curso {opacity: 0;}
.boton-materias-en-curso {width: 30; background: #8275F4; color: #F5F6FA; font-weight: 500; font-size: 0.8rem; border: none; border-radius: 0.2rem; padding: 0.6rem; }
.imagen-alumno{ display: block; justify-content: center; border-radius: 9rem; width: 9rem; height: 9rem; border: 0.2rem solid; border-color: #bbb3ff; margin: 0rem 0rem 0rem 35rem; }
.nombre-alumno {color: #F5F6FA; text-align: center; font-size: 1.5rem; font-weight: 500; margin: 1rem 0rem 0rem 35rem; padding-bottom: 0.5rem;}


}