/*
	Typography mixin
 */
/* CSS Document */
#gg_container {
  background-color: #afdff9;
  font-family: twinkl, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.foreground-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 103;
  position: absolute;
  pointer-events: none; }

:focus {
  outline: none; }

.border-radius {
  border-radius: 8px; }

.text-button.play {
  width: 40%;
  line-height: 1.15;
  padding: 2.5% 1.5% 2.5% 1.5%;
  font-size: 2vw;
  border: none; }

#lets-go-button {
  width: 20%;
  font-size: 3vw;
  height: 12%;
  padding: 0.6%; }

.fit-me-button {
  height: 100%;
  width: 80%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.title-text {
  font-size: 14vw;
  width: 50%;
  left: 25%;
  height: 40%;
  margin-top: 5%;
  top: 0 !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

#titlePage {
  width: 100%;
  height: 100%; }

#subContainer {
  position: absolute;
  height: auto;
  top: 55%;
  width: 100%;
  color: white;
  padding: 1%;
  font-weight: 600;
  font-size: 3vw;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.jodal .jodal-title {
  font-size: 5vw;
  margin: 0 auto; }

.jodal .jodal-text {
  font-size: 2.6vw; }

.jodal .answer-text {
  text-align: center;
  z-index: 100;
  width: 90%;
  height: 15%;
  margin: 0 auto;
  margin-bottom: 5%; }

.jodal .jodal-sub-text {
  font-size: 2.6vw; }

#mainPage {
  width: 93.5%;
  height: 100%; }

.panel {
  height: 100%;
  width: 100%;
  padding: 2%; }

#keyboard {
  height: 100%;
  width: 100%;
  margin: auto;
  background-color: white;
  border-radius: 12px; }

.keyboard-cont {
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100%;
  height: 45%; }

.top-area {
  height: 50%;
  margin-bottom: 2%;
  margin-bottom: 2%;
  width: 100%; }

.attempts-cont {
  background-color: white;
  border-radius: 12px;
  padding: .5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .attempts-cont .tile-row {
    height: auto;
    width: auto;
    margin: 0.5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .attempts-cont .tile-row .tile-piece {
      height: 100%;
      background-color: dimgray;
      width: 10%;
      margin: 0 .5%;
      padding: 1%;
      font-weight: bold;
      color: white; }
      .attempts-cont .tile-row .tile-piece .inner {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }

.tile-wrap {
  width: 90%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.tile-piece-flip {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: flipCard;
          animation-name: flipCard; }

.tile-piece-active {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  border: 2px solid gainsboro; }

.row-active {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  border: 2px solid gainsboro; }

@-webkit-keyframes flipCard {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); }
  50% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); } }

@keyframes flipCard {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); }
  50% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg); }
  100% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg); } }

.win-or-lose-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 93.5%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.95); }

.round-answer {
  font-weight: bold;
  font-size: larger; }

.image-cont {
  padding: 2%;
  background-color: white;
  border-radius: 12px; }

.image-inner {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; }

.landscape-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .landscape-layout .image-cont {
    min-width: 40%;
    width: 40%;
    height: 100%;
    margin: 0 1%; }
  .landscape-layout .attempts-cont {
    min-width: 60%;
    height: 100%;
    width: 100%;
    overflow-y: auto; }

.portrait-layout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }
  .portrait-layout .image-cont {
    min-height: 70%;
    height: 70%;
    width: 100%;
    margin: 1% 0; }
  .portrait-layout .attempts-cont {
    height: 80%;
    min-height: 30%;
    width: 100%; }

.multi-button {
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  margin: 0 auto; }

.input {
  z-index: 10;
  position: relative;
  width: 80%;
  height: 20%;
  margin: auto;
  text-align: center;
  border-radius: 12px;
  font-size: x-large; }

#play-again {
  margin: 0 auto; }

:host {
  height: var(--keyboard-height); }

#keyboard {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 2%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

#keyboard .row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 25%;
  max-height: 25%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin: 0 auto 8px;
  -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
  /* https://stackoverflow.com/questions/46167604/ios-html-disable-double-tap-to-zoom */ }

#keyboard .row .key-item {
  font-family: inherit;
  font-weight: bold;
  border: 0;
  padding: 1%;
  margin: 0 6px 0 0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: gainsboro;
  height: 100%;
  color: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  position: relative; }
  #keyboard .row .key-item .inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    text-align: center; }

#keyboard .row div:focus {
  outline: none; }

#keyboard .row div.fade {
  -webkit-transition: background-color 0.1s ease, color 0.1s ease;
  -o-transition: background-color 0.1s ease, color 0.1s ease;
  transition: background-color 0.1s ease, color 0.1s ease; }

#keyboard .row div:last-of-type {
  margin: 0; }

.half {
  -webkit-box-flex: 0.5;
      -ms-flex: 0.5;
          flex: 0.5; }

.one {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.one-and-a-half {
  -webkit-box-flex: 1.5;
      -ms-flex: 1.5;
          flex: 1.5;
  font-size: 12px; }

.two {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2; }

#instructionsPanel .allInstructions {
  height: 55% !important;
  width: 80% !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

[data-state='correct'] {
  color: white !important;
  background-color: #2399f9 !important; }

[data-state='present'] {
  color: white !important;
  background-color: #d23888 !important; }

.key-correct {
  background-color: #2399f9 !important;
  color: white;
  color: white !important; }

.key-present {
  background-color: #d23888 !important;
  color: white !important; }

.key-absent {
  background-color: dimgrey !important;
  color: white !important; }

[data-attr=" "] {
  /* Styles */
  background-color: white !important; }

.shake {
  -webkit-animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0); } }

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate3d(-1px, 0, 0);
            transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    -webkit-transform: translate3d(2px, 0, 0);
            transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    -webkit-transform: translate3d(-4px, 0, 0);
            transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    -webkit-transform: translate3d(4px, 0, 0);
            transform: translate3d(4px, 0, 0); } }

.pulsate {
  -webkit-animation-name: pulsate;
          animation-name: pulsate;
  -webkit-animation-duration: 0.8s !important;
          animation-duration: 0.8s !important; }

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

@keyframes pulsate {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1); } }

.end-audio {
  position: absolute;
  width: 10%;
  right: 5%; }

.round-extra {
  width: 60% !important; }

.round-answer {
  width: 60% !important; }