@import url(https://fonts.googleapis.com/css2?family=Square+Peg&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Neucha&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap);

*{
    background-color:white ;
    color:rgb(240, 128, 128);
    font-family: "Indie Flower", sans-serif;
    margin: 0;
    font-size: 4vmin;

}

/* .titulo{
    font-family: "Neucha";
    font-size: 20vmin;
    color:white;
    background-color: inherit;
    padding:8vmin;
    background-color: transparent;

    
} */

.cabecera{
    width: 100vw;
    height: 10vh;
    background-color:white;
    color:rgb(240, 128, 128);
    position:fixed;
    top: 0vh;
}

.botonera{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;

}

.myButton {
	box-shadow:inset -5px 34px 4px -24px #ff8b87;
	background-color:#e4685d;
	border-radius:10px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Georgia;
	font-size:15px;
	padding:4px 30px;
    margin: 0px 15px;
	text-decoration:none;
	text-shadow:0px 1px 50px #b23e35;
}
.myButton:hover {
	background-color:#eb675e;
}
.myButton:active {
	position:relative;
	top:1px;
}

.pie{
    width: 100vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    position:fixed;
    bottom: 0vh;

}

.seccion{
    width: 100%;
    min-height: 80vh;
    padding: 0;
    
}

.contenido{
    width: 90vw;
    margin: auto;
    padding-top: 10vh;
    display:flex;
    flex-direction: column;
}

.presentacion{
    background-color:rgb(205, 92, 92) ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preguntas{
    background-color:rgb(240, 128, 128) ;
    padding-top: 10vh;

    /* para organizar contenido */
}

/* Formato para las respuestas */
.respuestas{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: transparent;
    margin-top: 3%;
    

}

.respuestas img{
    width: auto;
    height: 50vh;

}

.texto{
    background-color: transparent;
    font-size: 12px;

}
.respuesta{
    background-color: transparent;
    font-size: 12px;

}

.illia{
    background-color:rgb(250, 128, 114);
    padding-top: 10vh;

}

.preferencias{
    background-color:rgb(233, 150, 122);
    padding-top: 10vh;
    
}

.prefiero{
    width: 90vw;
    margin: auto;
    padding-top: 10vh;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: transparent;
}
.prefiero img{
    width: auto;
    height: 40vh;
    display: flex;
    flex-wrap: wrap;
    
}

/* Mostramos el collage */
.futuro{
    background-color:rgb(255, 160, 122);
    padding-top: 10vh;

}

/* Ocultar o mostrar capas según el viewport */

.collage_h{ /*ambas clases*/
    /* ocultamos ambas para después mostrar la que corresponda*/
   display: none;
   width: 90%;
   margin: auto;
}
.collage_v{ /*ambas clases*/
    /* ocultamos ambas para después mostrar la que corresponda*/
   display: none;
   width: 90%;
   margin: auto;
}

/*Las imágenes dentro de las capas*/
.collage_v  img{
    width: 100%;
    height: auto;
}

.collage_h  img{
    width: 100%;
    height: auto;
}

/* Específicamente mostrar la capa que corresponda*/

/*Si el dispositivo es horizontal*/

@media (orientation:landscape){
/* En caso de ser, hace visible la capa*/

    .collage_h{ 
        display: block;
    }  
}

/* Si el dispositivo es vertical*/
@media (orientation:portrait){
    /* En caso de ser, hace visible la capa*/
    .collage_v{
        display:block;
    }
}

.redes{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    background-color:transparent;
    
}

.redes img{
    width: 20%;
    height: auto;
    margin: 0;
    padding: 0;
}
.contacto{
    text-decoration: none;
    margin: 0;
    padding: 0;
}