/*fuentes para las letras */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Patrick+Hand&display=swap');

 body{
        background-color: #39a2db;
        color:aliceblue;
        font-family: 'Patrick Hand', cursive; 
        margin: 0;
    }
.p {
    margin-top: 0vh;
    font-family: 'Patrick Hand', cursive;
}
    .titulo{ /* formato del título */
        font-family: 'Indie Flower', cursive;
        font-size: 10vmin;
        color: darkgoldenrod;
        background-color: #39a2db;
        text-shadow: 2px 2px 2px silver;
    }

    .subtitulo{ /* es el subtítulo, media pila gabi */
        font-family: 'Patrick Hand', cursive;
        font-size: 6vmin;
        color: rgb(132, 0, 255);
        letter-spacing: 0.25em;
        background-color: transparent;
        text-align: center;
        text-shadow: 2px 2px 2px red;
        padding-top: 1%;
        
    }

    .cabecera{ /* formato de la cabecera */
        width: 100vw;
        height: 15vh;
        display: flex;
        justify-content: space-around;
        background-color: #39a2db;
        color: blueviolet;
        position: fixed; /* poner sticky */
        top:    0vh;
        z-index: 999;
    
    }

    
    body{
        background-color: #39a2db;}
    
        
       /* tamaño de la imagen*/
       img{  /* imagen mía */
           width:35%; 
           height:50%;
           /* border-radius: 10px;
           border: 5px solid salmon;
        */
       }
    
  .pagina{
      width: 28vh;
      height:19vh;
    }


    .pie{ /* propiedades del footer */
        width: 100vw;
        height: 10vh;
        display: flex;
        background-color: #39a2db;
        color: #0f0;
        position: fixed;
        justify-content: center;
         bottom: 0vh;
    }

    .contenido { /* contenedor principal */
        width: 90vw;
        margin: auto;
        padding-top: 10vh;
        /* este es el display flex */
        display: flex;
        flex-direction: column;
    }

    .seccion{/* esta es la clase genérica */
    width: 100%;
    min-height: 80vh;
    padding: 0;
    border-top: 1vh solid  #234;
    }

    .presentacion{/* cada una de ellas */
    background-color: #39a2db;

    /* esto es para centrar el titulo */
    display: flex;
    align-items: center;
    justify-content: center;
    }

    .preguntas{
        background-color: #39a2db;
        font-size: 2.5vmin;
        color: black;
        line-height: 4vmin;
        background-image: url(https://ih1.redbubble.net/image.2939668225.5458/poster,840x830,f8f8f8-pad,1000x1000,f8f8f8.jpg);
        background-size: cover;
    }

    .der{
        margin-right: 5%;
        padding-right: 5%;
        margin-left: 5%;
        text-align: right;
        display: flex;
        font-weight: 600;
        font-size: 4vmin;
        justify-content: right;
        flex-direction: column;
        color: blueviolet;
    }

    .izq{/* definiciones para las preguntas de la izquierda */
    /* background-color:royalblue; */
    font-size: 4vmin;
    font-weight: 600;
    margin-left: 5%;
    padding-left: 5%;
    margin-right: 5%;
    text-align: left;
    color: brown;
    border-left: 1vmax solid brown;
}

    .illia{
        background-color: #2d85b4;
    }
    .preferencias{
        background-color: #2d85b4;
        
    }
    
    .foticos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
     }

     .foticos img {
        margin: 15px;
     }

    .futuro{
        background-color: #2d85b4;
       /* hora de sacar dotes artísticos */ 
    }

    /* oculta o muestra capas dependiendo el viewport */

    .collage_v, .collage_h{ /* las dos clases */
        /* se deben ocultar ambos collages para mostrar solo el conveniente */
        display: none;

        width: 90%;
        margin: auto;
    }

    /* estas son las imágenes dentro de  las capas */
    .collage_v img{ 
        width: 100%;
    }
    .collage_h img{
        width:100%;
    }

    /* Se mostrará la capa que corresponda */

    /* portrait, retrato */
    @media (orientation:portrait){
        /* de vuelta, si tiene ese formato muestra la capa... */
        .collage_v{
            display: block;
        }
    }

    /* landscape, vista paisaje */
    @media (orientation:landscape){
        /* si la pantalla es paisaje, hace visible la capa "" */
        .collage_h{
            display:block;
        }

    }