@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@1,500&display=swap');
body{ background-color: cornflowerblue;
   margin:0;
}


  
  button:hover {
    background-color: #23c483;
    box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    color: #fff;
    transform: translateY(-7px);
  }
  
  button:active {
    transform: translateY(-1px);
  }
.titulo{
    font-family: 'Pacifico', cursive;
    font-size:10vmin;
    background-color:aqua;
    color: white;
}
.subtitulo{
    font-size: 6vmin;
    color:rgb(255, 255, 255);
    letter-spacing:0.25em;
    background-color: transparent;
    text-align: center;
    text-shadow: 2px 2px 2px silver;
    padding-top: 1%;

}

.cabecera{

    width:100vw;
    height:8vh;
    background-color: cornflowerblue;
    position:fixed;
    color:black;
    top:0vh;
    display: flex;
    justify-content: space-between;
    font-family: "Libre Bodoni", serif;
    z-index: 100;
}
.botones{
    display:flex;
    justify-content: space-between;
}
.pie{
    width:100vw;
    height:8vh;
    background-color:cornflowerblue;
    color:black;
    position:fixed;
    display: flex;
    justify-content: space-around;
    bottom: 0vh;
    font-family: "Libre Bodoni", serif;
}


.contenido{
    width:90vw;
    margin:auto;
    padding-top:10vh;
    display:flex;
    flex-direction:column;
}
.seccion{
    width:100%;
    min-height:90vh;
}/* etiqueta general */
.nombre{
    background-color:aqua;
    display:flex;
    align-items:center;
    justify-content:center;
}
.preguntas{
    background: inherit;
    background-repeat: no-repeat;
    font-size:2.5vmin;
    line-height:4.5vmin;
    background-image: url("../img/moon.jpg");
    background-size:cover;
}
.respuesta{
    margin-right: 5%;
    padding-right: 5%;
    margin-left:5%;
    text-align:right ;
    font-family: "Libre Bodoni", serif;
    font-weight: 900;
    font-size:2.75vmin; 
    display:flex;
    flex-direction: column;
    justify-content: right;
    

}
.izq{
    margin-left: 5%;
    padding-left: 5%;
    margin-right:5%;
    color:white;
    font-size:large;
    text-shadow: 2px 2px 2px gray}

.illia{
    background-color:bisque;
}
.gustos{
    background-color:rgb(25, 116, 25);
}

.opciones{
    display: flex;
    padding: 0 10%;
}
.fotosmila{
    width: 45%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}
.fotosmila2{
    width: 45%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-end;  
}

.futuro{
    background-color:rgb(7, 7, 124);
}

.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;
        }
    }