/* b: #131213 
    g1:#3D3941
    w: #F8FFF3
    a1: #C2FD33
    a2: #55B1E4
*/

/* ---------------------------------------------------------------------- */
/*                               GENERAL                                  */
/* ---------------------------------------------------------------------- */

html {
    height: 100%;
}

body {
    min-height: 100%;

    display: flex;
    flex-direction: column;

    background: #131213;
    margin: 0;
    }

main {
    flex-grow: 1;
}

/* ---------------------------------------------------------------------- */
/*                               TIPO                                     */
/* ---------------------------------------------------------------------- */

.space-mono-regular {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

.space-mono-bold {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: normal;
}

.space-mono-regular-italic {
    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: italic;
}

.space-mono-bold-italic {
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-style: italic;
}

/* ---------------------------------------------------------------------- */
/*                                HEADER                                  */
/* ---------------------------------------------------------------------- */

header {
    background: #131213;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    width: 100%;
    height: 71px;
    flex-shrink: 0;

    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.50);
}

.header-boton-grupo {
    margin-left: 2%;
    margin-top: 15px;
}

.header-boton {
    background: #131213;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    gap: 10px;

    max-width: 100px;
    min-width: 30px;

    border: none;
    border-radius: 100px;
    transition: transform 0.3s ease-in-out;

    cursor: pointer;
}

.header-boton a {
    color: #C2FD33;
    text-align: center;
    font-family: "Space Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    text-decoration: none;
}

.header-boton:hover {
    background: #C2FD33;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    max-width: 100px;
    min-width: 30px;

    gap: 10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.50);
    transform: scale(1.02);
}

.header-boton:hover a {
    color: #131213;
    text-align: center;
    font-family: "Space Mono";
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/*                             INFO GRUPO                                 */
/* ---------------------------------------------------------------------- */

.info-grupo {
    margin-right: 2%;
    margin-left: 2%;
    flex-wrap: wrap;
    justify-content: center;

    /* background: brown; */
}

h1 {
    margin: 0;
    margin-top: 2%;
    display: flex;
    justify-content: center;


    color: #F8FFF3;
    font-family: "Space Mono";

    padding: 0 2%;
    text-align: center;
}

h2 {
    display: flex;
    justify-content: center;

    font-family: "Space Mono";
    color: #736D79;

    padding: 0 2%;

    text-align: center;
    margin: 0;
    margin-top: 0.5%;
    margin-bottom: 2%;
    
    gap: 0px;
}

/* ---------------------------------------------------------------------- */
/*                          BOTONES PERFILES                              */
/* ---------------------------------------------------------------------- */

.estudiantes-botones {
    margin-right: 2%;
    margin-left: 2%;
    margin-bottom: 2%;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 1vh;

    /* background: brown; */
}

.perfil-boton {
    background: #3D3941;
    width: 20%;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-width: 200px;
    max-height: 60vh;

    border: 0px;
    padding: 0;

    border-top-left-radius: 100vh;
    border-top-right-radius: 100vh;
    border-bottom-left-radius: 30vh;
    border-bottom-right-radius: 30vh;
    transition: transform 0.3s ease-in-out;

    cursor: pointer;
}

.perfil-boton img {
    margin-top: 10%;
    margin-bottom:0;
    padding: 0;
    width: 80%;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 100vh;
}

.perfil-boton a {
    color:#131213;
    text-decoration: none;
}

.perfil-boton:hover {
    background: #C2FD33;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.20);
    transform: scale(1.02);
}

.perfil-boton:hover h3 {
    color:#131213;
}

.perfil-boton:hover h4 {
    color:#131213;
}

h3 { 
    margin: 0;
    margin-top: 20%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 5%;

    color: #F8FFF3;

    padding: 0;
    text-align: center;

    font-family: "Space Mono";
    font-size: 140%;

    gap: 0px;
}

h4 { 
    margin: 0;
    margin-top: 5%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 5%;

    color:#C1BACB;

    padding-bottom: 1.5vw;
    text-align: center;

    font-family: "Space Mono";
    font-size: 90%;

    gap: 0px;
}

.perfil-boton a p { 
    display: flex;
    justify-content: center;
    margin-top: 10%;
    margin-bottom: 20%;
    margin-right: 10%; 
    margin-left: 10%; 

    color: #131213;

    text-align: center;
    font-family: "Space Mono";
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-height: 200px;
}

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

footer {
    flex-shrink: 0;

    background-color: #131213;
    font-size: smaller;

    box-shadow: 0px -2px 10px 0 rgba(0, 0, 0, 0.50);
}

footer p {
    display: flex;
    justify-content: center;
    margin-top: 1%;
    margin-bottom: 2%;
    margin-right: 10%; 
    margin-left: 10%; 

    color: #736D79;

    text-align: center;
    font-family: "Space Mono";
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-height: 200px;
}

/* ---------------------------------------------------------------------- */
/*                                iFrame                                  */
/* ---------------------------------------------------------------------- */

iframe {
    width:60%;
    height:65vh;
    border: 1px solid #131213;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
    display: block;

    border-radius: 5vh;
}

/* Pantallas hasta 768px */
@media (max-width: 768px) {
    iframe { 
        /* Adjust border radius for smaller screens if necessary */
        border-radius: 2vh; 
    }
}