:root {
  --bs-body-font-family : 'Gordita', sans-serif;
}

body {
  background-color : #007481;
  color            : #FFF;
}

.clear {
  clear : both;
}

#contenedorGeneral {
  width  : 100%;
  margin : 0 auto;
}

#top img, #footer img {
  width : 100%;
}

#footer {
  position : absolute;
  bottom   : 0;
}

.seccionCentral {
  height : 100%;
}

.zonaPregunta {
  height     : 80%;
  text-align : center;
}

.zonaPregunta img {
  height     : 95%;
  margin     : 0 auto;
  text-align : center;
}

.zonaBoton {
  height : 20%;
  width  : 100%;
}

.zonaBoton .numeroPreguntas, .zonaBoton .flecha {
  float : left;
}

.zonaBoton .numeroPreguntas img, .zonaBoton .flecha img {
  width : 100%;
}

.zonaBoton .numeroPreguntas {
  width : 70%;
}

.zonaBoton .flecha {
  width : 30%;
}

#comenzar {
  width      : 100%;
  text-align : center;
  cursor     : pointer;
}

#comenzar img {
  width : 80%;
}

#contenedorInicio .zonaPregunta img {
  width  : 80%;
  height : auto;
}

.btnreiniciar {
  text-align : center;
}

.btnreiniciar img {
  width : 40%;
}

.numeroPreguntas h1 {
  font-family : sans-serif;
  color       : #FFF;
  text-align  : right;
  font-size   : 20px;
  line-height : 40px;
}

.seccionCentral .laPregunta {
  height     : 80%;
  text-align : center;
}

.seccionCentral .laPregunta img {
  width : 100%;
}

/* ---------- los display none de todos ----------------------------------------------*/
#contenedorPregunta1, #contenedorRespuestaMitoPregunta1, #contenedorRespuestaRealidadPregunta1, #contenedorPregunta2, #contenedorRespuestaMitoPregunta2, #contenedorRespuestaRealidadPregunta2, #contenedorPregunta3, #contenedorRespuestaMitoPregunta3, #contenedorRespuestaRealidadPregunta3, #contenedorPregunta4, #contenedorRespuestaMitoPregunta4, #contenedorRespuestaRealidadPregunta4, #contenedorPregunta5, #contenedorRespuestaMitoPregunta5, #contenedorRespuestaRealidadPregunta5, #contenedorPregunta6, #contenedorRespuestaMitoPregunta6, #contenedorRespuestaRealidadPregunta6, #contenedorPregunta7, #contenedorRespuestaMitoPregunta7, #contenedorRespuestaRealidadPregunta7, #contenedorPregunta8, #contenedorRespuestaMitoPregunta8, #contenedorRespuestaRealidadPregunta8, #contenedorPregunta9, #contenedorRespuestaMitoPregunta9, #contenedorRespuestaRealidadPregunta9, #contenedorPregunta10, #contenedorRespuestaMitoPregunta10, #contenedorRespuestaRealidadPregunta10, #contenedorPregunta11, #contenedorRespuestaMitoPregunta11, #contenedorRespuestaRealidadPregunta11, #contenedorPregunta12, #contenedorRespuestaMitoPregunta12, #contenedorRespuestaRealidadPregunta12, #contenedorPregunta13, #contenedorRespuestaMitoPregunta13, #contenedorRespuestaRealidadPregunta13, #contenedorPregunta14, #contenedorRespuestaMitoPregunta14, #contenedorRespuestaRealidadPregunta14, #contenedorPregunta15, #contenedorRespuestaMitoPregunta15, #contenedorRespuestaRealidadPregunta15, #contenedorFinal {
  display : none;
}

/* ---------- los display none de todos ----------------------------------------------*/
.botonesMitoRealidad {
  width : 100%;
}

.botonMito, .botonRealidad {
  float : left;
}

.botonMito img, .botonRealidad img {
  width : 100%;
}

.botonMito {
  width : 42%;
}

.botonRealidad {
  width : 58%;
}

.container, .container * {
  box-sizing : border-box;
}

.container {
  max-width : 1024px;
  margin    : 0 auto;
  padding   : 1em;
}

footer {
  text-align : center
}

footer img {
  height        : auto !important;
  display       : inline;
  width         : auto !important;
  filter        : grayscale(1) invert(1) brightness(3);
  padding       : 8px;
  margin-bottom : 1em
}

.float-right {
  float : right;
}

.float-left {
  float : left;
}

.color-blanco {
  color : white;
}

.bg-purpura {
  background-color : #8A1A9B;
}

.Pregunta.incorrecto {
}

.Pregunta.incorrecto .respuestaCorrecta {
  display : none !important;
}

.Pregunta.correcto {}

.Pregunta.correcto .respuestaIncorrecta {
  display : none !important;
}

.btnVerdadero, .btnFalso {
  display : inline-block;
}

:is(.btnVerdadero,.btnFalso) img {
  max-height : 9em;
}

.bg-correcto {background-color : #E5B033}

.bg-incorrecto {background-color : #EB5A4E}