/* fuentes importadas */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

::-webkit-scrollbar {
    width: .6vw;
    background-color:burlywood;
}

::-webkit-scrollbar-thumb {
    background-color: var(--c4);
    border-radius: 30px;
    background-color: orange;
}

*{
    background-image: "../img/background.jpg";
    background-color: #5c4335;
    color: #f2c849;
    font-family: 'DM Serif Display', serif;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}
body {
    height: 100%;
    margin: 0 auto;
    
}

/* formato del titulo */
.titulo {
    font-family: 'DM Serif Display', serif;
    font-size: 10vmin;
    text-align: center;
    color: darkgoldenrod;
    background-color: inherit;
    align-items: center;
    order: 0;
    flex: 0 1 auto;
    align-self: center;
    margin-top: 25vh;
    /* insertar de codepen */
    
}

/* formato de la cabecera */
.cabecera{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100vw;
    min-height:10vh;
    background-color: #5c4335;
    color: #f2ca7e;
    position: fixed;
    top: 0vh;
    align-items: center;
    z-index: 90;

}
.anuario{
    text-align: center;
    font-size: medium;
}

/* organiza la barra */
.botonera{
    display: flex;
    justify-content: space-between;
}

/* propiedaddes del footer */
.pie{
    padding-top: 	0.7%;
    text-align: start;
    width: 100vw;
    height: 10vh;
    background-color: #5c4335;
    color: chocolate;
    position: fixed;
    bottom: 0vh;
}
/* contenedor principal */
.contenido {
    width: 100vw;
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
}

/* esta es la clase genérica */
.seccion {
    width: 100%;
    margin:auto;
    min-height: 80vh;
    padding: 0;
}

/* cada una de ellas */
.presentacion{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: center;
    background-color: #d2f881;
    padding-top: 0%;
}
.navegador{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    order: 0;
    flex: 0 1 auto;
    align-self: stretch;
    background-color: #5c4335;
    padding-top: 0%;

}
.illia{
    background-color: #89d83bbe;
    display: flex;
    justify-content: space-around;
    color:rgb(77, 57, 7);
    padding-top: 4%;
    height: 100vh;
}
.preferencias{
    background-color: #7EA629;
}
.futuro{
    display:flex;
    justify-content: space-between;
    flex-direction: column;
    background-color: #40661f;
    padding-top: 0%;
    height: 100vh;

}

/* ocultar capas */
.collage_v, .collage_h{/* ambas clases */
    /* ocultamos ambas */
    display: none;
    width: 90%;
    margin: auto;
}

/* imagenes */
.collage_v{
    width: 100%;
}
.collage_h{
    width: 42%;
    height: 100%;
    background-color: transparent;
    align-items: center;
}

/* especificamente que capa mostrar */
/* horizontal */
@media (orientation:landscape){
    /* en caso de ser, hacer visible la capa */
    .collage_h{
        display: block;
    }
}
/* vertical */
@media (orientation: portrait){
    /* en caso de ser, hacer visible */
    .collage_v{
        display: block;
    }
}
.preguntas{ 
    background-color: #C1F257;
    display:block;
    width:100%; height:100vh;
    background:#C1F257;
    overflow:none;
}

.subtitulo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6vmin;
    letter-spacing: 0.25em;
    background-color: transparent;
    text-align: center;
    text-shadow: 2px 2px 2px rgb(77, 57, 7);
    padding-top: 5%;
}
/* Galerías */

.gallery {
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    overflow-x: scroll;
    margin: 15vh 0;
    border-left: 10px solid var(--c0);
    border-right: 10px solid var(--c0);
    border-radius: .5em;
}

.gallery::-webkit-scrollbar {
    height: 1vh;
}

.galleryImg {
    user-select: none;
    width: auto;
    height: 40vh;
    display: inline-block;
    box-shadow: 0 1em 10px rgba(0, 0, 0, 0.555);
    margin: 4vh 2.5vw;
    flex-shrink: 0;
}


/* From uiverse.io by @adamgiebl */
.cssbuttons-io-button {
    background: #f2ca7e;
    color: #c9a91a;
    font-family: inherit;
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 1.vmax;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #d2f881;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
   }
   
   .cssbuttons-io-button .icon {
    background:#5c4335;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #d2f881;
    right: 0.3em;
    transition: all 0.3s;
   }
   
   .cssbuttons-io-button:hover .icon {
    width: calc(100% - 0.6em);
   }
   
   .cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: #d2f881;
   }
   
   .cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
   }
   
   .cssbuttons-io-button:active .icon {
    transform: scale(0.95);
   }
   
   /* . */
.top {
    background: wheat;
    color: #222229;
    transform: rotateX(90deg) translate3d(0, 0, 2em);
    box-shadow: inset 0 0 0 5px #fff;
}
   
.front {
    background: #222229;
    color: #fff;
    box-shadow: inset 0 0 0 5px #fff;
    transform: translate3d(0, 0, 2em);
}
.redes {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}