@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* QUITAR MARGENES DE PAGINA GENERAL */
* {margin: 0; padding: 0; box-sizing: border-box;}

/* REGLAS GENERALES */

body{
    display: block;
    text-align: CENTER;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal
    
}

img {
    overflow-clip-margin: content-box ;
    overflow: clip;
}


/* MENU PRINCIPAL */

header {    
    width: 100%;
    height: 3rem;
    background-color: hsl(106, 54%, 66%);
    display: flex;
    justify-content: center;
    list-style-type: none;
    text-decoration: none;
    border-bottom: 0.1rem solid rgb(27, 27, 27);
}

/*ESTILO DE LINK */

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    margin top: 1%;
}   

header nav ul li a {
    text-decoration: none;
    font-size: 0.8rem;
    color: rgb(0, 0, 0);
    font-style: bold;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

/*------------------------------------------------------------ESTILO DE PERFIL -------------------------------------------------------------------------------------------------*/     

.perfil{
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: rgb(172, 222, 255);
    border-bottom: 0.1rem solid rgb(27, 27, 27);
}

/* foto */

.foto {
    display: block;
    unicode-bidi: isolate;
    margin-top: 5%;
    
}

.foto img {
    width: 20%;
    border-radius: 3%; 
    border: solid black 0.1rem;
}

/* tipografia */

.tipografia-perfil {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -1% 30% 0% 40%;
    margin-bottom: 5%;
    
     
}

.tipografia-perfil img {
    max-width: 100%;
    height: auto;
    padding: 5%;
}

figcaption {
    padding: -400%;
}

/*----------------------------------------------------------------- MATERIAS -------------------------------------------------------------------------------------------------*/

h1 {
    color: aliceblue;
    padding-top: 1%;
    font-size: 1.5REM;
    text-align: center;
    background-color: rgb(238, 157, 64) ;
}

#materias {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    background-color: rgb(238, 157, 64);
    border-bottom: 0.1rem solid rgb(27, 27, 27);
    padding: 25px;
}

.lista {
    background-color: rgb(255, 228, 141);
    width: 250px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    text-align: center;
    padding: 25px;
    border: solid black 0.1rem;
}

.lista p {
    font-size: 0.9REM;
    line-height: 150% ;
}

/*-----------------------------------------------------------------INTEGRANTES-------------------------------------------------------------------------------------------------*/

#integrantes {
    max-width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: rgb(231, 138, 208);
    border-bottom: 0.1rem solid rgb(27, 27, 27);
    padding: 1% 0% 3% 0%;
}

#integrantes div h2{
    color: aliceblue    ;
    padding: 1%;
}

.contenedor-integrantes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.recuadro-integrante {
    background-color:  hsl(106, 54%, 66%);  
    width: 170px;
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 25px;
    border: solid black 0.1rem;
    
}


.recuadro-integrante a img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: solid black 0.1rem;

}

figcaption {
    padding-top: 5%;
}


#sin-aprobar {
    opacity: 60%;
}

.recuadro-integrante a {
    text-decoration: none;
    color: black;
    
}
/*-------------------------------------------------------------------INSTITUCIONAL--------------------------------------------------------------------------------------------*/

#institucional {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    gap: 30px;
    background-color: rgb(172, 222, 255);
    border-bottom: 0.1rem solid rgb(27, 27, 27);
}
.info {
    font-size: small;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    text-align: center;
    padding: 25px;
}

/*-------------------------------------------------------------------FOOTER--------------------------------------------------------------------------------------------*/

footer p {
    
    background-color: hsl(106, 54%, 66%); 
    padding: 1%;
    font-size: 0.7REM;
    opacity: 80%;
}