@font-face {
  font-family: 'Ultra';
  src: url('./../fonts/FredokaOna-Ultra.woff2');
}

@font-face {
  font-family: 'caveat_brushregular';
  src: url('./../fonts/caveatbrush-regular-webfont.woff2') format('woff2'),
    url('./../fonts/caveatbrush-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  -webkit-tap-highlight-color: transparent!important;
  user-select: none;
}

:root {
  --first-color: #D6D6D6;
  --second-color: #484848;
  --third-color: transparent;
  --azuqueca-color: #9C2024;
}

body.color-amarillo {
  --first-color: #F0CC00;
  --second-color: #402801;
  --third-color: #FFFCEA;
  --bg: url(./../imgs/bg_apicultura.png);
  --loading: url(./../imgs/loading_apicultura.gif);
  --mascota: url(./../imgs/mascotas/abeja.png);
  --animacion: abeja;
}

body.color-verde {
  --first-color: #A6B700;
  --second-color: #1D6118;
  --third-color: #FDFFED;
  --bg: url(./../imgs/bg_naturaleza.png);
  --loading: url(./../imgs/loading_naturaleza.gif);
  --mascota: url(./../imgs/mascotas/tortuga.png);
  --animacion: tortuga;
}

body.color-azul {
  --first-color: #3689C4;
  --second-color: #09283D;
  --third-color: #EDF8FF;
  --bg: url(./../imgs/bg_ornitologia.png);
  --loading: url(./../imgs/loading_ornitologia.gif);
  --mascota: url(./../imgs/mascotas/pajarito.png);
  --animacion: pajaro;
}

body {
  margin: 0;
  font-family: 'caveat_brushregular';
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

#mainContainer {
  width: 100%;
  height: 100%;
  background-color: var(--first-color);
}

#logo {
  height: 130px;
  fill: var(--second-color);
}

#mascota {
  position: fixed;
  width: 150px;
  height: 150px;
  background-image: var(--mascota);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 45;
  top: 64%;
  left: 86%;
  transform: translate3d(0,0,0);
  animation: var(--animacion) 10s linear infinite;
  pointer-events: none;
}

@keyframes abeja {
  from {
      transform: rotate(0deg) translateX(50px) rotate(0deg);
      top: 100%;
      left: 100%;
  }
  to {
      transform: rotate(360deg) translateX(50px) rotate(-360deg);
      top: -20%;
      left: -20%;
  }
}

@keyframes tortuga {
  from {
      transform: rotate(0deg) translateX(50px) rotate(0deg);
      top: 100%;
      left: 50%;
  }
  to {
      transform: rotate(360deg) translateX(50px) rotate(-360deg);
      top: -20%;
      left: 50%;
  }
}

@keyframes pajaro {
  from {
      transform: rotate(0deg) translateX(50px) rotate(0deg);
      top: 100%;
      left: -20%;
  }
  to {
      transform: rotate(360deg) translateX(50px) rotate(-360deg);
      top: -20%;
      left: 100%;
  }
}

body.color-amarillo #logo,
body.color-verde #logo,
body.color-azul #logo {
  fill: var(--third-color);
  height: 60px;
}

body.color-amarillo .topInicio,
body.color-verde .topInicio,
body.color-azul .topInicio {
  justify-content: space-between;
}

.cardGame {
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: column;
  align-items: center;
  padding: 10px;
  z-index: 40;
}

#gameContent {
  flex: auto;
  background-image: var(--bg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0px;
  z-index: 1;
}

.cardGame .box {
  padding: 14px;
  border-radius: 6px;
  background-color: var(--first-color);
}

.cardGame .inner-box {
  display: flex;
  padding: 15px;
  background-color: var(--third-color);
  border-radius: 25px;
  justify-content: center;
}

.cardGame .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: auto;
}

.cardGame .title {
  font-size: 2.5rem;
  font-family: sans-serif;
  color: var(--third-color);
}

/**/

.topInicio {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
}

.topInicio svg {
  fill: var(--third-color);
  height: 60px;
}

.btn-aula {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 35px;
  background: #b2b2b2;
  border-radius: 25px;
  padding: 35px;
  height: 375px;
}

.btn-aula p {
  font-size: 2.2rem;
  line-height: 2.2rem;
  text-align: center;
}

.btn-content {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: center;
  justify-content: center;
  width: 80%;
  gap: 15px;
}

.btn-edades {
  width: calc(20% - 15px);
  height: 175px;
  background: var(--first-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
}

.btn-temas {
  background: var(--first-color);
  display: flex;
  border-radius: 25px;
  width: calc(20% - 15px);
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 175px;
  padding: 15px;
}

.btn-edades p,
.btn-temas p {
  font-size: 1.5rem;
  line-height: 1.6rem;
  color: var(--second-color);
}

.btn-sombra {
  cursor: pointer;
  box-shadow: 0 8px 0 0;
  color: var(--second-color);
  transition: all ease .2s;
  transform: translateY(-8px);
}

.btn-sombra:active {
  transform: translateY(0px);
  box-shadow: 0 0px 0 0;
}

.footer-btn-dch {
  display: flex;
  justify-content: flex-end;
  gap: 25px;
  width: 100%;
}

.bt-footer {
  background-color: var(--first-color);
  color: var(--second-color);
  fill: var(--second-color);
  border-radius: 20px;
  padding: 4px 22px;
  font-size: 1.5rem;
  display: flex;
  gap: 10px;
}

.btn-verde {
  background-color: #90DD93;
  color: #0F3610;
  fill: #0F3610;
  box-shadow: 0 8px 0 0 #0F3610;
}

.btn-morado {
  background-color: #e3a5eb;
  color: #3c0843;
  fill: #3c0843;
  box-shadow: 0 8px 0 0 #3c0843;
}

.btn-rojo {
  background-color: #d61717;
  color: #410505;
  fill: #410505;
  box-shadow: 0 8px 0 0 #410505;
}

.btn-azul {
  background-color: #6eefef;
  color: #043535;
  fill: #043535;
  box-shadow: 0 8px 0 0 #043535;
}

.btn-negro {
  background-color: #afada3;
  color: #131312;
  fill: #131312;
  box-shadow: 0 8px 0 0 #131312;
}

.icono-btn {
  width: 30px;
}

.cardGame button.success {
  background-color: rgb(101, 175, 87);
}

.cardGame button.danger {
  background-color: rgb(164, 68, 64);
}

.squares {
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}

.squares>div.box {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 1.3em;
  flex-grow: 0;
}

.activo {
  box-shadow: 0 0 0 3px #3490dc;
}

.animation-bounce {
  animation: bounce 0.75s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(15px);
  }
  60% {
    transform: translateY(15px);
  }
}

.animation-crescendo {
  animation: crescendo .75s alternate infinite ease-in;
}

@keyframes crescendo {
  0% {
    transform: scale(.75);
  }
  100% {
    transform: scale(1);
  }
}

/* alpine */

[x-cloak] {
  display: none !important;
}

/* spinner */

#loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: var(--first-color);
  background-image: var(--loading);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 150px;
}

/*footer*/

/*pantalla completa*/

.pantalla-completa {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
  border-radius: 0!important;
}

.pantalla-completa .special {
  border-radius: 0!important;
}

#btnCerrarPantallaCompleta {
  position: fixed;
  top: 25px;
  left: 25px;
  z-index: 100;
  padding: 4px 22px;
  border-radius: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 1.5rem;
}

#btnCerrarPantallaCompleta svg {
  width: 20px;
}

.hidden {
  display: none !important;
}

/* Mensajes container de fin de juego */

#finJuego {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background-color: var(--third-color);
  background-image: url(./../imgs/confeti.svg);
  flex-direction: column;
  gap: 20px;
  z-index: 2;
}

#finJuego > div {
  color: var(--first-color);
  font-size: 4rem;
}

#finJuego > a {
  font-size: 1.5rem;
  box-shadow: 0 8px 0 0;
  transition: all ease .2s;
  transform: translateY(-8px);
  border-radius: 25px;
  background-color: #bafdcd;
  color: #0e461e;
  padding: 7px 22px;
}

#finJuego > a:active {
  transform: translateY(0px);
  box-shadow: 0 0px 0 0;
}

/* Mensajes container acierto-errores */

#mensajes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: #ffffff91;
}

.ocultar {
  display: none;
}

.mostrar {
  display: flex;
}

.acierto {
  font-size: 4rem;
  animation: bounce 1s infinite;
  color: rgb(0 120 6);
}

.fallo {
  font-size: 4rem;
  animation: bounce 1s infinite;
  color: red;
}

.info {
  font-size: 4rem;
  animation: bounce 1s infinite;
  color: rgb(0, 119, 255);
}

#logoAzuqueca {
  width: 200px;
  fill: #9D2025;
}

body.color-amarillo #logoAzuqueca,
body.color-verde #logoAzuqueca,
body.color-azul #logoAzuqueca {
  display: none;
}

#frontAulas {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(./../imgs/front_inicio.png);
  z-index: 9999;
  background-repeat: no-repeat;
  pointer-events: none;
  background-size: contain;
  background-position: center top;
}

/* JUEGOS */

.content-game {
  display: flex;
  width: 100%;
  position: relative;
}

.content-game.game-center {
  align-items: center;
  justify-content: center;
}

.content-game.game-column {
  flex-direction: column;
}

.special {
  padding: 15px;
  width: 100%;
  background-color: var(--third-color);
  text-align: center;
  font-size: 1.3em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.juego-top {
  position: relative;
  height: 25%;
  z-index: 2;
  border-radius: 25px 25px 0 0;
  background-color: rgb(170, 170, 170);
}

.juego-bottom {
  position: relative;
  z-index: 1;
  height: 75%;
  border-radius: 0 0 25px 25px;
  background-color: white;
}

.drop-target {
  background-color: var(--first-color);
  border-color: #aaa;
  border-style: solid;
}

/**/

#panelVentanaPreguntas{
    border-radius: 25px
}

/* juegos parejas */

.game-container {
  display: grid;
  grid-template-columns: repeat(6, auto);
  grid-gap: 10px;
  height: 100%;
  position: relative;
  padding: 15px;
  background-color: var(--third-color);
  border-radius: 0 0 25px 25px;
}

.game-info {
  color: var(--second-color);
  font-size: 2em;
}

.game-info-container {
  background-color: var(--third-color);
  border-radius: 25px 25px 0 0;
}

.overlay-text {
  display: none;
  justify-content: center;
  align-items: center;
  color: var(--first-color);
  border-radius: 0 0 25px 25px;
}

.pantalla-completa .overlay-text {
  border-radius: 0;
}

.card-back {
  background-color: var(--first-color);
  border-color: var(--second-color);
  cursor: pointer;
}

.card-front {
  background-color: var(--third-color);
  border-color: var(--second-color);
  transform: rotateY(180deg);
}

/* juegos camino */

.marcador-camino {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  background: #ffffffcc;
  padding: 10px;
  border-radius: 0 25px;
}

.pantalla-completa .marcador-camino {
  border-radius: 0 0 0 25px;
}

/* Ayuda */

.interiorVentanaAyuda {
  border-radius: 25px;
  background-color: #fffdfcb0;
  width: 100%;
  height: 100%;
  z-index: 50;
  left: 0;
  top: 0;
  position: absolute;
  backdrop-filter: blur(8px);
}

#btnCerrarAyudaJuego {
  position: absolute;
  top: 25px;
  right: 25px;
  border-radius: 25px;
  padding: 5px 20px;
}

#btnCerrarAyudaJuego svg {
  width: 20px;
}