/*  * {} -> Selector universa, sirve para resetear márgenes y padding.
    
    box-sizing: border-box; -> mantiene fijo el width que hayamos elegido (p. ej. 50%). Si se aplica padding, este se aplicará hacia adentro sin modificar el width. También va en Selector Universal.

    section article {} -> Todos los artículos dentro de todas las secciones que haya.

    .integrantes {} -> Selector del modo clase, comienza con un punto y busca el atributo "integrantes" en el html, p. ej. <article class="integrantes">

    nav a:hover -> Pseudo clase, clase que se dispara en un evento, en el ejemplo: los links dentro del nav cada vez que el mouse pase por sobre estos.

    <div> -> Etiqueta de html para hacer divisiones o especificar cambios estéticos sumándole una class que le da formato en css -> <div class="contenedor">

    margen: hacia afuera  –  padding: hacia adentro
    border: 0.3rem solid red; <- tres valores: grosor, tipo, color (aplica a los 4 bordes)
*/

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* 
    "auto" chequea el espacio a derecha e izquierda y los centra.
    display: flex flexibiliza la ubicación y permite columnas, se aplica al padre.
    flexbox.help para probar orden de columnas. flexboxfroggy.com.
    http://getbootstrap.com/docs/4.5/overview/ anchos estándar de pantalla.
*/

h1 {
    font-family: 'Corben', serif;
}

h2 {
    font-family: 'Corben', serif;
    letter-spacing: 0.1rem;
}

h3 {
    font-family: 'Corben', serif;
}

p {
    font-family: 'Poppins', sans-serif;
}

.versales {
    font-size: 68%;
}

.navegacion {
    width: 75rem;
    padding: .75rem 3%;
    background-image: url(../img/fondo-nav2.jpg);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 1.5rem;
}

.menu ul {
    list-style: none;
    display: flex;
}

.menu a {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.2rem;
    text-decoration: none;
    padding: 1.2rem 1rem;
    text-transform: uppercase;
}

.menu a:hover {
    background-color: rgba(0, 0, 255, 0.5);
}

.info {
    display: flex;
    justify-content: space-between;
}

.info article {
    width: 48%;
    min-height: 15rem;
    border: 0.1rem solid black;
}

.info h2 {
    color: blueviolet;
}

.info img {
    width: 100%;
}

.materias img {
    border-radius: 1.4rem 1.4rem 0 0;
}

.sobremi-txt {
    padding: .5rem 2rem 2rem 2rem;
}

.sobremi a {
    color: black;
}

.materias {
    border-radius: 1.5rem;
}

.companeros {

    margin: 1.5rem auto;
    background: #eff0b7;
    border: 0.1rem solid black;
    border-radius: 13rem;
    display: flex;
    justify-content: space-around;
}

.companeros .compa {
    display: flex;
    align-items: center;
}

.companeros .compa img {
    border: 0.15rem solid black;
    border-radius: 10rem;
    margin: 1rem;
    height: 200px;
}

.companeros .compa a {
    font-family: 'Corben', serif;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
    padding: 0 1rem;
}

.companeros .compa a:hover {
    background-color: rgba(0, 0, 0, .1);
    border-radius: 2rem;
}

footer {
    margin: 1.5rem auto;
    padding: 1rem 3%;
    background-image: linear-gradient(to top right, #4216a7, #e66fe2);
}

footer p,
a {
    font-size: 0.8rem;
    color: #ffffff;
}