* {
      box-sizing: border-box;
  }

  .hide{
      display: none !important;
  }

  .checkbox{
      height: 24px;
      width: 24px;
      margin: 0;
  }

  #questionArea, #roundResultsArea{
    font-size: 26px;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
  }

  #nextCountdown{
    font-size: 42px;
    font-weight: 600;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
  }

  #infoMessage{
    font-size: 26px;
    padding-top: 50px;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
  }
  
  body {
      background-color: #fef2c2;
      background-image: url('/static/img/banana_background3.png');
      background-repeat: repeat;
      text-align: center;
      max-height: 100%;
  }

  .bt-label{
      font-size: 26px;
  }

  .checkbox-label{
      font-size: 22px;
  }

  body, button, input {
    font-family: "Fredoka", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "wdth" 90;
  }

  button:hover:enabled{
    cursor: pointer;
    color:#7d6300 !important;
    border-color: #7d6300;
  }

  button:hover:disabled{
    cursor: not-allowed;
    color: #ffaaaa;
  }

  
  a {
      text-decoration: none;
      font-weight: bold;
      color: #333;
  }
  
  h1, h2, h3 {
      color: #FFF;
      text-shadow: 1px 1px rgba(0,0,0,0.5);
  }

  h1 {
    font-family: "Titan One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    text-shadow: 2px 2px rgba(0,0,0,0.5);
  }
  
  h2.sectionHead {
      margin: 10px 0 0 0;
      font-size: 20px;
      color: #FFF;
  }

  .subtitle {
    font-size: 1.17em;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  h2{
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 30px;
  }

  h3{
    margin-block-start: 0;
    margin-block-end: 0;
    font-size: 26px;
  }
  
  #container {
      display: flex;
      margin: auto;
      width: 950px;
  }
  
  .upperBox {
      width: 520px;
      padding: 10px;
      border-radius: 10px;
      margin: 0 auto 1em auto;
      color: #FFF;
  }
  
  .warning {
      background-color: #A30006;
  }
  
  #infoBox {
      background-color: #fef2c2;
  }
  
  #infoBox a {
      color: #FFF;
      text-shadow: 1px 1px #34495e;
  }
  
  #infoBox a#hideInfoBox {
      color: #333;
      text-shadow: 1px 1px #FFF;
  }
  
  .sidebox {
      background-color: #524100;
  }
  
  #languageSelection {
      width: 520px;
      margin: 0 auto 1em auto;
      text-align: right;
  }
  
  #languageSelection img {
      cursor: pointer;
  }
  
  #languageSelection img.selected {
      border: 1px solid #FFF;
  }
  
  /*
   * Left-hand side
   */
  
  .menu {
      width: 250px;
      padding-top: 2em;
      position: relative;
  }
  
  .menu h3 {
      margin: 10px 0 0 0;
      padding-bottom: 5px;
      text-shadow: none;
      font-size: 100%;
  }
  
  .menu h3:first-of-type {
      margin: 0;
  }
  
  #leftMenu {
      float: left;
      color: #FFF;
  }
  
  #leftMenu .sidebox {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      overflow: hidden;
  }
  
  #leftMenu h1, #rightMenu h1 {
      margin: 0 0 0 0;
  }
  
  .userChoice a {
      display: block;
      padding: 5px;
      color: rgba(255, 255, 255, 0.54);
  }
  
  .userChoice a.selected {
      background-color: #FFF;
      color: #34495E;
  }
  
  .userChoice a.pending {
      background-color: #67798c;
      text-shadow: 1px 1px rgba(0,0,0,0.5);
      color: #FFFFFF;
  }
  
  .userChoice.toggleChoice {
      display: flex;
  }
  
  .userChoice.toggleChoice a {
      flex: 1 0 auto;
  }
  
  #genSelectContainer.userChoice a.selected, #genSelectContainer.userChoice a.pending {
      background-image: url(../images/icons/tick.svg);
      background-repeat: no-repeat;
      background-position: 100% 50%;
      background-size: 18px;
  }
  
  /*
   * Right-hand side
   */
  
  #rightMenu {
      float: right;
      color: #FFF;
  }
  
  #rightMenu .sidebox {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      padding: 5px;
      margin-bottom: 5px;
  }
  
  #infoBoxRight {
      margin-top: 20px;
      text-shadow: 1px 1px rgba(0,0,0,0.5);
      background-color: #8e44ad;
  }
  
  
  /*
   * The main event!
   */
  
  #main {
      width: 520px;
      min-height: 580px;
      float: left;
      color: #FFF;
  }

  .unitChoices{
    font-size: 26px;
  }
  
  #mainGame {
      background-color: #fdca00;
      min-height: 580px;
      padding: 10px;
      border-radius: 10px;
  }
  
  #canvasContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 350px;
  }
  
  #mainGame a#giveAnswer, span#nextCountdown a {
      color: #FFF;
  }
  
  #mainGame a#giveAnswer {
      display: block;
  }
  
  #mainGame a#giveAnswer {
      text-shadow: 1px 1px #c0392b;
  }
  
  input {
      margin: 1em 0 5px;
      height: 50px;
      font-size: 175%;
      border: 0;
      border-radius: 10px;
      text-align: center;
      text-transform: capitalize;
      outline: none;
  }

  .menubt {
    margin: 1em 0 5px;
    height: 50px;
    font-size: 175%;
    border-radius: 10px;
    text-align: center;
    text-transform: capitalize;
    outline: none;
}

.divimgbt{
    width: 160px;
    display: inline-block;
    vertical-align: top;
}
.imgbt {
    margin: 10px;
    height: 150px;
    width: 150px;
    border-radius: 10px;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Cantora One', sans-serif;
    outline: none;
}

.imgbt:disabled img{
    filter: grayscale(100%);
}

button:enabled{
    color: #151100;
    border-color: #151100;
}

.choosemenubt {
    margin: 5px;
    height: 50px;
    font-size: 175%;
    border-radius: 10px;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Cantora One', sans-serif;
    outline: none;
}
  
  input.correct {
      background-color: #27ae60;
      color: #FFF;
  }
  
  #alsoKnownAs h2 {
      margin: 0;
      font-size: 100%;
  }
  
  #alsoKnownAs ul  {
      list-style: none;
      padding: 0;
      margin: 0 0 0px 0;
  }
  
  #alsoKnownAs ul li {
      display: inline-block;
      background-color: rgba(255, 255, 255, 0.25);
      padding: 5px;
      text-transform: capitalize;
  }
  
  #infoMessage {
      font-size: 140%;
  }
  
  #infoMessage a {
      text-shadow: 1px 1px #FFF;
  }
  
  .soon{
    position: fixed;
  }

  #infoBoxMain {
      padding: 5px;
      margin-top: 20px;
      border-radius: 10px;
      text-shadow: 1px 1px rgba(0,0,0,0.5);
      background-color: #8e44ad;
  }
  
  #footer {
      color: #6b3e26;
      font-size: 75%;
      margin: 1em;
      text-align: center;
  }
  
  #footer a {
      color: #6b3e26;
  }
  
  @media (min-width: 461px) {
      .mobile {
          display: none;
      }
  }
  
  /* Need better mobile detection */
  @media (max-width: 460px) {
      .desktop {
          display: none !important;
      }
  
      html, body, #container, #main {
          margin: 0;
          padding: 0;
          height: 100%;
      }

      h1{
        padding-top: 10px;
      }
      .subtitle{
        margin-top: -10px;
      }
  
      #container, .upperBox, #main, #footer, #languageSelection {
          width: 100%;
          margin: 0;
      }
  
      body {
          background-color: #fdca00;
      }
  
      .keyboard-open #mobilerightMenu {
          display: none;
      }
  
      #infoBox {
          display: none;
      }
  
      #main, #canvasContainer {
          min-height: 0;
      }
  
      canvas {
          margin-top: 0 !important;
      }
  
      #mainGame {
          display: flex;
          flex-direction: column;
          height: 100%;
          min-height: 0;
          padding: 0;
          border-radius: 0;
      }
  
      #playArea {
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          min-height: 0;
      }
  
      #canvasContainer {
          flex-grow: 1;
          padding: 10px;
      }
  
      #answerArea {
          z-index: 10;
          flex-shrink: 0;
          width: 100%;
          padding: 10px;
          background-color: rgba(0, 0, 0, 0.1);
      }
  
      input {
          margin: 0 0 5px 0;
          width: 100%;
      }
  
      #languageSelection, #footer {
          display: none;
      }
  
      .menu {
          position: fixed;
          top: 0;
          height: 100%;
          width: 50%;
          padding: 10px;
          background-color: rgba(0,0,0,0.8);
          box-shadow: 0 0 2px 2px rgba(0,0,0,0.5);
          transition: all 0.2s;
          overflow-y: auto;
          z-index: 100;
      }
  
      .menu#leftMenu { left: -60%; }
      .menu#leftMenu.shown {
          left: 0;
      }
  
      .menu#rightMenu { right: -60%; }
      .menu#rightMenu.shown { right: 0; }
  
      .menu h1 {
          font-size: 150%;
      }
  
      #shadowImage {
          height: auto;
          max-height: 100%;
          max-width: 90%;
          min-height: 0;
          object-fit: contain;
      }
  
      .close-button {
          position: absolute;
          top: 0;
          padding: 10px;
          color: #FFF;
      }
  
      .menu#leftMenu .close-button { right: 0; }
      .menu#rightMenu .close-button { left: 0; }
  
      .sidebox {
          border-radius: 10px;
      }
  
      header {
          line-height: 48px;
      }

      .headeringame
        {
            display: flex;
        }
  
      header .title {
          flex-grow: 1;
      }
  
      header .show-menu {
          height: 36px;
          width: 36px;
          padding: 6px;
          margin: 6px 0;
          background-color: rgba(255, 255, 255, 0.25);
          box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
      }
  
      header .show-menu img {
          width: 100%;
          height: 100%;
          vertical-align: top;
      }
  
      header .show-leftMenu {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
      }
  
      header .show-rightMenu {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          padding: 8px; /* the rightMenu icon is quite big, so needs more padding */
      }
  
      
  
      #mobilerightMenu {
          position: absolute;
          right: 0;
          top: 48px;
          display: flex;
          flex-direction: column;
          font-size: 100%;
          color: #fff;
      }
  
      .stat-ent {
          display: flex;
          align-items: center;
          padding: 5px 10px;
          margin-bottom: 5px;
          border-bottom: 2px solid #fff;
      }
  
      .stat-ent img {
          width: 16px;
          height: 16px;
          margin-right: 5px;
      }
  
      .stat-ent span {
          flex: 1;
      }
  
      .open-menu-overlay {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 100;
          background-color: rgba(0,0,0,0.5);
      }
  
      #infoBoxMain {
          margin: 0;
          border-radius: 0
      }
  }

  .foundKO{
    background: #ffaaaa;
  }

  .foundOK{
    background: #aaffaa;
  }

  .title {
    margin: 0;
    margin-block: 0;
}