@font-face {
    font-family: 'Little Days';
    src: url('../font/littledays/LittleDays.woff2') format('woff2'),
    url('../font/littledays/LittleDays.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#contenedor_juego *{
    font-family: "Little Days";
    font-weight: bold;
}

img.posicion_absoluta{
    position: absolute;
    top: 38%;
    left: 50%;
    max-width: 65%;
    transform: translate(-50%, -50%);
}
img.libreta_vacia{
    max-width: 90%;
}
div.ocultar{display: none;}
div#contenedor_juego{
    width: 960px;
    height: 650px;
    position: relative;
}



div#vista_1 input{
    position: absolute;
    top: 18%;
    left: 41%;
    font-size: 2rem;
    max-width: 25%;
}
div#vista_1 img#btn_aceptar{
    max-width: 30%;
    top: 77%;
    left: 60%;
    cursor: pointer;
}
div#vista_2 p:nth-of-type(1){
    position: absolute;
    top: 8%;
    left: 36%;
    font-size: 120%;
}
div#vista_2 p:nth-of-type(2){
    position: absolute;
    top: 30%;
    left: 37%;
    font-size: 283%;
    color: white;
}
div#vista_2 p:nth-of-type(3){
    position: absolute;
    top: 38%;
    left: 37%;
    font-size: 153%;
    max-width: 40%;

}
div#vista_2 img#btn_instrucciones{
    position: absolute;
    top: 65%;
    left: 55%;
    max-width: 30%;
    cursor: pointer;
}
div#vista_2 img#btn_jugar{
    position: absolute;
    top: 80%;
    left: 60%;
    max-width: 20%;
    cursor: pointer;
}
#vista_zona_preguntas{
    /*width: 100%;
    height: 100%;*/
}
div.vista_num_pregunta img.num_pregunta_recuadro{
    width: 34%;
    position: absolute;
    top: 8%;
    left: 27%;
}
div.vista_num_pregunta img.num_pregunta_numero{
    width: 21%;
    position: absolute;
    top: 8%;
    left: 41%;
}
div#vista_marcador img{
    max-width: 30%;
    position: absolute;
    top: 14%;
    left: 12%;
}
.pregunta{
    /*border: 2px solid red;*/
    position: absolute;
    top: 6%;
    left: 37%;
    width: 53%;
    transform: rotate(0deg);
    transform-origin: 24% 93%;
    display: none;
}
.pregunta:last-of-type{
    display: block;
}
/*div.pregunta.animacion {
    animation-name: rotar_pagina;
    animation-duration: 2s;
}*/

@keyframes rotar_pagina {
    10%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(90deg);
        opacity: 0;
    }
}
.hoja_blanca{
    max-width: 100%;
    opacity: 0;
}
.zona_respuestas{
    position: absolute;
    top: 20%;
    left: 29%;
    transform: skewX(4deg);
    /*border: 1px solid black;*/
    width: 60%;
}
.titulo_pregunta{
    font-size: 125%;
    font-weight: bold;
    margin-bottom: 10px;
}
.respuesta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    cursor: pointer;
    /*border: 1px solid darkgreen;*/
    /*margin: 15px 0;*/
}
.respuesta > div{
    /*border: 1px solid black;*/
}
.respuesta:hover{
    color: red;
}
.circulo_num_respuesta{
    flex-basis: 12%;
}
.circulo_num_respuesta > img{
    max-width: 100%;
}
.respuesta_item{
    flex-basis: 70%;
    padding: 0 1%;
    font-size: 100%;
    font-weight: bold;
}
.respuesta_item p{
    margin: 6px;
}
.ticks_bien_mal{
    flex-basis: 15%;
    position: relative;
}
.ticks_bien_mal > img{
    max-width: 80%;
    position:absolute;
    display: none;
    transform: translateY(-50%);
}
.ticks_bien_mal > img.mostrar{
    display: block;
}
.vista_siguiente_pregunta{

}
.vista_siguiente_pregunta .btn_siguiente_pregunta{
    position: absolute;
    top: 82%;
    left: 41%;
    max-width: 50%;
    cursor: pointer;
}

#vista_4 #img_resultado_final{
    max-width: 30%;
    position: absolute;
    top: 14%;
    left: 12%;
}

#vista_4 #pagina_info_final{
    position: absolute;
    top: 14%;
    left: 53%;
    transform: skewX(5deg);
    /*border: 1px solid black;*/
    width: 30%;
    text-align: center;
}

#vista_4 #btn_volver_a_jugar{
    position: absolute;
    top: 75%;
    left: 71%;
    max-width: 26%;
    cursor: pointer;
}
#vista_4 p{
    font-size: 140%;
    margin-top: 3rem;
}
#vista_4 .titulo_pagina_final{
    line-height: 34px;
}
#vista_4 .titulo_pagina_final,
#vista_4 #nombre_jugador{
    font-size: 259%;
    font-weight: bold;
    margin: 5% 0;

}

#vista_instrucciones #btn_jugar_desde_instrucciones{
    top: 69%;
    left: 70%;
    max-width: 15%;
    cursor: pointer;
}