/*Importo fuentes*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&family=Raleway:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@300&family=Playfair+Display:ital,wght@1,500&family=Raleway:ital@1&display=swap');


*{
    background-color: rgb(75, 140, 224);
    color: rgb(0, 124, 102);   
    font-family: 'Raleway', sans-serif;
    margin: 0;
    text-align: center;
    font-size: 3vmin;

}

.titulo{
 font-family: 'Playfair Display', sans-serif;
 font-size: 18vmin;
 color: #2A9D8F;
 background-color: inherit;
 text-shadow: black 2px 3px;

}

.subtitulo {
    letter-spacing: 0.1em;
    padding-top: 0.5%;
    padding-bottom: 0.6%;
    font-weight: 1600;
    box-shadow: 0 0 5px rgba(0,0,0,.7);
    background: #72cccc;
    font-size: 5vmin;
    text-shadow: rgb(255, 255, 255) 1px 1px;
}

/*Aquí formato de cabecera*/
.cabecera{
 width: 100vw;
 height:9.5vh;
 background-color: rgb(75, 140, 224);
 color: white;
 text-shadow: 0.7px 0.7px black;
 font-size: 3vh;
 position: fixed;
 text-align: center;
 top: 0vh;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 5px rgba(0,0,0,.7);
 z-index: 90;

}


/*Organizo la barra de navegación*/
.botonera{
    display:flex;
    justify-content: space-between;

}

/*aquí propiedades del pie de página*/
.pie{
    width: 100vw;
    height: 8vh;
    background-color: rgb(75, 140, 224);
    color: navy;
    position: fixed;
    text-align: center;
    bottom: 0vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0 0 5px rgba(0,0,0,.7);
}


/*Contenedor principal*/
.contenido{
    width: 90vw;
    margin: auto;
    padding-top: 10vh;
    /*ahora el display flex*/
    display: flex;
    flex-direction: column;

}

/*a continuación, clase genérica*/
.seccion{
    width: 100%;
    min-height: 82vh;
    padding-bottom: 1%;
    padding-top: 9.5vh;
    box-shadow: 0 0 5px rgba(0,0,0,.7);

}

/*Cada clase*/
.presentacion {
    background-color: rgb(108, 231, 211);
    padding-top:0vh;


    /*ahora, centro el título*/
    display: flex;
    align-items: center;
    justify-content: center; 

}

/*Espacio para la configuracion de las preguntas*/
.preguntas{
    background-color:transparent;
    font-size: 2vmin;
    line-height: 4.5vmin;
    font-weight: 800;
    background-size: cover;
    background-image: url("../img/blog2.png");
    margin:top, 4vh;

}

/*definiciones para las preguntas de la izquierda*/
.izq{
    background-color: transparent;
    margin-left: 5%;
    padding-left: 2%;
    margin-right: 5%;
    width: 90%;
    text-align: left;
    border-left: 1vmax solid white;
    color: black;

}

/*para poner emoji antes*/
.izq::before{
    content:"✔";
    padding-right: 1%;

}

/*instrucciones para las preguntas hacia la derecha*/
.der{
    background-color: transparent;
    margin-right: 5%;
    padding-right: 2%;
    margin-left: 2%;
    text-align: right;
    color: black;
    border-right: 0.8vmax solid white;  
    box-shadow: 0 0 5px rgba(0,0,0,.7);

}

/*para poner emoji despues*/
.der ::after{
    content: "✔";
    color: black;
    padding-left: 1.5%;

}

/*Formato diferente para las respuestas*/
.respuesta{
    font-family: 'Anek Latin',serif;
    background-color: transparent;
    font-weight: 900;
    color: #e1e8ec;
    font-size: 3.2vmin;

}

/*Efecto hover para rtas*/
.respuesta:hover {
    color: #61b8ff;
    text-shadow:black 1px 1px;
    font-size: 3.6vmin;    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, serif;
    transform: rotate(360deg);
    cursor: pointer;
    
  }

.illia {
    background-color: #d86b95;
    
}

.preferencias {
    background-color: #FF9770;

}

.futuro {
background-color: rgb(75, 140, 224);
}

.landscap, .portra {
    display: none; 

}

.landscap img{
    width: 100%;
}

.portra img{
    width: 100%;
}

@media (orientation: landscape) {
    .landscap{
        display:block;
        background-size: cover;

        }
}

@media (orientation: portrait) {
    .portra{
        display: block;
        background-size: cover;
        
    }
}


/* Modelo para efecto HOVER de desplazamiento:
https://webdesign.tutsplus.com/es/tutorials/how-to-create-different-css-hover-effects-from-scratch--cms-34222
https://lenguajecss.com/css/animaciones/transiciones/