/* selector {propiedad: valor;} */
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');/* fuente importada desde google fonts. Siempre va al principio del css */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} /* el asterisco quiere decir para todas las etiquetas, se recomienda empezar con esto. Border-box hace que se mantenga el ancho que yo le pongo */

body{
    background: #f0f0f0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
} /* ctrl + e para que se abra el selector de color */

header{background: #f0f0f0;}

h1{color: #56bc89;}

h2{color: #f8b51d;
    font-family: 'Fredoka One', cursive;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
}

h3{color: #56bc89;
}

h4{
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

footer p{color: #797979; /* dependencia de padre e hijo (el espacio define quien es padre de quien) */
        font-size: 0.7rem; /* unidad 1rem= 16px y es el default que traen los parraos. Para hacerlo mas chico usamos decimales. Usamos rem xq cuando usamos responsive vamos a poder definir cuanto vale mi rem dependiendo del dispositivo. X ejemplo, en movile mi rem vale "x". El rem sera nuestra unidad variable. Los rem estan anclados al dispositivo que se esta usando. */
        padding: 0.5rem;
} 

.rotuloindividual{
    display: flex;
    justify-content: space-between;
    padding: 2rem;
} /* display-flex se aplica al padre de los elementos que quiero editar. */

.integrantes{
    background: white;
    width: 48%;
    padding: 5%;
    border-radius: 2rem 0 2rem 0;
    box-shadow: 1rem 0.5rem 2rem rgba(85, 82, 82, 0.38); /* horizontal vertical blureado color */
    
 /* -el ancho siempre va en relacion al padre. Recomendacion: que sean en % para que sea funcional al responsive.
-margen: espaciado hacia afuera del elemento.
-padding: espaciado hacia adentro del elemento.
- el alto es acpmsejable no ponerlo o poner alto-minimo para que se adapte si necesita mas alto.
- Propiedad "border"  border-right: 0.3rem solid red; ancho tipo color. Si no le damos especificacion (derecha, izq, arriba, abajo) se aplica en los 4 bordes.*/           
} /* para indicar que es un selector de modo class, se escribe con "." al principio. Cualquier etiqueta puede tener clases. */

.alumne{
    font-family: 'Raleway', sans-serif; font-weight: 400;
    text-decoration: none;
    text-align: center;
    padding: 0.5rem;
    display: inline-block;
    margin: 0.5rem;
}

.alumne :hover{
    background: #f8b51d;
    border-bottom-color: #f8b51d;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: white;
    padding: 0.5rem;
}

.alumne .negrita{
    font-weight: 600;
}

.materias{
    background: #f8d88f;
    width: 48%;
    padding: 5%;
    border-radius: 2rem 0 2rem 0;
    box-shadow: 1rem 0.5rem 2rem rgba(85, 82, 82, 0.38);
}

.materias p{
    padding: 0.5rem;
}

.contenedor{
    max-width: 75rem;
    margin: auto;
    
}

.menu{
    padding: 0.5rem;
    padding-top: 1.5rem;
    display: inline-block;
    font-family: 'Raleway', sans-serif; font-weight: 400;
    text-decoration: none;  
}

.menu :hover{
    background: #ea4b4b;
    color: #187714;
    padding: 0.5rem;
}

.avatar {
    height: 15rem;
    width: 15rem;
    border-radius: 25rem; /* para darle forma circular a la imagen */
    padding: 0.5rem;
}

.grupo{
    margin: auto;
}

.avatarflorencia{
    height: 5rem;
    width: 5rem;
    border-radius: 10rem;
    margin-top: 2rem;
}

.avatarromina{
    height: 5rem;
    width: 5rem;
    border-radius: 10rem;
}
.avatardesire{
    height: 5rem;
    width: 5rem;
    border-radius: 10rem;
}

.avatartomas{
    height: 5rem;
    width: 5rem;
    border-radius: 10rem;  
}