@charset "utf-8";

@font-face {
font-family: hatten;
    src: url("fuentes/hatten.ttf");
}

/* reglasgenerales */

html {
    height: -webkit-fill-available;
}
    
body {
    background-color: #5a5d6f;
    font-family: haettenschweiler, sans-serif;
    font-size: 1.2em;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    
    /* para que footer quede abajo aún con poco contenido */
    
    /* caja flexible */
    display: flex;
    
    /* dirección de sus elementos */
    flex-direction: column;
    
    /* organización de los elementos según el eje principal (vertical por la propiedad anterior) */
    justify-content: space-between; 
}

ul { 
    /* para sacarle los circulitos de adelante y todo eso que viene predeterminado */
    list-style: none; 
    margin: 0; 
    padding: 0;
}

a {
    /* para sacarle el subrayado predeterminado y cambiarle el color */
    text-decoration: none;
    color: aliceblue;
}

img { 
    /* para que la medida de la foto se amolde a la caja que la contiene */
    width: 100%;
    /* para que la altura acompañe a la proporción del ancho */
    height: auto;
}

figure {
    /* para sacarle el margen y los bordes a las fotos  */
    margin: 0;
    padding: 0;
    /* para que crezcan hasta ese máximo */
    max-width: 30em;
}



/* para celular. mobile first */

#isologo {
    /* ordenar dos cosas en una misma línea */
    display: inline-block;
    
    max-width: 100em;
    vertical-align: middle;
}

main {
    /* crece para llenar la caja contenedora */
    flex-grow: 1;
}

main img {
    max-width: 50em;
}

main section h1 {
    margin: 3; 
    padding: 0;
    justify-items: center;
}

main section img {
    display: block;
    margin: auto;
    border-radius: 1000px;
    margin-bottom: 2em;
    width:60%;
    height:auto;
    max-width: 12em;
    vertical-align: middle;
    text-align: center;
}

main div img {
    margin: auto;
    border-radius: 20px;
    margin-bottom: 2em;
    width:60%;
    height:auto;
    max-width: 12em;
    vertical-align: middle;
    text-align: center;
    margin: 0em 2 2 2;
}

} 

main .contenedor {
    display: flex; 
    justify-content: space-between;
    max-width: 12em;
    vertical-align: middle;
    align-content: center;
    border-radius: 1000px;
    margin-bottom: 2em;
    width:60%;
    height:auto;
    max-width: 12em;
    vertical-align: middle;
    text-align: center; 
}


    
.botones nav ul li a {
    /* botoneras (plan, mapa, etc e integrantes) */
    text-decoration: none;
    color: #6e7eb4;
    font-size: 01 em;
    background-color: #4f525a;
    display: block;
    text-align: center;
    margin: 0 0 0.3em 0;
    padding: .5em;
    color: #6e7eb4;
    
    /* caja flexible */
    display: flex;
    
    /* centrado en la horizontal */
    justify-content: center;
    
    /* centrado en la vertical */
    align-items: center;
}

ul li a:hover {
    /* botoneras cuando pones el cursor arriba */
    background-color: #ffffff;
}

main section h1 {
    /* isabel dozo */
    line-height: 3em;
    background-color: #4f525a;
    padding: 0 0 0 0em;
    vertical-align: middle;
    text-align: center;
}
    
footer {
    display: flex;
    justify-content: center;
    
    background-color: #5a5d6f;
    margin: 2em 0 0 0;
}

footer > div {
    display: inline-block;
    max-width: 100%;
}

footer img {
    display: inline-block;
    max-width: 12em;
    vertical-align: middle;
}

/* plan */

#paleta {
    width: 100%;
    height: auto;
}

/* para escritorio */