@import url('https://fonts.googleapis.com/css2? family= Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300; 1,400;1,500;1,600;1,700;1,800;1,900 & familia= Roboto:wght@300 & display=swap');

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


header {
    text-align: center;
    padding: 2rem;
}


/*Cecilia Marco*/
h1 {
    font-family: 'Poppins', sans-serif;
    color: rgb(0, 0, 0) ;
    text-align: center;
    padding: 1rem;
    font-size: 3rem;
}


/*Foto perfil*/
img {
    border-radius: 50%;
    justify-content: center;
}


div {
    text-align: center
}


/*Menú 5*/
nav ul li {
    display: inline-block;
    text-align: center;
    border-radius: 5rem;
}


/*Click menú 5*/
nav ul li:hover{
    color: beige;
    background-color: rgb(108, 42, 214) ;
}


nav {
    text-align: center
}


/*Materias diseño gráfico*/
h2 {
    color:rgb(84, 20, 168);
    font-weight: 700;
    text-align: center;
    font-size:2rem;
    padding-top: 5rem;
}


/*NIVEL 1 2 3 4*/
h4 {
    color: beige ;
    text-align: center;
    padding: 0.5rem;
    background-color:rgb(84, 20, 168) ;
    border-radius: 5rem;
}


/*Enumeración materias*/
nav ol li {
        display: inline-block;
        text-align: center;
        }


/*Cátedra*/
.colornegro {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: rgb(0, 0, 0);
}


/*Nombre integrantes*/
a {
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    padding: 1rem;
    background-color: rgb(72, 70, 73);
    border-radius: 50rem;
    text-decoration: none;
}


article, h3 {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 1rem;
}


/*Click nombre integrantes*/
a:hover {
    color: black;
    font-weight: 600;
    background-color: rgb(108, 42, 214)
}


/*Integrantes*/
h3 {
    color: rgb(72, 70, 73)
}

/*Contenedor 1*/
.contenedor1 {
    display: grid;grid-template-columns: auto auto auto; gap: 2rem;
}


/*Contenedor NIVEL1*/
.contenedor2 {
    background-color:rgb(209, 209, 209) ;
    text-align: left;
    padding: 3rem;
    border-radius: 5%;
}


/*Contenedor NIVEL2*/
.contenedor2largo {
    background-color:rgb(209, 209, 209) ;
    text-align: left;
    padding: 3.8rem;
    border-radius: 5%;
}


/*Contenedor NIVEL3*/
.contenedor2maslargo {
    background-color:rgb(209, 209, 209) ;
    text-align: left;
    padding: 4.6rem;
    border-radius: 5%;
}


/*Contenedor NIVEL4*/
.contenedor2maslargolargo {
    background-color:rgb(209, 209, 209) ;
    text-align: left;
    padding: 5.3rem;
    border-radius: 5%;
}


/*Contenedor GRUPO14*/
.contenedor3 {
    background-color: rgb(35, 35, 36);
    border-radius: 50rem;
    color:beige;
    width: 8rem;
    height: 1rem;
    text-align: center;
    padding: 1rem;
}


/*Click GRUPO 14*/
.contenedor3:hover {
    color: rgb(0, 0, 0);
    background-color: rgb(108, 42, 214) ;
}


.negrita {
    font-weight: 700;
    color: black;
}


section { display: grid;grid-template-columns: auto auto auto; gap: 2rem;}


.antesfooter {
    text-align: center;
    font-weight: 400;
    font-size: small;
    padding-top: 1rem;
    color: rgb(78, 77, 77);
}


footer {
    text-align: center;
}


.minimo {
    font-size: x-small;
}




/*Responsive*/
@media (max-width:40rem) {
    .contenedor1 {
        display: grid;
        grid-template-columns: 100%; 
    }
    
    section {
        display: grid;
        grid-template-columns: 100%; 
    }
    
    nav ul li {
        text-align: center;
        font-size: 0.5rem;
    
    }

    article, h3 {
        text-align: center;
    }

    nav, ol, li {
        text-align: center;
    }
    

    
    a {
        font-weight: 300;
        padding: 1rem;
        display: inline-block;
        margin: 0.5rem;
        text-align: center;
        justify-content: center
    }

}