@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 10px;
}

body {
  background: rgb(52, 76, 183);
  color: #fff;
  line-height: 1.5;
  overflow-x: hidden;
  font-family: "Merriweather", sans-serif;
  font-display: swap;
  z-index: 0;
}

h1 {
  font-family: "Alegreya Sans", sans-serif;
  font-display: swap;
  font-size: 6.3rem;
  letter-spacing: 2px;
}

h2 {
  font-size: 2.8rem;
  font-family: "Merriweather", sans-serif;
  font-display: swap;
}

h3 {
  font-size: 2.4rem;
  font-family: "Alegreya Sans", sans-serif;
  font-display: swap;
}

p {
  font-family: "Merriweather", sans-serif;
  font-display: swap;
  font-size: 1.6rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  background-color: transparent;
  border: none;
}

img {
  display: inline-block;
  width: 300px;
  height: auto;
  border-radius: 7px;
  transition: all 0.2s ease-in-out;
}
img:hover {
  transform: scale(1.1);
  opacity: 0.8;
  cursor: pointer;
}

.inline-dark {
  color: rgb(0, 9, 87);
}

.inline-blue {
  color: rgb(52, 76, 183);
}

.inline-blue-gray {
  color: rgb(87, 123, 193);
}

.inline-yellow {
  color: rgb(235, 230, 69);
}

.inline-bold {
  font-weight: 700;
}

.inline-bib-citation {
  font-style: italic;
  font-weight: 600;
}

.grid-col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
}

.grid-col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 42px;
}

.card {
  background-color: white;
  color: rgb(0, 9, 87);
  display: flex;
  flex-direction: column;
  gap: 42px;
  border-radius: 21px;
  padding: 42px;
}
.card.full-width {
  width: 100%;
}

section.saber-mas {
  margin-top: 42px;
}
@media (min-aspect-ratio: 1/1) {
  section.saber-mas {
    margin-top: 0;
  }
}

main#construction {
  position: relative;
  margin: 90px auto 0 auto !important;
  padding: 0 84px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgb(52, 76, 183);
  height: calc(100vh - 90px);
  width: 100%;
}
main#construction section.construction-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main#construction section.construction-content :nth-child(1) {
  display: flex;
  justify-content: center;
}
main#construction section.construction-content :nth-child(1) img {
  width: 420px;
}
main#construction section.construction-content :nth-child(1) img:hover {
  background: none;
  transform: none;
  opacity: 1;
  cursor: default;
}
main#construction section.construction-content .loading {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
}
main#construction section.construction-content .loading h1 {
  font-size: 4.9rem;
}
main#construction section.construction-content .loading .loader {
  display: flex;
  align-items: center;
  margin-bottom: 2.1rem;
  margin-left: 1rem;
}
main#construction section.construction-content .loading .loader-element {
  border: 7px solid white;
  border-radius: 100%;
  margin: 0 10px;
}
main#construction section.construction-content .loading .loader-element:nth-child(1) {
  animation: preloader 0.6s ease-in-out alternate infinite;
}
main#construction section.construction-content .loading .loader-element:nth-child(2) {
  animation: preloader 0.6s ease-in-out alternate 0.2s infinite;
}
main#construction section.construction-content .loading .loader-element:nth-child(3) {
  animation: preloader 0.6s ease-in-out alternate 0.4s infinite;
}
@keyframes preloader {
  100% {
    border: 7px solid rgb(235, 230, 69);
  }
  100% {
    transform: scale(2);
  }
}

.btn {
  display: inline-block;
  padding: 14px;
  border-radius: 7px;
}
.btn-white {
  background: #fff;
  color: rgb(0, 9, 87);
}
.btn-light-blue {
  background-color: rgb(87, 123, 193);
  color: white;
}
.btn-dark-blue {
  background-color: rgb(0, 9, 87);
  color: white;
}
.btn-blue {
  background-color: rgb(52, 76, 183);
  color: white;
}
.btn-light-blue.flash-hover, .btn-white.flash-hover, .btn-blue.flash-hover {
  background: rgb(0, 9, 87);
  color: #fff;
}

button,
a,
.btn,
.btn-nube {
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

@media (hover: hover) {
  .btn.btn-light-blue:hover,
  .btn.btn-white:hover,
  .btn.btn-blue:hover {
    background-color: rgb(0, 9, 87);
    color: white;
  }
  .btn.btn-dark-blue:hover {
    background-color: rgb(87, 123, 193);
  }
  .card-overlay {
    background-color: none;
  }
}
main #fireworks-canvas {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* So it doesn't interfere with clicks */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
main .toggle-fireworks-container {
  background-color: white;
  padding: 7px;
  width: 63%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-radius: 7px;
}
main .toggle-fireworks-container p {
  color: rgb(0, 9, 87);
  font-size: 1.8rem;
  font-family: "Alegreya Sans", sans-serif;
}
main .toggle-fireworks-container button {
  position: relative !important;
  background-color: lightgray !important;
  width: 42px !important;
  height: 24px !important;
  border-radius: 24px !important;
  cursor: pointer;
}
main .toggle-fireworks-container button #toggle-fireworks-switch {
  position: absolute;
  left: 0 !important;
  top: 0 !important;
  height: 24px !important;
  width: 24px !important;
  border-radius: 24px !important;
  background-color: rgba(0, 9, 87, 0.42) !important;
}
main .toggle-fireworks-container button.active {
  background-color: rgb(87, 123, 193) !important;
}
main .toggle-fireworks-container button.active #toggle-fireworks-switch {
  left: 50% !important;
  background-color: rgb(0, 9, 87) !important;
}
main#emojis .toggle-fireworks-container, main#buscando-figuras .toggle-fireworks-container, main#tr3s .toggle-fireworks-container {
  width: auto;
  padding: 7px 14px;
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(5px, -5px);
  }
  60% {
    transform: translate(-5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.shake {
  animation: shake 0.3s ease-in-out;
}

@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 0);
  /* Start color */
  border-radius: 21px;
  animation: flash 1s forwards;
  z-index: 9999;
  pointer-events: none;
  will-change: opacity;
}
.flash-border-7 {
  border-radius: 7px;
}
.flash-border-14 {
  border-radius: 14px;
}

@keyframes pulseBackground {
  0% {
    background-color: rgba(0, 9, 87, 0.1);
  }
  50% {
    background-color: rgba(0, 9, 87, 0.4);
  }
  100% {
    background-color: rgba(0, 9, 87, 0.1);
  }
}
@keyframes hintButtonPulse {
  0% {
    background-color: rgb(87, 123, 193);
  }
  50% {
    background-color: rgb(235, 230, 69);
    color: rgb(0, 9, 87);
  }
  100% {
    background-color: rgb(87, 123, 193);
  }
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.sr-only,
legend,
.status-message {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Move Comments in biblioteca */
@keyframes moveLeftOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* Move in from the right */
@keyframes moveRightIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
/* Move in from the right */
@keyframes moveRightOut {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes moveLeftIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.points-interaction {
  width: 100%;
  flex-grow: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.points-interaction .table-container {
  width: 100%;
  padding: 7px 0 21px 0;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.42s ease;
}
.points-interaction .table-container table {
  width: 100%;
  border-spacing: 7px;
  table-layout: fixed;
}
.points-interaction .table-container table th#prev-points-container {
  padding: 0;
}
.points-interaction .table-container table th#prev-points-container button {
  cursor: pointer;
  width: 100%;
  font-size: 1.4rem;
  padding: 7px;
}
.points-interaction .table-container table th#prev-points-container button.showing-best {
  background-color: rgb(0, 9, 87);
}
@media (hover: hover) {
  .points-interaction .table-container table th#prev-points-container button:hover {
    background-color: rgb(0, 9, 87);
  }
}
.points-interaction .table-container table th,
.points-interaction .table-container table td {
  padding: 7px;
  font-size: 1.8rem;
  text-align: center;
}
.points-interaction .table-container table td.puzzle-points {
  text-align: center;
}
.points-interaction .table-container table .puzzle-points-header,
.points-interaction .table-container table .puzzle-points-row {
  background-color: rgb(52, 76, 183);
  border-radius: 42px;
  color: white;
}
.points-interaction .table-container table .puzzle-points {
  background-color: rgba(0, 9, 87, 0.2);
  border-radius: 42px;
}
.points-interaction .table-container table td.active {
  animation: pulseBackground 1.5s infinite ease-in-out;
}
.points-interaction .table-container table#table-42 {
  width: 63%;
}
.points-interaction .table-container table#table-tr3s {
  width: 63%;
}
.points-interaction .table-container#table-container-tr3s {
  padding: 14px;
}
.points-interaction .table-container.displayed {
  display: flex;
}
.points-interaction .table-container.displayed.show {
  opacity: 1;
  transition: opacity 0.42s ease;
}
.points-interaction .no-best-points {
  width: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.42s ease;
  padding: 14px;
  flex-direction: column;
  gap: 14px;
  border-radius: 14px;
  z-index: 4;
}
.points-interaction .no-best-points-buttons {
  display: flex;
  justify-content: space-evenly;
}
.points-interaction .no-best-points-buttons button {
  padding: 9px;
  font-size: 1.2rem;
}
.points-interaction .no-best-points-buttons button:hover {
  cursor: pointer;
}
.points-interaction .no-best-points.displayed {
  display: flex;
  background-color: white;
  transition: background-color 0.42s ease, opacity 0.42s ease;
}
.points-interaction .no-best-points.displayed.show {
  opacity: 1;
}
.points-interaction .no-best-points.displayed.show.alert {
  background-color: rgb(235, 230, 69);
}

#cookie-consent-background {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  z-index: 14;
}
#cookie-consent-background.displayed {
  display: block;
}

#cookie-consent-banner {
  display: none;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: auto;
  background-color: rgb(235, 230, 69);
  color: black;
  z-index: 21;
  padding: 21px;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
#cookie-consent-banner.displayed {
  display: flex;
}
#cookie-consent-banner .cookie-info {
  width: 54%;
  text-align: left;
  padding: 7px;
}
#cookie-consent-banner .cookie-info p {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
#cookie-consent-banner .cookie-info p a {
  color: rgb(52, 76, 183);
}
#cookie-consent-banner .cookie-info p a:hover {
  color: rgb(87, 123, 193);
}
#cookie-consent-banner .cookie-info > :nth-child(1),
#cookie-consent-banner .cookie-info :nth-child(4) {
  font-weight: 700;
}
#cookie-consent-banner .cookie-buttons {
  flex-grow: 2;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 21px;
}
#cookie-consent-banner .cookie-buttons fieldset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  border: none;
  padding: 0;
  margin: 0;
}
#cookie-consent-banner .cookie-buttons fieldset legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#cookie-consent-banner .cookie-buttons fieldset label {
  font-weight: 600;
}
#cookie-consent-banner .cookie-buttons fieldset label .cookie-checkbox {
  vertical-align: middle;
  margin-right: 14px;
  width: 14px;
  height: 14px;
  accent-color: rgb(0, 9, 87);
}
#cookie-consent-banner .cookie-buttons fieldset #cookie-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#cookie-consent-banner .cookie-buttons #submit-cookies {
  align-self: center;
  width: 100%;
  background-color: rgb(0, 9, 87);
  color: white;
  border: 2px solid transparent;
  z-index: 5;
}
#cookie-consent-banner .cookie-buttons #submit-cookies:hover {
  background-color: rgb(52, 76, 183);
  cursor: pointer;
}

header#navbar {
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(0, 9, 87);
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 6;
}
header#navbar .ludo-logo {
  display: flex;
  align-items: center;
  margin-left: 14px;
}
header#navbar .ludo-logo a {
  padding-top: 7px;
}
header#navbar .ludo-logo img {
  width: 90px;
  height: auto;
  padding: 0 7px;
  transition: none;
}
header#navbar .ludo-logo-text {
  margin-left: 21px;
}
header#navbar .ludo-logo-text > :nth-child(1) {
  font-family: "Alegreya Sans", sans-serif;
  font-size: 3rem;
  letter-spacing: 2px;
  color: rgb(235, 230, 69);
  line-height: 0.3;
  margin-top: 14px;
}
header#navbar .ludo-logo-text > :nth-child(2) {
  font-family: "Monospace", sans-serif;
  font-weight: 300;
  word-spacing: 1px;
  font-size: 2.5rem;
}
header#navbar nav {
  height: 100%;
}
header#navbar nav ul#main-menu {
  flex-grow: 2;
  text-align: right;
  height: 100%;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: right;
}
header#navbar nav ul#main-menu li {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
}
header#navbar nav ul#main-menu li#main-learn.open {
  background-color: rgb(87, 123, 193);
  color: rgb(0, 9, 87);
}
header#navbar nav ul#main-menu li a,
header#navbar nav ul#main-menu li button {
  padding: 14px 7px;
  color: #fff;
  font-size: 1.8rem;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
header#navbar nav ul#main-menu li a i,
header#navbar nav ul#main-menu li button i {
  font-size: 1.3rem;
  color: rgb(235, 230, 69);
}
header#navbar nav ul#main-menu li a:hover, header#navbar nav ul#main-menu li a.current,
header#navbar nav ul#main-menu li button:hover,
header#navbar nav ul#main-menu li button.current {
  border-bottom: rgb(235, 230, 69) 3px solid;
}
header#navbar nav ul#main-menu li#main-learn.open button#main-learn-btn:hover, header#navbar nav ul#main-menu li#main-learn.open button#main-learn-btn.current {
  border-bottom: 3px solid transparent;
  box-shadow: 0 3px 3px -3px rgb(0, 9, 87);
  cursor: pointer;
}
header#navbar nav ul#main-menu li#main-learn.open button#main-learn-btn:hover i, header#navbar nav ul#main-menu li#main-learn.open button#main-learn-btn.current i {
  color: white;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu {
  position: absolute;
  display: none;
  top: 90px;
  left: 0;
  width: 100%;
  background-color: rgb(87, 123, 193);
  height: 0;
  transition: 0.42s ease;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu.displayed {
  display: block;
  z-index: 1000;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group {
  display: none;
  flex-direction: column;
  margin-left: 14px;
  margin-top: 14px;
  border-left: 3px solid white;
  height: auto;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group.displayed {
  display: flex;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group li {
  padding: 0;
  padding-left: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  height: auto;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group li a {
  width: 84%;
  align-self: start;
  text-align: left;
  padding: 7px 3px;
  border-bottom: 3px solid transparent;
}
header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group li a:hover, header#navbar nav ul#main-menu li #main-learn-sub-menu li ul.learn-sub-menu-group li a.current {
  box-shadow: 0 3px 3px -3px rgb(0, 9, 87);
}
header#navbar nav ul#main-menu li #main-learn-sub-menu.open {
  height: 240px;
  transition: 0.42s ease;
}
header#navbar nav #hamburger-container {
  display: none;
  position: relative;
  width: 60px;
  height: 60px;
}
header#navbar nav #hamburger-container #hamburger-toggler {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 6;
}
header#navbar nav #hamburger-container #hamburger-lines {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 28px;
  height: 28px;
  background-color: transparent;
  z-index: 5;
}
header#navbar nav #hamburger-container #hamburger-lines > div {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: white;
}
header#navbar nav #hamburger-container #hamburger-lines-top {
  top: 3px;
  transition: 0.42s ease;
}
header#navbar nav #hamburger-container #hamburger-lines-mid {
  top: 13px;
  opacity: 1;
  transition: 0.84s ease;
}
header#navbar nav #hamburger-container #hamburger-lines-bottom {
  bottom: 3px;
  transition: 0.42s ease;
}
header#navbar nav #hamburger-container.open {
  background-color: rgb(87, 123, 193);
}
header#navbar nav #hamburger-container.open #hamburger-lines > div {
  background-color: rgb(0, 9, 87);
}
header#navbar nav #hamburger-container.open #hamburger-lines-top {
  transform: rotate(405deg);
  top: 13px;
  transition: 0.42s ease;
}
header#navbar nav #hamburger-container.open #hamburger-lines-mid {
  opacity: 0;
  transition: 0.1s ease;
}
header#navbar nav #hamburger-container.open #hamburger-lines-bottom {
  transform: rotate(-405deg);
  bottom: 13px;
  transition: 0.42s ease;
}
header#navbar nav#ham-nav {
  display: none;
}
header#navbar nav ul#hamburger-menu {
  display: none;
  position: fixed;
  flex-direction: column;
  top: 60px;
  left: 0;
  background-color: rgb(87, 123, 193);
  width: 100%;
  height: 0;
  z-index: 4;
  overflow: hidden;
  transition: all 0.42s ease;
}
header#navbar nav ul#hamburger-menu.displayed {
  display: flex;
}
header#navbar nav ul#hamburger-menu li {
  position: relative;
  width: 63%;
  margin: 0 0 21px 21px;
}
header#navbar nav ul#hamburger-menu li a,
header#navbar nav ul#hamburger-menu li button {
  display: block;
  padding: 7px 0 7px 14px;
  width: 63%;
  font-size: 2.1rem;
  color: white;
  border-bottom: 3px solid transparent;
  text-align: left;
}
header#navbar nav ul#hamburger-menu li a i,
header#navbar nav ul#hamburger-menu li button i {
  font-size: 1.3rem;
}
header#navbar nav ul#hamburger-menu li a.current,
header#navbar nav ul#hamburger-menu li button.current {
  box-shadow: 0 3px 3px -3px rgb(0, 9, 87);
}
header#navbar nav ul#hamburger-menu li a#hamburger-learn-btn.open,
header#navbar nav ul#hamburger-menu li button#hamburger-learn-btn.open {
  background-color: rgb(52, 76, 183);
  border-radius: 7px;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu {
  position: absolute;
  display: none;
  top: 0;
  left: 56%;
  width: 100%;
  height: 33px;
  transition: 0.42s ease;
  background-color: rgb(52, 76, 183);
  border-radius: 7px;
  z-index: 6;
  overflow: hidden;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu.displayed {
  display: block;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu::-webkit-scrollbar {
  width: 7px;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 2.5px;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu li {
  margin: 21px 0 0 21px;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu li a {
  width: 84%;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu li a.current {
  box-shadow: 0 3px 3px -3px white;
}
header#navbar nav ul#hamburger-menu li ul#learn-hamburger-sub-menu.open {
  height: calc(100vh - 240px);
  transition: 0.42s ease;
  overflow-y: scroll;
}
header#navbar nav ul#hamburger-menu.open {
  height: calc(100vh - 60px);
  transition: all 0.5s ease;
  padding: 42px 60px 0 0;
}

main {
  position: relative;
  max-width: 1280px;
  padding: 14px 84px;
  margin: 90px auto 42px auto;
}
main .main-hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px);
}
main .main-hero.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main .main-hero.home h1,
main .main-hero.home h2 {
  margin-top: 7px;
  text-align: center;
}
main .main-hero.home h2,
main .main-hero.home h3 {
  font-weight: 300;
}
main .main-hero.home h3 {
  font-size: 2.8rem;
  font-family: "Merriweather", sans-serif;
}
main .main-hero.home .home-content-img {
  margin-top: 42px;
}
main .main-hero.puzzle {
  min-height: calc(100vh - 104px);
}
main section.page-intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 42px;
}
main section.page-intro .info {
  padding: 21px 21px 0 21px;
}
main section.page-intro .info h2,
main section.page-intro .info h3 {
  font-family: "Merriweather", sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
}
main section.page-intro .info p {
  font-size: 2.1rem;
}
main section.page-intro .info a {
  font-size: 2.1rem;
  color: white;
  cursor: pointer;
  text-decoration: underline;
}
main section.page-intro .info a:hover {
  opacity: 0.8;
}
main section.page-intro .how-to-play {
  padding: 21px 21px 0 21px;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}
main section.page-intro .how-to-play button {
  width: 240px;
  padding: 14px;
  border-radius: 7px;
  background-color: white;
  color: rgb(0, 9, 87);
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  cursor: pointer;
  z-index: 5;
}
main section.page-intro .how-to-play .instruct-container {
  position: absolute;
  width: 240px;
  min-height: 21px;
  top: 21px;
  padding: 14px;
  border-radius: 7px;
  background-color: white;
  color: rgb(0, 9, 87);
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  z-index: -1;
  transition: width 0.3s ease, height 0.3s ease;
}
main section.page-intro .how-to-play .instruct-container a {
  text-decoration: underline;
  color: rgb(52, 76, 183);
  font-weight: 600;
}
main section.page-intro .how-to-play .instruct-container a:hover {
  color: rgb(0, 9, 87);
}
main section.page-intro .how-to-play .instruct-container.open-wide {
  width: 56vw;
  padding-top: 36px;
  z-index: 4;
}
main section.page-intro .how-to-play .instruct-container.open-tall {
  padding-top: 42px;
  min-height: 28vh;
  box-shadow: 0 0 20px rgb(0, 9, 87);
  z-index: 4;
}
main section.hero-puzzle {
  width: 100%;
  display: flex;
  flex-direction: column;
}
main section.hero-puzzle .languages {
  display: flex;
  gap: 21px;
  margin-bottom: 21px;
}
main section.hero-puzzle .languages img {
  width: 180px;
  opacity: 0.7;
}
main section.hero-puzzle .languages img.active {
  transform: none;
  cursor: default;
  opacity: 1;
}
main section.hero-puzzle .languages img:hover {
  opacity: 1;
}
main section.hero-puzzle .puzzle-genre,
main section.hero-puzzle .continents,
main section.hero-puzzle .country-info {
  position: relative;
  background-color: white;
  color: rgb(0, 9, 87);
  height: 42px;
  width: 360px;
  margin: 21px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 21px;
}
main section.hero-puzzle .puzzle-genre label,
main section.hero-puzzle .continents label,
main section.hero-puzzle .country-info label {
  font-weight: 400;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 1.8rem;
  color: rgb(0, 9, 87);
}
main section.hero-puzzle .puzzle-genre label .genre-btn,
main section.hero-puzzle .continents label .genre-btn,
main section.hero-puzzle .country-info label .genre-btn {
  vertical-align: middle;
  margin-right: 7px;
  width: 14px;
  height: 14px;
  accent-color: rgb(0, 9, 87);
}
main section.hero-puzzle .puzzle-genre label .genre-btn:hover,
main section.hero-puzzle .continents label .genre-btn:hover,
main section.hero-puzzle .country-info label .genre-btn:hover {
  cursor: pointer;
}
main section.hero-puzzle .puzzle-genre label .genre-btn:checked,
main section.hero-puzzle .continents label .genre-btn:checked,
main section.hero-puzzle .country-info label .genre-btn:checked {
  cursor: default;
}
main section.hero-puzzle .card {
  padding: 42px;
}
main section.hero-puzzle .card #game-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
main section.hero-puzzle .card #game-progress #progress-bar-container {
  position: relative;
  width: 96%;
  height: 7px;
  background-color: lightgray;
  border-radius: 7px;
}
main section.hero-puzzle .card #game-progress #progress-bar-container #progress-bar {
  position: absolute;
  height: 7px;
  border-radius: 7px;
  width: 0.1px;
  background-color: rgb(52, 76, 183);
  transition: width 0.42s ease;
}
main section.hero-puzzle .card #game-progress #progress-limits {
  width: 96%;
  align-self: center;
  display: flex;
  justify-content: space-between;
}
main section.hero-puzzle .card #game-progress #progress-limits p {
  font-size: 14px;
}
main section.hero-puzzle .card .puzzle-display {
  display: flex;
  flex-direction: column;
  padding: 0 21px;
}
main section.hero-puzzle .card .puzzle-display p {
  color: rgb(0, 9, 87);
  font-size: 2.4rem;
}
main section.hero-puzzle .card .puzzle-display .white-space {
  white-space: pre-line;
}
@media (min-aspect-ratio: 1/1) {
  main section.hero-puzzle {
    margin-bottom: 42px;
  }
}
main section.gallery-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  margin-bottom: 42px;
}
main section.gallery-content .card {
  background-color: rgb(87, 123, 193);
  color: white;
  gap: 21px;
}
main section.gallery-content .card-title h3 {
  font-size: 6.3rem;
  letter-spacing: 3px;
}
main section.gallery-content .card-content {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
main section.gallery-content .card-content .media-play video,
main section.gallery-content .card-content .media-play img {
  width: 100%;
}
main section.gallery-content .card-content .media-play img.gallery {
  padding: 7px;
  border-radius: 14px;
  background-color: white;
}
main section.gallery-content .card-content .media-play img.gallery:hover {
  transform: none;
  opacity: 1;
  cursor: default;
}
main section.gallery-content .card-content .media-play .play-buttons {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
main section.gallery-content .card-content .media-play .play-buttons a img {
  width: 100%;
  height: auto;
}
main section.gallery-content .card-content .card-info h4,
main section.gallery-content .card-content .card-info p {
  font-size: 2.4rem;
}
main section.gallery-content .card-content .card-info h4 {
  font-weight: 300;
}
main section.text-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
main section.text-page#privacy, main section.text-page#cookies {
  gap: 0;
}
main section.text-page#privacy {
  margin-bottom: 42px;
}
main section.text-page.biblioteca {
  padding: 0;
}
main section.text-page h2,
main section.text-page h3,
main section.text-page h4,
main section.text-page p {
  margin-bottom: 10px;
  color: rgb(0, 9, 87);
}
main section.text-page h2 {
  color: rgb(87, 123, 193);
  font-weight: 700;
  font-size: 4.2rem;
}
main section.text-page h3 {
  font-size: 2.8rem;
}
main section.text-page h4,
main section.text-page h5,
main section.text-page p,
main section.text-page a {
  font-size: 2.1rem;
}
main section.text-page a {
  color: rgb(52, 76, 183);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
main section.text-page a:hover {
  color: rgb(87, 123, 193);
}
main section.saber-mas.card {
  background-color: rgb(87, 123, 193);
  color: white;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  padding: 21px;
}
main section.saber-mas.card .saber-mas-text h5 {
  font-size: 2.4rem;
  font-weight: 400;
}
main .ui-disabled {
  filter: blur(4px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

main#home-ludoteca {
  padding-top: 0;
}

main#privacy-page-content section#cookies button {
  font-size: 21px;
  color: rgb(52, 76, 183);
  font-family: "Merriweather", sans-serif;
  cursor: pointer;
  text-decoration: underline;
  font-weight: 600;
}
main#privacy-page-content section#cookies button:hover {
  color: rgb(87, 123, 193);
}

/* Grid of links Ludoteca Home page */
section#home-ludoteca-gallery .card {
  background-color: transparent;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
}
section#home-ludoteca-gallery .card a {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#home-ludoteca-gallery .card a img {
  width: 100%;
}
section#home-ludoteca-gallery .card-text {
  flex-grow: 1;
  padding: 14px;
  background: rgb(87, 123, 193);
  border-radius: 14px;
}
section#home-ludoteca-gallery .card-text h3 {
  font-size: 2.4rem;
  font-weight: 200;
  color: white;
}

main#biblioteca {
  padding-top: 0;
  min-height: calc(100vh - 90px);
  position: relative;
  display: flex;
  justify-content: flex-start;
}
main#biblioteca #aside-fill {
  flex-grow: 1;
  position: relative;
  min-width: 63px;
  height: 100%;
}
main#biblioteca aside#biblioteca-articles {
  position: fixed;
  width: 63px;
  transition: width 0.42s ease-in-out;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid white;
  background-color: rgba(52, 76, 183, 0.94);
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container {
  position: relative;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-toggler {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 6;
  cursor: pointer;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 28px;
  height: 28px;
  background-color: transparent;
  z-index: 5;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines > div {
  position: absolute;
  height: 2px;
  width: 100%;
  background-color: white;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-top {
  top: 3px;
  transition: 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-mid {
  top: 13px;
  opacity: 1;
  transition: 0.84s ease;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-bottom {
  bottom: 3px;
  transition: 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-top {
  transform: rotate(405deg);
  top: 13px;
  transition: 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-mid {
  opacity: 0;
  transition: 0.1s ease;
}
main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-bottom {
  transform: rotate(-405deg);
  bottom: 13px;
  transition: 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu {
  display: none;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu.displayed {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li {
  width: 100%;
  padding: 7px 0;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a {
  display: block;
  width: 84%;
  padding: 7px;
  color: white;
  font-size: 1.8rem;
  font-weight: 300;
  border-bottom: 3px solid transparent;
}
main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a:hover, main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a.current {
  box-shadow: 0 3px 3px -3px white;
}
main#biblioteca aside#biblioteca-articles.open {
  width: 280px;
  transition: width 0.42s ease-in-out;
  z-index: 2;
}
main#biblioteca aside#biblioteca-articles::-webkit-scrollbar {
  width: 14px;
  margin-right: 7px;
}
main#biblioteca aside#biblioteca-articles::-webkit-scrollbar-thumb {
  background-color: rgba(0, 9, 87, 0.7);
  border-radius: 42px;
  width: 14px;
  height: 3%;
}
main#biblioteca section#inject-article-content {
  display: flex;
  flex-direction: column;
  padding: 14px;
}
main#biblioteca section#inject-article-content article.article-display {
  display: flex;
  flex-direction: column;
}
main#biblioteca section#inject-article-content article.article-display .article-intro {
  padding: 0px 14px;
  padding-bottom: 21px;
}
main#biblioteca section#inject-article-content article.article-display .article-intro .info h1 {
  font-size: 4.2rem;
  margin-bottom: 14px;
}
main#biblioteca section#inject-article-content article.article-display .article-intro .info h2 {
  font-family: "Merriweather", sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
}
main#biblioteca section#inject-article-content article.article-display .card {
  padding: 21px;
  gap: 14px;
}
main#biblioteca section#inject-article-content article.article-display .article-content {
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin-bottom: 14px;
}
main#biblioteca section#inject-article-content article.article-display .article-references {
  margin-left: 21px;
  margin-bottom: 21px;
}
main#biblioteca section#inject-article-content article.article-display .article-references ol li {
  font-size: 1.4rem;
  padding-top: 7px;
}
main#biblioteca section#inject-article-content article.article-display .article-references ol li a {
  text-decoration: underline;
  color: white;
}
main#biblioteca section#inject-article-content article.article-display .article-references ol li a:hover {
  opacity: 0.7;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container h4 {
  font-size: 2.4rem;
  color: rgb(0, 9, 87);
  font-family: "Alegreya Sans", sans-serif;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery {
  margin-top: 21px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery.not-displayed {
  display: none;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display {
  display: flex;
  align-items: center;
  width: 84%;
  gap: 21px;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display .comments-arrow i {
  font-size: 2.8rem;
  font-weight: 600;
  cursor: pointer;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display .comments-arrow i:hover {
  color: rgb(87, 123, 193);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container {
  position: relative;
  flex-grow: 2;
  height: 210px;
  overflow: hidden;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  width: 100%;
  padding: 21px;
  background-color: rgba(87, 123, 193, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  transition: transform 0.42s ease-in-out;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment.move-out-left {
  animation: moveLeftOut 0.42s forwards;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment.move-in-right {
  animation: moveRightIn 0.42s forwards;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment.move-out-right {
  animation: moveRightOut 0.42s forwards;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment.move-in-left {
  animation: moveLeftIn 0.42s forwards;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs {
  display: flex;
  align-items: center;
  gap: 14px;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-author {
  font-weight: 600;
  font-size: 2.1rem;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating {
  display: flex;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating .post-rating-star {
  font-size: 1.8rem;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating .post-rating-star:nth-child(1) {
  transform: rotate(-10deg);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating .post-rating-star:nth-child(2) {
  transform: rotate(42deg);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating .post-rating-star:nth-child(3) {
  transform: rotate(84deg);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-specs .post-rating .post-rating-star:nth-child(4) {
  transform: rotate(180deg);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-content {
  margin-top: 14px;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment .post-date {
  margin-top: auto;
  align-self: flex-end;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery .comments-gallery-index {
  margin-top: 7px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery .comments-gallery-index .gallery-dot {
  height: 7px;
  width: 7px;
  border-radius: 7px;
  background-color: rgb(87, 123, 193);
}
main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery .comments-gallery-index .gallery-dot.current {
  background-color: rgb(0, 9, 87);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment {
  display: none;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment.displayed {
  display: flex;
  flex-direction: column;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #comment-submit-error {
  color: red;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #comment-submit-error.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 21px;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate h5 {
  font-size: 2.1rem;
  font-weight: 300;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit {
  display: flex;
  gap: 7px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit.submit-error {
  border: 1px solid red;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate {
  font-size: 2.4rem;
  color: lightgray;
  cursor: pointer;
  font-weight: 500;
  opacity: 0.4;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate:hover, main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate.hovered {
  opacity: 0.7;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate.clicked {
  opacity: 1;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate:nth-child(1) {
  transform: rotate(-10deg);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate:nth-child(2) {
  transform: rotate(42deg);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate:nth-child(3) {
  transform: rotate(84deg);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate:nth-child(4) {
  transform: rotate(180deg);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea#article-comment-submit {
  width: 100%;
  height: 84px;
  font-family: "Merriweather", sans-serif;
  color: rgb(0, 9, 87);
  border-bottom-right-radius: 0;
  border: 1px solid transparent;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea#article-comment-submit.submit-error {
  border: 1px solid red;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit {
  display: flex;
  gap: 21px;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit input {
  width: 210px;
  border: 1px solid transparent;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit input.submit-error {
  border: 1px solid red;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit button {
  cursor: pointer;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment input, main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea {
  outline: none;
  padding: 14px;
  border-radius: 7px;
  background-color: rgba(87, 123, 193, 0.1);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment input:focus, main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea:focus {
  border: 1px solid rgb(87, 123, 193) !important;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment p a {
  text-decoration: underline;
  font-weight: 600;
  color: rgb(52, 76, 183);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment p a:hover {
  color: rgb(87, 123, 193);
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment label {
  display: inline-flex;
  max-width: fit-content;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 1.4rem;
  border: 1px solid transparent;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment label input {
  cursor: pointer;
  margin-right: 7px;
}
main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment label.submit-error {
  border: 1px solid red;
  transition: border 0.42s ease;
}
main#biblioteca section#inject-article-content section.article-comments #submit-comment-feedback {
  display: none;
}
main#biblioteca section#inject-article-content section.article-comments #submit-comment-feedback.displayed {
  display: block;
  padding: 42px;
  opacity: 0;
}
main#biblioteca section#inject-article-content section.article-comments #submit-comment-feedback.displayed p {
  font-size: 2.1rem;
}
main#biblioteca section#inject-article-content section.article-comments #submit-comment-feedback.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}

main#memes .memes-container {
  margin-bottom: 42px;
  gap: 7px;
}
main#memes .memes-container-header h3 {
  color: rgb(0, 9, 87);
  font-size: 6.3rem;
}
main#memes .memes-container-gallery.grid-col-3 {
  flex-grow: 1;
  padding: 14px;
}
main#memes .memes-container-gallery.grid-col-3 .img img {
  box-shadow: 5px 10px 18px lightgray;
  width: 100%;
  height: auto;
}
main#memes .memes-container-gallery.grid-col-3 .img img:hover {
  transform: none;
  opacity: 1;
  cursor: default;
}
main#memes .memes-about {
  background-color: white;
  color: rgb(0, 9, 87);
  border-radius: 14px;
  padding: 14px;
}
main#memes .memes-about li.title {
  font-size: 2.4rem;
  font-family: "Alegreya Sans", sans-serif;
  font-weight: 700;
}
main#memes .memes-about li.title li.text {
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  font-weight: 300;
  margin-bottom: 14px;
}
main#memes .memes-about p {
  font-size: 1.8rem;
}

main#contact {
  padding-bottom: 0;
}
main#contact section.page-intro {
  padding: 0;
}
main#contact section.page-intro .info {
  padding: 0;
}
main#contact section.page-intro .info p {
  font-size: 2.4rem;
}
main#contact section#contact-display {
  flex-grow: 2;
  justify-content: flex-start;
}
main#contact section#contact-display .contact-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
}
main#contact section#contact-display .contact-display-grid .contact-details {
  min-height: 42vh;
}
main#contact section#contact-display .contact-display-grid .contact-details-content {
  height: 100%;
  padding: 21px;
  background-color: white;
  border-radius: 21px;
  color: rgb(0, 9, 87);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main#contact section#contact-display .contact-display-grid .contact-details-content h3 {
  text-align: center;
}
main#contact section#contact-display .contact-display-grid .contact-details-content h4 {
  font-size: 2.1rem;
  color: rgb(0, 9, 87);
}
main#contact section#contact-display .contact-display-grid .contact-details-content > :nth-child(1) {
  margin-bottom: 14px;
  font-size: 4.2rem;
}
main#contact section#contact-display .contact-display-grid .contact-gallery {
  position: relative;
  overflow: hidden;
  background-color: rgb(87, 123, 193);
  border-radius: 14px;
  padding: 14px 14px 0 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-clouds {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 240px;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img {
  width: 420px;
  height: auto;
  position: absolute;
  top: 0;
  transition: all 1.4s ease;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img.img-current {
  right: -60px;
  transition: all 1.4s ease;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img.move-left {
  right: 90vw;
  transition: all 1.4s ease;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img.move-right {
  right: -90vw;
  transition: all 1.4s ease;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-index {
  display: flex;
  justify-content: center;
  align-items: center;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-index .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 14px;
  background-color: rgb(0, 9, 87);
  cursor: pointer;
}
main#contact section#contact-display .contact-display-grid .contact-gallery-index .dot:hover, main#contact section#contact-display .contact-display-grid .contact-gallery-index .dot.dot-current {
  background-color: rgb(235, 230, 69);
}

main#jokes section.hero-puzzle .card .puzzle-display {
  height: 84px;
}
main#jokes section.hero-puzzle .card-interaction {
  display: flex;
  justify-content: space-evenly;
  padding: 0 21px;
}
main#jokes section.hero-puzzle .card-interaction-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
main#jokes section.hero-puzzle .card-interaction-container button {
  font-size: 2.1rem;
  cursor: pointer;
}
main#jokes section.hero-puzzle .card-interaction-container button#response {
  display: none;
  width: 210px;
}
main#jokes section.hero-puzzle .card-interaction-container button#response.displayed {
  display: block;
  opacity: 0;
}
main#jokes section.hero-puzzle .card-interaction-container button#response.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#jokes section.hero-puzzle .card-interaction-container button.emoji-reaction {
  display: none;
  transform: scale(1.5);
  opacity: 0.63;
  transition: all 0.42s ease;
}
main#jokes section.hero-puzzle .card-interaction-container button.emoji-reaction:hover, main#jokes section.hero-puzzle .card-interaction-container button.emoji-reaction.selected {
  transform: scale(2);
  opacity: 1;
  transition: all 0.42s ease;
}
main#jokes section.hero-puzzle .card-interaction-container button.emoji-reaction.displayed {
  display: block;
}
main#jokes section.hero-puzzle .card-interaction-container button :focus {
  outline: none;
  box-shadow: none;
}
main#jokes section.hero-puzzle .card-interaction-container#next-joke-container {
  width: 150px;
}
main#jokes section.hero-puzzle .card-interaction-container#next-joke-container button#next-joke {
  display: none;
}
main#jokes section.hero-puzzle .card-interaction-container#next-joke-container button#next-joke.displayed {
  display: block;
  width: 100%;
  opacity: 0;
}
main#jokes section.hero-puzzle .card-interaction-container#next-joke-container button#next-joke.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#jokes section.hero-puzzle .card-interaction-container#next-joke-container button#next-joke :focus {
  outline: none;
  box-shadow: none;
}
main#jokes section.hero-puzzle .card-interaction-container .emoji-reactions {
  display: flex;
  gap: 21px;
}

main#emojis section.hero-puzzle .genre-toggle,
main#adivinanzas section.hero-puzzle .genre-toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 21px;
}
main#emojis section.hero-puzzle .genre-toggle .puzzle-genre,
main#adivinanzas section.hero-puzzle .genre-toggle .puzzle-genre {
  width: 240px;
  justify-content: flex-start;
  gap: 21px;
}
main#emojis section.hero-puzzle .card,
main#adivinanzas section.hero-puzzle .card {
  position: relative;
  padding: 21px 0;
  gap: 0;
}
main#emojis section.hero-puzzle .card .puzzle-display-container,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 21px;
  padding-bottom: 42px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text {
  position: relative;
  min-height: 140px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text {
  color: rgb(0, 9, 87);
  font-size: 4.2rem;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text.show,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text.show {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text-riddles,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text-riddles {
  font-size: 2.8rem;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback {
  position: relative;
  width: 100%;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint {
  width: 100%;
  font-size: 2.4rem;
  font-style: italic;
  opacity: 0;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint.displayed,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint.displayed {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 2.1rem;
  font-weight: 200;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback.displayed,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback.displayed {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .white-space,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .white-space {
  white-space: pre-line;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display input,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display input {
  width: 100%;
  padding: 14px;
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  border-radius: 7px;
  border: 2px solid rgb(87, 123, 193);
  outline: none;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display input:focus,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display input:focus {
  border: 2px solid rgb(52, 76, 183);
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 21px 42px 21px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons {
  width: 100%;
  display: flex;
  gap: 42px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container {
  display: flex;
  align-items: center;
  gap: 42px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button {
  font-size: 1.8rem;
  cursor: pointer;
  height: 52px;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button.active,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button.active {
  background-color: rgb(0, 9, 87);
  cursor: default;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button#next-puzzle-button,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button#next-puzzle-button {
  transition: background-color 0.42s ease;
}
main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button#next-puzzle-button.active,
main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button#next-puzzle-button.active {
  background-color: rgb(0, 9, 87);
  transition: background-color 0.42s ease;
}
main#emojis section.hero-puzzle .card #end-puzzles,
main#adivinanzas section.hero-puzzle .card #end-puzzles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.42s ease;
  padding: 21px;
  font-size: 2.1rem;
}
main#emojis section.hero-puzzle .card #end-puzzles.displayed,
main#adivinanzas section.hero-puzzle .card #end-puzzles.displayed {
  display: block;
}
main#emojis section.hero-puzzle .card #end-puzzles.displayed.fade,
main#adivinanzas section.hero-puzzle .card #end-puzzles.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#emojis section.saber-mas.end-game,
main#adivinanzas section.saber-mas.end-game {
  margin-top: 84px;
}

main#world-game section.hero-puzzle .languages button.disabled img {
  cursor: default;
  opacity: 0.4;
  transform: none;
}
main#world-game section.hero-puzzle .languages button.disabled img.active {
  opacity: 0.7;
}
main#world-game section.hero-puzzle .continents, main#world-game section.hero-puzzle .country-info {
  width: calc(100% - 42px);
  margin: 7px 21px;
  justify-content: flex-start;
}
main#world-game section.hero-puzzle .continents label, main#world-game section.hero-puzzle .country-info label {
  font-size: 1.7rem;
}
main#world-game section.hero-puzzle .puzzle-genre {
  margin: 21px 21px 7px;
  justify-content: flex-start;
}
main#world-game section.hero-puzzle .country-info {
  margin-bottom: 21px;
}
main#world-game section.hero-puzzle .continents label, main#world-game section.hero-puzzle .country-info label, main#world-game section.hero-puzzle .puzzle-genre label {
  margin-left: 28px;
  cursor: pointer;
}
main#world-game section.hero-puzzle .continents label.disabled, main#world-game section.hero-puzzle .country-info label.disabled, main#world-game section.hero-puzzle .puzzle-genre label.disabled {
  cursor: default;
}
main#world-game section.hero-puzzle .continents label input, main#world-game section.hero-puzzle .country-info label input, main#world-game section.hero-puzzle .puzzle-genre label input {
  cursor: pointer;
}
main#world-game section.hero-puzzle .continents label input.disabled, main#world-game section.hero-puzzle .country-info label input.disabled, main#world-game section.hero-puzzle .puzzle-genre label input.disabled {
  accent-color: rgb(52, 76, 183) !important;
  opacity: 0.42 !important;
  cursor: default;
}
main#world-game section.hero-puzzle .card {
  position: relative;
  gap: 0;
}
main#world-game section.hero-puzzle .card #end-game-display {
  padding: 0;
  margin-top: 0;
}
main#world-game section.hero-puzzle .card #end-game-display #end-game-display-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 21px;
}
main#world-game section.hero-puzzle .card #end-game-display #end-game-display-intro p {
  font-size: 2.1rem;
  width: 84%;
}
main#world-game section.hero-puzzle .card #end-game-display #end-game-display-intro button {
  cursor: pointer;
}
main#world-game section.hero-puzzle .card #start-game-display {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 21px;
  text-align: center;
}
main#world-game section.hero-puzzle .card #start-game-display button {
  cursor: pointer;
  width: 210px;
}
main#world-game section.hero-puzzle .card #start-game-display.displayed {
  display: flex;
}
main#world-game section.hero-puzzle .card #game-progress {
  display: none;
}
main#world-game section.hero-puzzle .card #game-progress.displayed {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}
main#world-game section.hero-puzzle .card #game-progress #progress-bar-container {
  position: relative;
  width: 96%;
  height: 7px;
  background-color: lightgray;
  border-radius: 7px;
  align-self: center;
}
main#world-game section.hero-puzzle .card #game-progress #progress-bar-container #progress-bar {
  position: absolute;
  height: 7px;
  border-radius: 7px;
  background-color: rgb(52, 76, 183);
  transition: width 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display.displayed {
  display: grid;
  grid-template-columns: 2fr 1fr;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display #game-display-country {
  grid-column: span 2;
  padding: 0 21px;
}
main#world-game section.hero-puzzle .card #game-display #game-display-country p {
  font-size: 3.6rem;
  color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card #game-display #game-display-country p.hidden {
  visibility: hidden;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text {
  padding: 0 21px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text p#easy-question-head {
  font-size: 2.1rem;
  color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
  padding: 14px 21px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display.displayed {
  display: grid;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label {
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label img {
  width: 84px;
  height: auto;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label input, main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label span {
  cursor: pointer;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display {
  display: none;
  align-items: center;
  padding: 14px 21px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.wide {
  gap: 14px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.wide label[for=greater-than] {
  flex-direction: row-reverse;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.wide p#pop-area-alt {
  font-size: 2.1rem;
  font-weight: 500;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label {
  font-size: 2.1rem;
  display: flex;
  align-items: center;
  gap: 7px;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label input, main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label span {
  cursor: pointer;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label input.disabled, main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label span.disabled {
  cursor: default;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.stacked {
  gap: 7px;
  flex-direction: column;
  align-items: flex-start;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.stacked p#pop-area-alt {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display.displayed {
  display: flex;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy.displayed {
  display: block;
  width: auto;
  opacity: 0;
}
main#world-game section.hero-puzzle .card #game-display #genre-easy.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text {
  padding: 0 21px;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p {
  font-size: 3.6rem;
  color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p#hard-question-head {
  font-size: 2.1rem;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p#hard-country-text {
  margin-bottom: 7px;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text img {
  width: 96px;
  height: auto;
  display: block;
  margin-left: 21%;
  margin-top: 14px;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard.displayed {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: auto;
  opacity: 0;
}
main#world-game section.hero-puzzle .card #game-display #genre-hard.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display .game-display-interaction {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 21px;
}
main#world-game section.hero-puzzle .card #game-display .game-display-interaction button {
  width: 63%;
}
main#world-game section.hero-puzzle .card #game-display .game-display-interaction button#show-points.active {
  background-color: rgb(52, 76, 183);
}
main#world-game section.hero-puzzle .card #game-display .game-display-interaction button#show-points.active:hover {
  background-color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback {
  grid-column: span 2;
  margin: 14px 21px 0 21px;
  min-height: 84px;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #easy-interaction {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #easy-interaction.displayed {
  display: flex;
  align-items: start;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction {
  display: none;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction.displayed {
  display: flex;
  align-items: flex-start;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input {
  width: 63%;
  padding: 14px;
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  border-radius: 7px;
  border: 2px solid rgb(87, 123, 193);
  outline: none;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input:focus {
  border: 2px solid rgb(52, 76, 183);
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction button {
  height: auto;
  margin-left: 28px;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback {
  display: none;
  font-size: 2.4rem;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback.displayed {
  display: block;
  opacity: 0;
}
main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card #game-display button {
  cursor: pointer;
}
main#world-game section.hero-puzzle .card #game-display button.disabled {
  cursor: default;
  opacity: 0.7;
}
main#world-game section.hero-puzzle .card #game-display button.disabled:hover {
  background-color: rgb(87, 123, 193);
  opacity: 0.7;
}
main#world-game section.hero-puzzle .card .points-display {
  height: auto;
  display: none;
  width: 100%;
  opacity: 0;
}
main#world-game section.hero-puzzle .card .points-display.displayed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
main#world-game section.hero-puzzle .card .points-display.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container {
  max-width: 100%;
  overflow-x: auto;
  /*
  &::-webkit-scrollbar-track-piece:end {
      margin-right: 50px; 
  }

  &::-webkit-scrollbar-track-piece:start {
      margin-left: 50px;
  }*/
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table {
  width: auto;
  border-spacing: 7px;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th button {
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 7px 14px;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  font-weight: 300;
  border-radius: 42px;
  font-family: "Merriweather", sans-serif;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th button:hover {
  background-color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th button.active {
  background-color: rgb(52, 76, 183);
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th button.active:hover {
  background-color: rgb(0, 9, 87);
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th, main#world-game section.hero-puzzle .card .points-display .see-points-table-container table td {
  padding: 7px 21px;
  font-size: 1.4rem;
  text-align: center;
  font-weight: 300;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table td.puzzle-points {
  text-align: center;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table .puzzle-points-header {
  background-color: rgb(0, 9, 87);
  border-radius: 42px;
  color: white;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table .puzzle-points-row {
  background-color: white;
  padding: 0;
  border-radius: 0 42px 42px 0;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table .puzzle-points-row div {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 9, 87);
  padding: 7px 21px;
  font-size: 1.4rem;
  text-align: center;
  font-weight: 300;
  border-radius: 42px;
  color: white;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th#prev-points-header {
  background-color: white;
  padding: 0;
  border-radius: 0 42px 42px 0;
  min-width: 120px;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table .puzzle-points {
  background-color: rgba(0, 9, 87, 0.2);
  border-radius: 42px;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container table th:first-child, main#world-game section.hero-puzzle .card .points-display .see-points-table-container table td:first-child {
  position: sticky;
  z-index: 1;
  left: 0;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container::-webkit-scrollbar {
  height: 3px;
}
main#world-game section.hero-puzzle .card .points-display .see-points-table-container::-webkit-scrollbar-thumb {
  background-color: rgb(87, 123, 193);
  border-radius: 3px;
  width: 14%;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction {
  display: none;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction.displayed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction p {
  font-size: 2.1rem;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction .score-table-buttons {
  display: flex;
  gap: 14px;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction .score-table-buttons button {
  cursor: pointer;
}
main#world-game section.hero-puzzle .card .points-display #see-best-interaction .score-table-buttons button.active {
  background-color: rgb(52, 76, 183);
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container {
  display: none;
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container p {
  font-size: 2.1rem;
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container.displayed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 21px;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container #no-consent-buttons {
  display: flex;
  gap: 21px;
}
main#world-game section.hero-puzzle .card .points-display #no-consent-container #no-consent-buttons button {
  cursor: pointer;
}
main#world-game section.saber-mas {
  margin-top: 42px;
}
@media (min-aspect-ratio: 1/1) {
  main#world-game section.saber-mas {
    margin-top: 0;
  }
}
main#world-game section.saber-mas.end-game {
  margin-top: 84px;
}

main#game-42 .main-hero.puzzle {
  height: 100%;
}
main#game-42 .main-hero.puzzle .page-intro {
  flex-direction: row;
  margin-bottom: 14px;
}
main#game-42 .main-hero.puzzle .page-intro .languages {
  flex-grow: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 7vw;
}
main#game-42 .main-hero.puzzle .page-intro .languages button {
  display: flex;
}
main#game-42 .main-hero.puzzle .page-intro .languages button img {
  width: 140px;
  height: auto;
  align-self: flex-end;
  opacity: 0.7;
}
main#game-42 .main-hero.puzzle .page-intro .languages button img.active {
  opacity: 1;
}
main#game-42 .main-hero.puzzle .page-intro .languages button img.active:hover {
  transform: none;
  cursor: default;
}
main#game-42 #game-display {
  flex-grow: 2;
  display: grid;
  gap: 7px;
  grid-template-columns: 1fr 2fr;
}
main#game-42 #game-display section#game-42-buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3px;
  padding: 7px 14px;
  background-color: rgba(87, 123, 193, 0.4);
  border-radius: 21px;
}
main#game-42 #game-display section#game-42-buttons .pos-42 {
  text-align: left;
  width: 100%;
  font-size: 2.1rem;
  color: white;
  padding: 7px;
  padding-left: 21px;
  border-radius: 21px;
}
main#game-42 #game-display section#game-42-buttons .pos-42:hover, main#game-42 #game-display section#game-42-buttons .pos-42.closed {
  background-color: white;
  color: rgb(0, 9, 87);
}
main#game-42 #game-display section#game-42-buttons .pos-42:hover {
  cursor: pointer;
}
main#game-42 #game-display section#game-42-buttons .pos-42.closed {
  text-align: center;
  padding: 7px;
  cursor: default;
}
main#game-42 #game-display section#game-42-buttons .pos-42.closed.game-over {
  background-color: rgb(0, 9, 87);
  color: white;
}
main#game-42 #game-display section#game-42-buttons .pos-42.closed.game-over:hover {
  background-color: rgb(0, 9, 87);
}
main#game-42 #game-display section#game-42-buttons .pos-42.game-over {
  cursor: default;
}
main#game-42 #game-display section#game-42-buttons .pos-42.game-over:hover {
  background-color: rgb(52, 76, 183);
  color: white;
}
main#game-42 #game-display section#interaction-42 {
  width: 100%;
  justify-self: center;
  justify-items: center;
}
main#game-42 #game-display section#interaction-42 .how-to-play {
  position: relative;
  align-self: flex-end;
  width: 240px;
}
main#game-42 #game-display section#interaction-42 .how-to-play button {
  position: relative;
  width: 240px;
  padding: 14px;
  border-radius: 7px;
  background-color: white;
  color: rgb(0, 9, 87);
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  cursor: pointer;
  z-index: 3;
}
main#game-42 #game-display section#interaction-42 .how-to-play .instruct-container {
  position: absolute;
  right: 0;
  top: 0;
  width: 240px;
  min-height: 21px;
  padding: 14px;
  border-radius: 7px;
  background-color: white;
  color: rgb(0, 9, 87);
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  z-index: -1;
  transition: width 0.3s ease, height 0.3s ease;
}
main#game-42 #game-display section#interaction-42 .how-to-play .instruct-container a {
  text-decoration: underline;
  color: rgb(52, 76, 183);
  font-weight: 600;
}
main#game-42 #game-display section#interaction-42 .how-to-play .instruct-container a:hover {
  color: rgb(0, 9, 87);
}
main#game-42 #game-display section#interaction-42 .how-to-play .instruct-container.open-wide {
  padding-top: 36px;
  width: 56vw;
  z-index: 2;
}
main#game-42 #game-display section#interaction-42 .how-to-play .instruct-container.open-tall {
  padding-top: 63px;
  min-height: 28vh;
  box-shadow: 0 0 20px rgb(0, 9, 87);
  z-index: 2;
}
main#game-42 #game-display section#interaction-42 .interaction-container {
  width: 84%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
main#game-42 #game-display section#interaction-42 .interaction-container h3 {
  font-family: "Merriweather", sans-serif;
  font-weight: 300;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 21px;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button,
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place {
  font-size: 2.8rem;
  line-height: 1.4rem;
  width: 210px;
  text-align: center;
  border-radius: 42px;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button {
  display: none;
  cursor: pointer;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button.displayed {
  display: block;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place {
  display: none;
  background-color: rgb(0, 9, 87);
  transition: opacity 0.42s ease;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place.displayed {
  display: block;
  opacity: 0;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place.displayed.fade {
  opacity: 1;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 3;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42.displayed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
}
main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42.displayed button {
  width: 140px;
  justify-self: center;
  align-self: center;
  cursor: pointer;
  font-size: 1.8rem;
}

main#tr3s section.hero-puzzle .genre-toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 14px;
  margin-left: 14px;
}
main#tr3s section.hero-puzzle .card {
  position: relative;
  padding: 21px 0;
  gap: 0;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container {
  display: flex;
  flex-direction: column;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #start-game {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #start-game.displayed {
  display: flex;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #start-game.displayed.show {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #start-game button {
  cursor: pointer;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #game-progress,
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback {
  visibility: hidden;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #game-progress.visible,
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback.visible {
  visibility: visible;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction #game-progress.visible.show,
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback.visible.show {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback {
  background-color: white;
  width: 84%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container {
  background-color: white;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 14px;
  display: flex;
  align-items: center;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons {
  background-color: white;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button {
  width: 84%;
  cursor: pointer;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button:disabled {
  background-color: rgb(0, 9, 87);
  cursor: default;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button#no-tr3s-button {
  position: relative;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button#no-tr3s-button.hinted {
  opacity: 1;
  animation: hintButtonPulse 1.5s infinite ease-in-out;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .hints,
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .no-tr3s {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 7px;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .hints p {
  width: 84%;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons.visible {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container {
  background-color: white;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container.displayed {
  display: flex;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container.displayed.show {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .text-feedback-container {
  background-color: white;
  position: absolute;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .text-feedback-container p {
  font-size: 2.1rem;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .text-feedback-container.displayed {
  display: flex;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .text-feedback-container.displayed.show {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container {
  background-color: white;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.42s ease;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container p#table-feedback-header {
  font-size: 1.8rem;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container.displayed {
  display: flex;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container.displayed.show {
  opacity: 1;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  width: 63%;
  padding: 3px 14px;
  border-radius: 7px;
  table-layout: fixed;
  border-spacing: 7px;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table th,
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table td {
  position: relative;
  text-align: center;
  font-size: 1.4rem;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16.5%;
  /* Adjust to control horizontal start */
  width: 63%;
  /* Adjust to control length */
  border-bottom: 1px solid rgb(0, 9, 87);
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display {
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container {
  position: relative;
  aspect-ratio: 1/1;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  /* ✨ shadow */
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container img {
  width: 100%;
  height: 100%;
  border-radius: 21px;
  max-width: 500px;
  transform: none;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(52, 76, 183);
  border-radius: 21px;
  opacity: 0;
  cursor: pointer;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay.hinted {
  opacity: 1;
  animation: pulseBackground 1.5s infinite ease-in-out;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay.hinted.active.selected {
  animation: none;
  opacity: 0.14;
}
@media (hover: hover) and (pointer: fine) {
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay.active:hover, main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay.active:focus-visible {
    opacity: 0.21;
    transform: none;
  }
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay.active.selected {
  opacity: 0.14;
}
main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay .card-overlay.active:focus-visible:not(.selected) {
  opacity: 0;
}
main#tr3s section.hero-puzzle .card #end-game-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.42s ease;
  padding: 84px;
  font-size: 2.1rem;
}
main#tr3s section.hero-puzzle .card #end-game-display p {
  font-size: 2.1rem;
}
main#tr3s section.hero-puzzle .card #end-game-display p a {
  color: rgb(52, 76, 183);
  cursor: pointer;
  font-weight: 500;
}
main#tr3s section.hero-puzzle .card #end-game-display p a:hover {
  color: rgb(87, 123, 193);
}
main#tr3s section.hero-puzzle .card #end-game-display .points-interaction .table-container#end-game-table-container {
  margin-top: 0;
}
main#tr3s section.hero-puzzle .card #end-game-display button#end-game-play-again {
  margin-top: 21px;
  cursor: pointer;
}
main#tr3s section.hero-puzzle .card #end-game-display.displayed {
  display: block;
}
main#tr3s section.hero-puzzle .card #end-game-display.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}

main#malabares .malabares-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}
main#malabares .malabares-content-card {
  gap: 21px;
}
main#malabares .malabares-content-card-videos {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 42px;
  margin-bottom: 21px;
}
main#malabares .malabares-content-card-videos-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
main#malabares .malabares-content-card-videos img {
  width: 100%;
  box-shadow: 0 0 21px -4px rgb(0, 9, 87);
  transition: none;
}
main#malabares .malabares-content-card-videos img:hover {
  transform: none;
  opacity: 1;
  cursor: default;
}
main#malabares .malabares-content-card-info p {
  color: rgb(0, 9, 87);
  font-size: 2.1rem;
}
main#malabares .malabares-content-card:last-child {
  margin-bottom: 42px;
}

main#trabalenguas .card {
  justify-content: space-between;
  gap: 0;
}
main#trabalenguas .card .trabalengua-text {
  margin-bottom: 21px;
}
main#trabalenguas .card .trabalengua-text h3 {
  font-size: 2.4rem;
}
main#trabalenguas .card audio {
  border: 3px solid rgb(0, 9, 87);
  border-radius: 42px;
}
main#trabalenguas section.saber-mas {
  margin-top: 42px;
}

main#buscando-figuras section.hero-puzzle .genre-toggle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 21px;
}
main#buscando-figuras section.hero-puzzle .genre-toggle .puzzle-genre {
  width: 280px;
  justify-content: flex-start;
  gap: 21px;
}
main#buscando-figuras section.hero-puzzle .card {
  position: relative;
  padding: 21px 0;
  gap: 0;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 21px 0 42px 21px;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display img {
  width: 100%;
  height: auto;
  opacity: 0;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display img:hover {
  transform: scale(1);
  cursor: default;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display img.displayed {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 21px 21px 42px 0;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer {
  width: 100%;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer h4.question-text {
  color: rgb(0, 9, 87);
  font-size: 2.1rem;
  margin-bottom: 14px;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback {
  position: relative;
  width: 100%;
  height: 53px;
  display: flex;
  align-items: center;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback input {
  display: none;
  width: 100%;
  flex-grow: 1;
  padding: 14px 7px;
  font-size: 1.8rem;
  font-family: "Merriweather", sans-serif;
  border-radius: 7px;
  border: 2px solid rgb(87, 123, 193);
  outline: none;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback input.displayed {
  display: flex;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback input.displayed.show {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback input.displayed.show:focus {
  border: 2px solid rgb(52, 76, 183);
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback p.feedback {
  display: none;
  width: 100%;
  font-size: 2.1rem;
  font-weight: 200;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback p.feedback.displayed {
  display: block;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons .question-answer .submit-feedback p.feedback.displayed.show {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons button {
  font-size: 1.8rem;
  cursor: pointer;
  height: 52px;
  width: 63%;
}
main#buscando-figuras section.hero-puzzle .card #end-puzzles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  display: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.42s ease;
  padding: 21px;
  font-size: 2.1rem;
  flex-direction: column;
  justify-content: center;
}
main#buscando-figuras section.hero-puzzle .card #end-puzzles.displayed {
  display: flex;
}
main#buscando-figuras section.hero-puzzle .card #end-puzzles.displayed.fade {
  opacity: 1;
  transition: opacity 0.42s ease;
}
main#buscando-figuras section.saber-mas.end-game {
  margin-top: 84px;
}

main#order-operations {
  display: flex;
  flex-direction: column;
  padding: 0px 42px;
  min-height: calc(100vh - 90px);
}
main#order-operations section.order-operations-intro h2 {
  font-size: 2.1rem;
  font-weight: 400;
}
main#order-operations section.order-operations-intro h3 {
  text-align: center;
  font-weight: 300;
}
main#order-operations section.order-operations-levels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 21px;
}
main#order-operations section.order-operations-levels div {
  background: white;
  width: 100px;
  height: 40px;
  border-radius: 7px;
  color: rgb(0, 9, 87);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
}
main#order-operations section.order-operations-levels div:hover, main#order-operations section.order-operations-levels div.active {
  background: rgb(0, 9, 87);
  color: rgb(235, 230, 69);
  font-weight: 600;
}
main#order-operations section.order-operations-display {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
main#order-operations section.order-operations-display div.operation-container {
  width: 84%;
  height: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 42px;
}
main#order-operations section.order-operations-display div.operation-container p {
  font-size: 42px;
  height: 42px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main#order-operations section.order-operations-display div.operation-container p.order-operator {
  cursor: pointer;
  border-radius: 50%;
}
main#order-operations section.order-operations-display div.operation-container p.order-operator:hover {
  background: white;
  color: rgb(0, 9, 87);
}
main#order-operations section.order-operations-display div.operation-container.wrong {
  background-color: rgb(235, 230, 69);
}

div#temp-display {
  position: absolute;
  background-color: white;
  border-radius: 42px;
  padding: 14px 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84vh;
}

div#temp-operation {
  font-size: 28px;
  color: rgb(0, 9, 87);
  display: flex;
  align-items: center;
  justify-content: center;
}

input#temp-input {
  height: 42px;
  width: 84px;
  font-size: 28px;
  border-radius: 7px;
  padding: 7px;
  border: 3px solid rgb(87, 123, 193);
}

button#temp-submit {
  background-color: rgb(235, 230, 69);
  color: rgb(0, 9, 87);
  font-size: 18px;
  padding: 7px;
  width: auto;
  border-radius: 7px;
  border: 1px solid rgb(0, 9, 87);
  cursor: pointer;
  margin-left: 21px;
}
button#temp-submit:hover {
  background-color: rgb(0, 9, 87);
  color: rgb(235, 230, 69);
}

div.order-operator-float {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  color: rgb(0, 9, 87);
  font-size: 18px;
  padding: 21px;
  min-width: 100px;
  aspect-ratio: 1/1;
  border: 2px solid rgb(0, 9, 87);
}

main.biblioteca .text-page {
  display: flex;
  flex-direction: column;
  gap: 21px;
}
main.biblioteca .card {
  gap: 7px;
}

#footer {
  position: relative;
  background: rgb(0, 9, 87);
  color: #fff;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  text-align: center;
  padding: 1rem;
  width: 100%;
}
#footer .footer-social {
  margin-bottom: 0.5rem;
}
#footer .footer-social a {
  color: #fff;
  padding: 7px;
}
#footer .footer-social a:hover {
  display: inline-block;
  color: rgb(0, 9, 87);
  background: rgb(235, 230, 69);
  border-radius: 3px;
}
#footer .footer-info .ludo-michael {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
#footer .footer-info .ludo-michael > :nth-child(1) {
  color: rgb(235, 230, 69);
  font-family: "Alegreya Sans", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 2px;
}
#footer .footer-info .ludo-michael > :nth-child(3) {
  color: white;
  font-family: "Merriweather", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
#footer .footer-info .ludo-michael h4 {
  padding: 0 0.5rem;
}
#footer .footer-info p {
  font-family: "Merriweather", sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 14px;
}
#footer .footer-info a {
  color: rgb(235, 230, 69);
  font-weight: 700;
  font-family: "Alegreya Sans", sans-serif;
  font-size: 21px;
  letter-spacing: 2px;
  height: 100%;
  text-decoration: underline;
}
#footer .footer-info a.privacy-cookies-footer-link {
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
}
#footer .footer-info .pipe {
  font-size: 16px;
}

@media (max-width: 960px) {
  .grid-col-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-col-2 {
    gap: 21px;
  }
  header#navbar .ludo-logo-text {
    margin-left: 7px;
  }
  header#navbar .ludo-logo-text > :nth-child(1) {
    font-size: 2.4rem;
  }
  header#navbar .ludo-logo-text > :nth-child(2) {
    font-size: 2.1rem;
  }
  header#navbar nav ul#main-menu li {
    padding: 0 7px;
  }
  header#navbar nav ul#main-menu li a,
  header#navbar nav ul#main-menu li button {
    font-size: 1.7rem;
  }
  header#navbar nav ul#main-menu li #main-learn-sub-menu ul.learn-sub-menu-group {
    margin-left: 7px;
  }
  header#navbar nav ul#main-menu li #main-learn-sub-menu ul.learn-sub-menu-group li {
    padding-left: 7px;
  }
  header#navbar nav ul#main-menu li #main-learn-sub-menu ul.learn-sub-menu-group li a {
    font-size: 1.5rem;
  }
  main {
    padding: 14px 42px;
  }
  main .main-hero h1 {
    font-size: 4.2rem;
  }
  main .main-hero h2,
  main .main-hero h3 {
    font-size: 2.1rem;
  }
  main section.page-intro .info h1 {
    font-size: 4.2rem;
  }
  main section.hero-puzzle .card {
    padding: 21px;
  }
  main section.gallery-content .card {
    padding: 28px;
  }
  main section.gallery-content .card-title h3 {
    font-size: 4.2rem;
  }
  main section.text-page h2 {
    font-size: 3.6rem;
  }
  main section.saber-mas.card {
    gap: 21px;
  }
  main section.saber-mas.card img {
    width: 240px;
  }
  main section.saber-mas.card .saber-mas-text h5 {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro .info h2 {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content section.article-comments {
    padding: 21px;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display {
    gap: 7px;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display .comments-arrow i {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment p,
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment a {
    font-size: 1.4rem;
  }
  main#contact section.page-intro .info p {
    font-size: 2.1rem;
  }
  main#contact section#contact-display .contact-display-grid {
    gap: 21px;
  }
  main#contact section#contact-display .contact-display-grid .contact-details-content > :nth-child(1) {
    font-size: 3.6rem;
  }
  main#contact section#contact-display .contact-display-grid .contact-details-content h4 {
    font-size: 1.6rem;
  }
  main#contact section#contact-display .contact-display-grid .contact-gallery-clouds {
    width: 240px;
    height: 180px;
  }
  main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img {
    width: 300px;
  }
  main#contact section#contact-display .contact-display-grid .contact-gallery-clouds img.img-current {
    right: -30px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container {
    grid-template-columns: 1fr;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display {
    padding: 21px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
    flex-direction: column-reverse;
    padding: 0 21px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons {
    padding-bottom: 14px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    justify-content: flex-end;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container {
    flex-direction: row;
    align-items: flex-end;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button {
    flex-grow: 2;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time {
    width: auto;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time #points-display,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time #points-display,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container .points-time #points-display {
    white-space: nowrap;
    flex-wrap: nowrap;
    width: auto;
  }
  main#jokes section.hero-puzzle .puzzle-display-interaction {
    padding: 0 21px 21px;
  }
  main#world-game section.hero-puzzle .continents,
  main#world-game section.hero-puzzle .country-info {
    width: auto;
    height: auto;
    min-height: 42px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 7px 0;
  }
  main#world-game section.hero-puzzle .continents label,
  main#world-game section.hero-puzzle .country-info label {
    font-size: 1.7rem;
  }
  main#world-game section.hero-puzzle .puzzle-genre {
    width: 280px;
    padding: 0;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text p#easy-country-text {
    font-size: 2.8rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display {
    gap: 14px;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label,
  main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label {
    font-size: 1.8rem;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction button {
    width: 84%;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback {
    font-size: 2.1rem;
  }
  main#game-42 .main-hero.puzzle .page-intro {
    margin-bottom: 14px;
  }
  main#game-42 .main-hero.puzzle .page-intro .info {
    padding-top: 0;
  }
  main#game-42 .main-hero.puzzle .page-intro .info h2 {
    font-size: 2.1rem;
  }
  main#game-42 .main-hero.puzzle .page-intro .languages {
    padding-right: 0;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container {
    width: 84%;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play {
    width: 180px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play button {
    width: 180px;
    padding: 7px;
    font-size: 1.6rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play .instruct-container {
    width: 180px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play .instruct-container.open-wide {
    width: 84vw;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 {
    padding: 21px 14px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results table#points-42-table-wide th,
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results table#points-42-table-wide td {
    padding: 7px 14px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback {
    width: 100%;
    padding: 0 14px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container {
    padding: 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button {
    padding: 14px 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .text-feedback-container p {
    font-size: 1.8rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container p#table-feedback-header {
    font-size: 1.6rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .points-interaction .table-container {
    width: 100%;
  }
  main#tr3s section.hero-puzzle .card #end-game-display {
    padding: 42px;
  }
  main#tr3s section.hero-puzzle .card #end-game-display p {
    font-size: 1.8rem;
  }
  main#trabalenguas .card-item {
    padding: 21px;
  }
  main#trabalenguas .card audio {
    width: 100%;
    height: 54px;
  }
  .points-interaction .table-container {
    margin-top: 21px;
    width: 84%;
  }
  .points-interaction .table-container table#table-42 {
    width: 84%;
  }
  .points-interaction .table-container table#table-tr3s {
    width: 84%;
  }
  .points-interaction .table-container table#table-tr3s th,
  .points-interaction .table-container table#table-tr3s td {
    padding: 7px 3px;
    font-size: 1.6rem;
    text-align: center;
  }
  .points-interaction #table-container-tr3s.table-container {
    margin-top: 0;
  }
}
@media (max-width: 678px) {
  .grid-col-3 {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-col-2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 42px;
  }
  header#navbar {
    height: 60px;
    justify-content: space-between;
  }
  header#navbar .ludo-logo {
    display: flex;
    align-items: center;
    margin: 0 21px;
  }
  header#navbar .ludo-logo a {
    display: flex;
    align-items: center;
    padding: 0;
  }
  header#navbar .ludo-logo img {
    width: 42px;
    padding: 0;
  }
  header#navbar .ludo-logo-text {
    margin-left: 7px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  header#navbar .ludo-logo-text > :nth-child(1) {
    margin: 0;
    font-size: 1.8rem;
    letter-spacing: 2px;
    line-height: 1.7rem;
  }
  header#navbar .ludo-logo-text > :nth-child(2) {
    font-family: "Monospace", sans-serif;
    font-weight: 200;
    word-spacing: 1px;
    font-size: 1.6rem;
    line-height: 1.7rem;
  }
  header#navbar nav#ham-nav {
    display: block;
  }
  header#navbar nav#ham-nav #hamburger-container {
    display: block;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li ul#learn-hamburger-sub-menu.open {
    height: calc(100vh - 270px);
  }
  header#navbar nav#main-nav,
  header#navbar ul#main-menu {
    display: none;
  }
  main {
    padding: 14px 21px;
    margin: 60px auto 42px auto;
  }
  main .main-hero {
    min-height: calc(100vh - 60px);
  }
  main .main-hero.home h1 {
    font-size: 3.2rem;
  }
  main .main-hero.puzzle {
    min-height: calc(100vh - 74px);
  }
  main section.page-intro {
    margin-bottom: 28px;
  }
  main section.page-intro .info {
    padding: 4px;
  }
  main section.page-intro .info h1 {
    font-size: 3.6rem;
    margin-bottom: 7px;
  }
  main section.page-intro .info h2 {
    margin-bottom: 7px;
  }
  main section.page-intro .info h2,
  main section.page-intro .info p {
    font-size: 2.1rem;
  }
  main section.page-intro .how-to-play {
    flex-direction: row;
    padding: 0;
    padding-top: 21px;
    width: 180px;
  }
  main section.page-intro .how-to-play button {
    font-size: 1.8rem;
    padding: 7px;
    width: 180px;
  }
  main section.page-intro .how-to-play .instruct-container {
    width: 180px;
  }
  main section.page-intro .how-to-play .instruct-container.open-wide {
    width: calc(100vw - 84px);
  }
  main section.page-intro .how-to-play .instruct-container.open-tall {
    height: auto;
  }
  main section.hero-puzzle .puzzle-genre {
    margin: 14px 0;
  }
  main section.hero-puzzle .card {
    padding: 14px;
  }
  main section.hero-puzzle .card .puzzle-display p {
    font-size: 2.1rem;
  }
  main section.gallery-content .card-title h3 {
    font-size: 3.6rem;
  }
  main section.gallery-content .card-content .card-info h4,
  main section.gallery-content .card-content .card-info p {
    font-size: 2.1rem;
  }
  main section.saber-mas.card {
    flex-direction: column !important;
  }
  main section.saber-mas.card img {
    width: 300px;
  }
  main#construction {
    margin: 60px auto 0 auto !important;
    padding: 0 42px !important;
    height: calc(100vh - 60px);
  }
  main#construction section.construction-content :nth-child(1) img {
    width: 300px;
  }
  main#construction section.construction-content .loading {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  main#construction section.construction-content .loading h1 {
    font-size: 4.2rem;
  }
  main#construction section.construction-content .loading .loader {
    margin-bottom: 0;
    margin-top: 1rem;
  }
  main .toggle-fireworks-container {
    width: auto;
  }
  section#home-ludoteca-gallery {
    justify-items: center;
    gap: 63px;
  }
  section#home-ludoteca-gallery .card {
    width: 84%;
    gap: 14px;
  }
  section#home-ludoteca-gallery .card a img {
    width: 300px;
  }
  main#biblioteca #aside-fill {
    min-width: 60px;
  }
  main#biblioteca aside#biblioteca-articles {
    width: 60px;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu {
    display: none;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li {
    width: 100%;
    padding: 7px 0;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a {
    font-size: 1.6rem;
  }
  main#biblioteca section#inject-article-content {
    padding-right: 0;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro {
    margin-left: 0;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro .info h1 {
    font-size: 3.6rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro .info h2 {
    font-size: 1.8rem;
  }
  main#biblioteca section#inject-article-content section.article-comments {
    gap: 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display {
    width: 100%;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display .comments-arrow i {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea#article-comment-submit {
    height: 140px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment p,
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment a {
    font-size: 1.4rem;
  }
  main#memes .memes-container {
    padding: 21px;
  }
  main#memes .memes-container-header h3 {
    font-size: 4.2rem;
  }
  main#contact {
    padding: 14px 42px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid {
    grid-template-columns: 1fr;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-details {
    min-height: 21vh;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-details-content {
    padding: 21px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery {
    padding: 14px 42px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery-clouds {
    height: 21vh;
  }
  #cookie-consent-banner {
    max-height: calc(90vh - 60px);
    top: calc(5vh + 60px);
    width: 84vw;
    left: 8vw;
    flex-direction: column;
    gap: 21px;
    border-radius: 21px;
  }
  #cookie-consent-banner .cookie-info {
    width: 92%;
  }
  #cookie-consent-banner .cookie-buttons {
    width: 92%;
  }
  main#emojis section.hero-puzzle .genre-toggle.buscando-figuras .puzzle-genre,
  main#adivinanzas section.hero-puzzle .genre-toggle.buscando-figuras .puzzle-genre,
  main#buscando-figuras section.hero-puzzle .genre-toggle.buscando-figuras .puzzle-genre {
    width: auto;
    padding: 0 7px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras {
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer {
    width: 84%;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container {
    width: 84%;
  }
  main#emojis section.saber-mas.end-game,
  main#adivinanzas section.saber-mas.end-game,
  main#buscando-figuras section.saber-mas.end-game {
    margin-top: 140px;
  }
  main#jokes section.page-intro .how-to-play {
    margin-left: 21px;
  }
  main#jokes section.hero-puzzle .card-interaction-container button#response {
    width: 180px;
  }
  main#world-game section.hero-puzzle .continents,
  main#world-game section.hero-puzzle .country-info {
    grid-template-columns: repeat(2, 1fr);
  }
  main#world-game section.hero-puzzle .continents label,
  main#world-game section.hero-puzzle .country-info label {
    font-size: 1.6rem;
  }
  main#world-game section.hero-puzzle .puzzle-genre {
    width: 280px;
  }
  main#world-game section.hero-puzzle .card #start-game-display p {
    font-size: 1.8rem;
    text-align: left;
  }
  main#world-game section.hero-puzzle .card #game-display.displayed {
    grid-template-columns: repeat(1, 1fr);
  }
  main#world-game section.hero-puzzle .card #game-display #game-display-country {
    grid-row: 1;
    padding: 0 7px;
  }
  main#world-game section.hero-puzzle .card #game-display #game-display-country p {
    font-size: 2.8rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy,
  main#world-game section.hero-puzzle .card #game-display #genre-hard {
    grid-row: 2;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text,
  main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text {
    padding: 0 7px;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text {
    font-size: 1.8rem;
    padding: 0;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback {
    margin: 0;
    margin-top: 14px;
    grid-row: 3;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #easy-interaction {
    margin-left: 21px;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction {
    justify-content: space-between;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input {
    width: 84%;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction button {
    margin-left: 14px;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #feedback {
    font-size: 1.4rem;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction {
    margin: 14px 0;
    grid-row: 4;
    flex-direction: row;
    justify-content: space-evenly;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction button {
    width: auto;
  }
  main#game-42 .main-hero.puzzle .page-intro .info h2 {
    font-size: 1.8rem;
  }
  main#game-42 .main-hero.puzzle .page-intro .languages {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  main#game-42 .main-hero.puzzle .page-intro .languages button img {
    width: 100px;
  }
  main#game-42 .main-hero.puzzle #game-display section#game-42-buttons .pos-42 {
    padding: 7px;
    font-size: 1.8rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 {
    width: 84%;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 h3 {
    font-size: 1.8rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container {
    width: 100%;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 {
    padding: 14px;
    gap: 14px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button,
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place {
    width: 140px;
    font-size: 2.1rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42.displayed button {
    font-size: 1.6rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results .toggle-fireworks-container {
    justify-self: center;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container {
    gap: 21px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback {
    grid-template-columns: 3fr 2fr;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .hints #hints-left,
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons button {
    padding: 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container p#table-feedback-header {
    font-size: 1.4rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table {
    width: 84%;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .points-interaction .table-container {
    padding: 7px 0;
    width: 100%;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display {
    padding: 0 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container {
    width: 120px;
    border-radius: 14px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container img,
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay {
    border-radius: 14px;
  }
  main#tr3s section.hero-puzzle .card #end-game-display {
    padding: 21px;
  }
  main#tr3s section.hero-puzzle .card #end-game-display .points-interaction .table-container#end-game-table-container {
    width: 100%;
  }
  main#malabares .malabares-content-card {
    padding-top: 42px;
  }
  main#malabares .malabares-content-card-videos {
    grid-template-columns: 1fr;
    row-gap: 42px;
  }
  .points-interaction .table-container table th,
  .points-interaction .table-container table td {
    font-size: 1.6rem;
  }
  .points-interaction .table-container#table-42-container {
    width: 100%;
  }
  .points-interaction .table-container#table-42-container table#table-42 {
    width: 100%;
  }
  .points-interaction .table-container table#table-tr3s {
    width: 100%;
  }
  .points-interaction .table-container table#table-tr3s th,
  .points-interaction .table-container table#table-tr3s td {
    font-size: 1.4rem;
  }
  footer#footer .footer-social .fa-4x {
    font-size: 3em;
  }
  footer#footer .footer-info .ludo-michael > :nth-child(1) {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
  footer#footer .footer-info .ludo-michael > :nth-child(3) {
    font-size: 16px;
  }
  footer#footer .footer-info p {
    font-size: 16px;
  }
  footer#footer .footer-info a {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
@media (max-width: 450px) {
  .card {
    padding: 21px;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li a,
  header#navbar nav#ham-nav ul#hamburger-menu li button {
    font-size: 1.6rem;
    padding: 7px 0 7px 21px;
    width: 70%;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li ul#learn-hamburger-sub-menu li a {
    width: 100%;
    padding: 7px 0 7px 14px;
  }
  main .main-hero h1 {
    font-size: 3rem;
  }
  main .main-hero h2 {
    font-size: 1.8rem;
    text-align: justify;
  }
  main .main-hero img {
    width: 240px;
  }
  main section.page-intro .how-to-play {
    padding-top: 14px;
    width: 180px;
  }
  main section.page-intro .how-to-play button {
    font-size: 1.4rem;
  }
  main section.page-intro .how-to-play .instruct-container {
    top: 14px;
  }
  main section.page-intro .how-to-play .instruct-container.open-wide {
    width: calc(100vw - 63px);
  }
  main section.hero-puzzle .languages img {
    width: 140px;
  }
  main section.hero-puzzle .puzzle-genre {
    width: auto;
    justify-content: flex-start;
    gap: 42px;
  }
  main section.hero-puzzle .card .puzzle-display {
    padding: 0;
  }
  main section.hero-puzzle .card .puzzle-display p {
    font-size: 1.8rem;
  }
  main section.gallery-content .card {
    padding: 0;
    gap: 14px;
  }
  main section.gallery-content .card-title {
    padding: 7px 21px;
  }
  main section.gallery-content .card-content {
    padding: 0 14px;
    padding-bottom: 14px;
  }
  main section.gallery-content .card-content .media-play {
    gap: 14px;
  }
  main section.text-page,
  main .text-page {
    padding: 14px;
  }
  main section.text-page h2,
  main .text-page h2 {
    font-size: 2.8rem;
  }
  main section.text-page h3,
  main .text-page h3 {
    font-size: 2.1rem;
  }
  main section.text-page h4,
  main section.text-page p,
  main section.text-page a,
  main .text-page h4,
  main .text-page p,
  main .text-page a {
    font-size: 1.8rem;
  }
  main section.saber-mas.card img {
    width: 240px;
  }
  main section.saber-mas.card .saber-mas-text h5 {
    font-size: 1.8rem;
  }
  main#construction {
    padding: 0 21px !important;
  }
  main#construction section.construction-content :nth-child(1) img {
    width: 240px;
  }
  main#construction section.construction-content .loading h1 {
    font-size: 2.8rem;
    text-align: center;
  }
  main#construction section.construction-content .loading .loader-element {
    border: 4px solid white;
  }
  @keyframes preloader {
    100% {
      border: 4px solid rgb(235, 230, 69);
    }
    100% {
      transform: scale(2);
    }
  }
  main .toggle-fireworks-container {
    padding: 0;
  }
  main .toggle-fireworks-container button {
    width: 36px !important;
    height: 18px !important;
  }
  main .toggle-fireworks-container button #toggle-fireworks-switch {
    height: 18px !important;
    width: 18px !important;
  }
  main#world-game .toggle-fireworks-container {
    flex-direction: column;
    gap: 0;
  }
  section#home-ludoteca-gallery .card {
    width: 100%;
    padding: 0;
  }
  section#home-ludoteca-gallery .card a img {
    width: 240px;
  }
  main#biblioteca #aside-fill {
    min-width: 42px;
  }
  main#biblioteca aside#biblioteca-articles {
    width: 42px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container {
    width: 42px;
    height: 42px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines {
    top: 10.5px;
    left: 10.5px;
    width: 21px;
    height: 21px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-top {
    top: 1.5px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-mid {
    top: 9px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-bottom {
    bottom: 1.5px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-top {
    top: 9.5px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-bottom {
    bottom: 9.5px;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a {
    font-size: 1.4rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro {
    padding: 14px 0;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro .info h1 {
    font-size: 2.8rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-intro .info h2 {
    font-size: 1.6rem;
  }
  main#biblioteca section#inject-article-content article.article-display .card {
    padding: 14px;
  }
  main#biblioteca section#inject-article-content article.article-display .card h3 {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-content {
    gap: 14px !important;
  }
  main#biblioteca section#inject-article-content article.article-display .article-references ol li {
    font-size: 1.2rem;
  }
  main#biblioteca section#inject-article-content article.article-display .article-references ol li a {
    font-size: 1.2rem;
  }
  main#biblioteca section#inject-article-content section.article-comments {
    gap: 7px;
    padding: 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display {
    width: 100%;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display .comments-arrow i {
    font-size: 2.1rem;
  }
  main#biblioteca section#inject-article-content section.article-comments #posted-comments-container #posted-comments-gallery #comment-gallery-display #post-comment-container .post-comment {
    padding: 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate {
    padding: 0 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate h5 {
    font-size: 1.6rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit {
    padding: 0;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment .intro-rate .rate-stars-submit .star-to-rate {
    font-size: 1.8rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #comment-submit-error {
    font-size: 1.2rem;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment {
    gap: 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit {
    flex-direction: column;
    gap: 14px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit input {
    width: 100%;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment #user-submit button {
    align-items: flex-start;
    width: 42%;
    padding: 7px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment textarea#article-comment-submit {
    height: 140px;
  }
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment p,
  main#biblioteca section#inject-article-content section.article-comments .leave-comment #submit-comment a {
    font-size: 1.4rem;
  }
  main#privacy-page-content section#cookies button {
    font-size: 16px;
  }
  main#memes .memes-container-header h3 {
    font-size: 3.6rem;
  }
  main#contact {
    padding: 14px 21px;
  }
  main#contact section.page-intro {
    margin-bottom: 21px;
  }
  main#contact section.page-intro .info h2,
  main#contact section.page-intro .info p {
    font-size: 1.8rem;
  }
  main#contact section#contact-display .contact-display-grid .contact-details-content {
    padding-left: 14px;
  }
  main#contact section#contact-display .contact-display-grid .contact-details-content > :nth-child(2), main#contact section#contact-display .contact-display-grid .contact-details-content > :nth-child(3) {
    font-size: 1.6rem;
  }
  main#contact section#contact-display .contact-display-grid .contact-gallery {
    padding: 14px;
  }
  main#contact section#contact-display .contact-display-grid .contact-gallery-clouds {
    height: 42vw;
  }
  #cookie-consent-banner {
    width: 90vw;
    left: 5vw;
    padding: 14px;
  }
  #cookie-consent-banner .cookie-info p,
  #cookie-consent-banner .cookie-buttons {
    font-size: 1.6rem;
  }
  main#emojis section.hero-puzzle .genre-toggle,
  main#adivinanzas section.hero-puzzle .genre-toggle,
  main#buscando-figuras section.hero-puzzle .genre-toggle {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    margin-bottom: 7px;
  }
  main#emojis section.hero-puzzle .genre-toggle .puzzle-genre,
  main#adivinanzas section.hero-puzzle .genre-toggle .puzzle-genre,
  main#buscando-figuras section.hero-puzzle .genre-toggle .puzzle-genre {
    margin-bottom: 7px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display {
    padding: 0 14px 21px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-text {
    min-height: 110px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text {
    font-size: 3.6rem;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text-riddles,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text-riddles,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-text p#puzzle-text-riddles {
    font-size: 2.1rem;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint,
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#puzzle-hint,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-text .hint-feedback p#feedback {
    font-size: 1.8rem;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display input,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display input,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display input {
    width: 100%;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
    padding: 0 14px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons button,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons button,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons button {
    font-size: 1.6rem;
    height: auto;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer {
    width: 100%;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container {
    width: 100%;
  }
  main#emojis section.saber-mas.end-game,
  main#adivinanzas section.saber-mas.end-game,
  main#buscando-figuras section.saber-mas.end-game {
    margin-top: 210px;
  }
  main#jokes section.page-intro .how-to-play {
    margin-left: 14px;
    width: 180px;
  }
  main#jokes section.hero-puzzle .card-interaction {
    justify-content: space-between;
  }
  main#jokes section.hero-puzzle .card-interaction-container button {
    font-size: 1.8rem;
  }
  main#jokes section.hero-puzzle .card-interaction-container button#response {
    width: 140px;
  }
  main#world-game section.hero-puzzle .puzzle-genre {
    margin: 21px 0 7px;
    gap: 0;
  }
  main#world-game section.hero-puzzle .puzzle-genre label {
    font-size: 1.7rem;
  }
  main#world-game section.hero-puzzle .puzzle-genre label:nth-child(1) {
    margin-left: 14px;
  }
  main#world-game section.hero-puzzle .continents,
  main#world-game section.hero-puzzle .country-info {
    margin: 7px 0;
  }
  main#world-game section.hero-puzzle .continents label,
  main#world-game section.hero-puzzle .country-info label {
    margin-left: 14px;
  }
  main#world-game section.hero-puzzle .country-info {
    margin-bottom: 14px;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text {
    padding: 0;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text p#easy-question-head {
    font-size: 1.8rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display,
  main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display {
    padding: 14px 0 0 0;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p#hard-question-head {
    font-size: 1.8rem;
    text-align: left;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p#hard-question-head img {
    margin: 14px auto 0 auto;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #easy-interaction {
    margin-left: 0;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input,
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction button {
    padding: 7px !important;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input {
    font-size: 1.6rem;
    width: 100%;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback {
    font-size: 1.6rem;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction {
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction button {
    padding: 7px 14px;
  }
  main#game-42 .main-hero.puzzle .page-intro .info h2 {
    font-size: 1.6rem;
  }
  main#game-42 .main-hero.puzzle #game-display {
    grid-template-columns: 2fr 3fr;
    gap: 14px;
  }
  main#game-42 .main-hero.puzzle #game-display section#game-42-buttons {
    padding: 7px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 {
    width: 100%;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container h3 {
    font-size: 1.6rem;
    text-align: center;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play {
    width: 140px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play button {
    width: 140px;
    font-size: 1.4rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play .instruct-container {
    width: 140px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container .how-to-play .instruct-container p {
    font-size: 1.4rem;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 {
    padding: 7px;
    border-radius: 14px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button,
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place {
    width: 100px;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results {
    width: 100%;
  }
  main#game-42 .main-hero.puzzle #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42 p {
    font-size: 1.4rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback {
    grid-template-columns: 1fr;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container {
    order: 2;
    padding: 0 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .hints #hints-left {
    width: 84%;
    padding: 0;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .no-tr3s, main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .puzzle-buttons .hints {
    align-items: center;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container p#table-feedback-header {
    font-size: 1.4rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table {
    width: 84%;
    border-spacing: 3px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table th, main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .buttons-points-feedback .buttons-feedback-container .feedback-container .table-feedback-container table td {
    font-size: 1.2rem;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display {
    gap: 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container {
    width: 100px;
    border-radius: 14px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay, main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container img {
    border-radius: 14px;
  }
  main#malabares .malabares-content-card {
    padding: 14px;
    padding-top: 21px;
  }
  main#malabares .malabares-content-card-videos img {
    box-shadow: 0 0 14px -3px rgb(0, 9, 87);
  }
  main#malabares .malabares-content-card-info p {
    font-size: 1.8rem;
  }
  main#trabalenguas .grid-col-2 .card .trabalengua-text h3 {
    font-size: 2.1rem;
    font-weight: 500;
  }
  main#trabalenguas .grid-col-2 .card audio {
    height: 42px;
  }
  .points-interaction .table-container {
    width: 100%;
  }
  .points-interaction .table-container table th,
  .points-interaction .table-container table td {
    font-size: 1.4rem;
  }
  .points-interaction .table-container table#points-42-table-tall {
    border-spacing: 3px;
    width: 100%;
  }
  .points-interaction .table-container table#points-42-table-tall tr {
    width: 100%;
  }
  .points-interaction .table-container table#points-42-table-tall th,
  .points-interaction .table-container table#points-42-table-tall td {
    width: 50%;
    padding: 7px;
    font-size: 1.2rem;
  }
  .points-interaction .table-container#table-container-tr3s {
    padding: 0;
  }
  .points-interaction .table-container#table-container-tr3s table {
    width: 63%;
  }
  .points-interaction .table-container#table-container-tr3s table th,
  .points-interaction .table-container#table-container-tr3s table td {
    padding: 3px;
    font-size: 1.2rem;
  }
  .points-interaction #no-best-points-42 {
    position: relative;
    top: -21px;
    width: 100% !important;
  }
  .points-interaction #no-best-points-42 p#no-best-points-text {
    font-size: 1.2rem;
  }
  .points-interaction #no-best-points-42 .no-best-points-buttons {
    flex-direction: column;
    gap: 14px;
  }
  .points-interaction #no-best-points-42 .no-best-points-buttons button {
    padding: 7px;
    font-size: 1.2rem;
  }
  footer#footer .footer-info .ludo-michael {
    display: flex;
    flex-direction: column;
  }
  footer#footer .footer-info .ludo-michael span.pipe {
    display: none;
  }
}
@media (max-width: 376px) {
  header#navbar nav#ham-nav ul#hamburger-menu li a,
  header#navbar nav#ham-nav ul#hamburger-menu li button {
    padding: 7px 0 7px 14px;
    font-size: 1.4rem;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li a i,
  header#navbar nav#ham-nav ul#hamburger-menu li button i {
    font-size: 1rem;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li ul#learn-hamburger-sub-menu {
    left: 63%;
    padding-top: 0;
  }
  header#navbar nav#ham-nav ul#hamburger-menu li ul#learn-hamburger-sub-menu li a {
    padding: 7px 0 7px 7px;
  }
  main {
    padding: 14px;
  }
  main .main-hero h1 {
    font-size: 2.4rem;
  }
  main .main-hero h2 {
    font-size: 1.6rem;
  }
  main section.page-intro .info h1 {
    font-size: 2.8rem;
  }
  main section.page-intro .info h2,
  main section.page-intro .info p,
  main section.page-intro .info a {
    font-size: 1.8rem;
  }
  main section.page-intro .how-to-play .instruct-container {
    padding: 7px;
  }
  main section.page-intro .how-to-play .instruct-container p {
    font-size: 1.4rem;
  }
  main section.hero-puzzle .languages {
    gap: 0;
  }
  main section.hero-puzzle .languages img {
    width: 120px;
  }
  main section.hero-puzzle .puzzle-genre {
    padding: 0 7px;
    justify-content: space-evenly;
  }
  main section.gallery-content .card-title h3 {
    font-size: 2.8rem;
  }
  main section.gallery-content .card-content .card-info h4,
  main section.gallery-content .card-content .card-info p {
    font-size: 1.8rem;
  }
  main section.text-page p,
  main section.text-page a {
    font-size: 1.6rem;
  }
  main section.text-page .inline-small-text {
    font-size: 1.2rem;
  }
  main#construction section.construction-content .loading {
    flex-direction: column;
    align-items: center;
  }
  main#construction section.construction-content .loading h1 {
    font-size: 2.8rem;
  }
  main#construction section.construction-content .loading .loader .loader-element {
    border: 4px solid white;
  }
  @keyframes preloader {
    100% {
      border: 4px solid rgb(235, 230, 69);
      transform: scale(2);
    }
  }
  main section.saber-mas.card {
    padding: 14px;
  }
  main#biblioteca #aside-fill {
    min-width: 28px;
  }
  main#biblioteca aside#biblioteca-articles {
    width: 28px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container {
    width: 28px;
    height: 28px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines {
    top: 7px;
    left: 7px;
    width: 14px;
    height: 14px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-top {
    top: 0px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-mid {
    top: 5.5px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container #articles-hamburger-lines-bottom {
    bottom: 0px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-top {
    top: 6px;
  }
  main#biblioteca aside#biblioteca-articles nav #articles-hamburger-container.open #articles-hamburger-lines-bottom {
    bottom: 6px;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li {
    padding-top: 3px;
  }
  main#biblioteca aside#biblioteca-articles nav #bib-articles-menu li a {
    padding-bottom: 3px;
  }
  main#biblioteca section#inject-article-content {
    padding: 0;
    padding-left: 7px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-details-content {
    padding: 14px 7px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-details-content > :nth-child(1) {
    margin-bottom: 7px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-details-content > :nth-child(2), main#contact .main-hero section#contact-display .contact-display-grid .contact-details-content > :nth-child(3) {
    font-size: 1.4rem;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery {
    padding: 14px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery-clouds {
    height: 120px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery-clouds img {
    width: 240px;
  }
  main#contact .main-hero section#contact-display .contact-display-grid .contact-gallery-clouds img.img-current {
    right: 0;
  }
  #cookie-consent-banner {
    width: 96vw;
    left: 2vw;
    padding: 7px;
  }
  #cookie-consent-banner .cookie-buttons {
    font-size: 1.4rem;
  }
  #cookie-consent-banner .cookie-buttons label .cookie-checkbox {
    margin-right: 7px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display {
    padding: 0 7px 21px;
    width: 100%;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display input,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display input,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display input {
    padding: 7px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction {
    padding: 0 7px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .puzzle-buttons-container button {
    font-size: 1.6rem;
    padding: 9px;
    height: auto;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer h4.question-text,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer h4.question-text,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer h4.question-text {
    font-size: 1.8rem;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer .submit-feedback input,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer .submit-feedback input,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction .question-answer .submit-feedback input {
    font-size: 1.6rem;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras {
    padding: 14px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .question-answer {
    width: 100%;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container {
    width: 100%;
    gap: 21px;
  }
  main#emojis section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button,
  main#adivinanzas section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button,
  main#buscando-figuras section.hero-puzzle .card .puzzle-display-container .puzzle-display-interaction.buscando-figuras .puzzle-buttons-info-container button {
    font-size: 1.6rem;
    padding: 9px;
  }
  main#emojis section.hero-puzzle .card #end-puzzles,
  main#adivinanzas section.hero-puzzle .card #end-puzzles,
  main#buscando-figuras section.hero-puzzle .card #end-puzzles {
    font-size: 1.8rem;
    padding: 14px;
  }
  main#emojis section.saber-mas.end-game,
  main#adivinanzas section.saber-mas.end-game,
  main#buscando-figuras section.saber-mas.end-game {
    margin-top: calc(210px + 20vw);
  }
  main#jokes section.hero-puzzle .card-interaction {
    justify-content: space-between;
  }
  main#jokes section.hero-puzzle .card-interaction-container button {
    height: 46px;
    font-size: 1.6rem;
  }
  main#jokes section.hero-puzzle .card-interaction-container button#response {
    width: 140px;
  }
  main#world-game section.hero-puzzle .puzzle-genre {
    width: 210px;
  }
  main#world-game section.hero-puzzle .puzzle-genre label:nth-child(1) {
    margin-left: 7px;
  }
  main#world-game section.hero-puzzle .continents label,
  main#world-game section.hero-puzzle .country-info label {
    margin-left: 7px;
    font-size: 1.5rem;
  }
  main#world-game section.hero-puzzle .card #game-display #game-display-country {
    padding: 0;
  }
  main#world-game section.hero-puzzle .card #game-display #game-display-country p {
    font-size: 2.1rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy .game-display-text p#easy-question-head {
    font-size: 1.6rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-easy #multiple-choice-display label,
  main#world-game section.hero-puzzle .card #game-display #genre-easy #greater-than-less-than-display label {
    font-size: 1.4rem;
  }
  main#world-game section.hero-puzzle .card #game-display #genre-hard .game-display-text p#hard-question-head {
    font-size: 1.6rem;
  }
  main#world-game section.hero-puzzle .card #game-display .game-display-interaction button {
    padding: 7px;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction input {
    padding: 3px;
    width: 100%;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback #hard-interaction button {
    display: none;
  }
  main#world-game section.hero-puzzle .card #game-display #submit-feedback p#feedback {
    font-size: 1.4rem;
  }
  main#game-42 #game-display section#game-42-buttons .pos-42 {
    font-size: 1.4rem;
  }
  main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container button,
  main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-play-container #number-to-place {
    font-size: 1.6rem;
  }
  main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results {
    width: 100%;
  }
  main#game-42 #game-display section#interaction-42 .interaction-container #showcase-42 .game-42-results #end-game-42.displayed button {
    font-size: 1.6rem;
    padding: 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container {
    width: 70px;
    border-radius: 7px;
  }
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container .card-overlay,
  main#tr3s section.hero-puzzle .card .puzzle-display-container .puzzle-display .game-card-container img {
    border-radius: 7px;
  }
  main#trabalenguas .grid-col-2 .card .trabalengua-text h3 {
    font-size: 1.8rem;
  }
  .points-interaction .table-container table {
    border-spacing: 4px;
  }
  .points-interaction .table-container table th#prev-points-container button {
    font-size: 1.2rem;
  }
  .points-interaction .table-container table th,
  .points-interaction .table-container table td,
  .points-interaction .table-container table tr {
    font-size: 1.2rem;
  }
  .points-interaction .table-container#table-container-tr3s table {
    width: 84%;
  }
  .points-interaction .no-best-points {
    padding: 7px;
  }
  .points-interaction .no-best-points-buttons {
    justify-content: space-between;
  }
}

/*# sourceMappingURL=main.css.map */