@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Koulen&family=Magra&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
    background-color: #0f5f85;
    color: #ede6d1;
    margin: 0;
}
    
.titulo{
    font-family:'Koulen', cursive;
    font-size: 100px;
    color:antiquewhite;
    background-color: inherit;
}

.subtitulo{
    font-family:'Koulen', cursive;
    font-size: 13vmin;
    color:antiquewhite;
    background-color: inherit;
}

.cabecera{
    justify-content: center;
    display: flex;
    width:100vw;
    height:3.5vh;
    background-color:rgb(36, 55, 59);
    color: #bfdbd8ea;
    position: fixed;
    top:0;
    z-index: 2;
}
    
.botonera{
    display: flex;
    justify-content: space-between;
}
    
.pie{
    width: 100vw;
    height: 3vh;
    background-color: rgb(36, 55, 59);
    color: #bfdbd8ea;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;

}
    
.contenido{
    width:90vw;
    height:100vh;
    margin:auto;
    padding-top:auto;
    display:flex;
    flex-direction: column;
}
    
.seccion{
    width: 100%;
    min-height: 80vh;
    background-color: #0f5f85;
    padding-top: 15vh;
}
    
.presentacion{
    display: flex;
    align-items: center;
    justify-content: center;
}
    
.preguntas{
    display: flex;
    justify-content: flex-start;
    font-family:'Koulen', cursive;
    font-size: 70px;
    max-width: 100vw;
    color:antiquewhite;
    background-color: inherit;
}

.preguntas2{
    width: 70%;
    overflow: scroll;
}

.izq{
    margin-right: 5%;
    padding-right: 5%;
    margin-left: 5%;
    text-align: right;
    color: #45a7d1;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    padding-bottom: 2%;
    
}

.izq::before{
    content: "→";
    padding-right: 3%;
}

.respuesta{
    background-color: transparent;
    font-weight: 900;
    color: #45a7d1;
}
    
.illia{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:'Koulen', cursive;
    font-size: 70px;
    color:antiquewhite;
    background-color: inherit;
}
    
.preferencias{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:'Koulen', cursive;
    font-size: 70px;
    color:antiquewhite;
    background-color: inherit;
}
    
.futuro{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-family:'Koulen', cursive;
    font-size: 70px;
    color:antiquewhite;
    background-color: inherit;
}
    
.collage_v, .collage_h{
    display: none;
    width: 90%;
    margin: auto;
    }
    .collage_v img{
        width: 100%;
    } 
    .collage_h img{
        width: 100%;
    }
    
    @media (orientation:landscape){
        .collage_h{
            display: block;
        }
    }

    @media (orientation:portrait){
        .collage_v{
            display: block;
        }
    }

    #futurito{
        margin-right: 100vh;
        margin-left: 10%;
    }

    #textito{
        display: flex;
        position: absolute;
        font-family: 'Magra', sans-serif;
        color: #e6dcbe;
        font-size: 20px;
        margin-top: 15%;
        margin-left: 48%;
      }