#gameBoard {width: 100%; background: #e0e0e0; overflow: hidden; margin: 0;}
#canvas1 {margin-top: 20px;}

#howToPlayInstructions {border-radius: 4px; margin: 10px 0 10px; background: #e0e0e0; overflow: hidden; padding: 0px 20px;
-webkit-transition: height 1s; /* Transitions not working */
transition: height 1s;}

.questionHolder {padding: 30px 10px;}
.ansBoxTwo {display: inline-block; cursor: pointer; background: #f0f0f0; border: 1px black solid; border-radius: 4px; padding: 0px 5px; margin-top: 3px;} 
.ansBoxTwo:nth-of-type(odd) {margin-right: 5px;}
.questionThree div {display: inline-block; font-size: 31px; cursor: pointer; border-radius: 4px;}
.ansHolder img {width: 75px; height: 75px; margin-right: 10px;}
.ansHolder div {display: flex; align-items: center; justify-content: flex-start; font-size: 23px;}

#answersBoard {overflow: hidden;}
.questionHolder {transition: transform 1000ms ease;}

.ansHolder{
  background-color: #f9f9f9;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 8px 0px 8px 5px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.05rem;
  transition: transform 1000ms ease;
  cursor: pointer;
  position: relative;
}

.ansHolder:hover {
  border-color: #4682b4;
  box-shadow: 0 4px 12px rgba(70, 130, 180, 0.2);
  background-color: #ffffff;
  cursor: pointer;
}




.flying-score {
  position: absolute;
  color: #4caf50;
  font-size: 1.5rem;
  font-weight: bold;
  pointer-events: none;
  animation: flyUp 1s ease-out forwards;
  z-index: 1000;
}

@keyframes flyUp {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1.4);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(1);
  }
}



.showCorrect {color: green;}
.showCorrectBox {border: green 2px solid; background: green;}
.showCorrectScore {background: green !important; color: white;}
.showWrong {color: red;}
.showWrongBox {border: red 2px solid; background: red;}
.showWrongScore {background: red !important; color: white;}
// .startButton, .claimButton {width: 170px; font-size: 24px; margin: 0 5px;}
.formDiv {background: white; height: 620px; padding: 10px;}
#scoreBoard {width: 200px; position: relative; left: 50%; margin: 10px 0 10px -100px; padding: 10px; font-size: 44px; font-weight: bold; background: yellow; text-align: center; border-radius: 4px;}

#questionBoard {display: flex; align-items: center; justify-content: space-around;}

#questionBoard div, .scorerP {display: inline-flex; align-items: center; justify-content: center; background: #444; color: white; width: 30px; height: 30px; border-radius: 8px !important;}

#questionBoard div {margin-top: 10px;}

.inertBox {background: #e0e0e0 !important; color: #c0c0c0;}

.emojiTable {margin-top: -25px !important;}
.emojiTable td {border: none;}
.emojiTable td:first-of-type {width: 33%; text-align: right;}
.emojiTable tr:nth-of-type(even) {background: #d0d0d0;}

.top20 {margin-top: 20px;}
.bottom20 {margin-bottom: 20px;}

#buttonHolder {width: 100%; height: 65px; text-align: center;}

#highScorerName {font-size: 23px; padding: 5px; margin-right: 10px;}


.scoreHolderDiv {display: flex; align-items: center; justify-content: center;}
.scoreBoxOne {display: flex; align-items: center; justify-content: space-between; width: 300px; flex-wrap: wrap;}
.oneScore {margin: 5px 0px; text-align: center; padding: 4px; border-radius: 4px; width: 92px;}
.totScore {font-size: 41px; font-weight: bold; margin: 0px 10px; width: 100px;}
.rankTable {width: 180px;}
.rankTable p {background: #f0f0f0; width: 100%; border: #c0c0c0 1px solid; padding: 5px; border-radius: 4px; text-align: center; font-size: 19px;}

.recordBox {display: flex; align-items: end; justify-content: center; margin: 20px 0 5px 0;}
.recordEntry {display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 2px; padding: 5px; width: 200px;}
.recordEntry:nth-of-type(1) {background: #C0C0C0; height: 210px;}
.recordEntry:nth-of-type(2) {background: #FFD700;  height: 240px;}
.recordEntry:nth-of-type(3) {background: #CD7F32;}
.recordEntry p:first-of-type {min-width: 50px; padding: 0 3px; text-align: center; background: yellow; font-size: 23px; border-radius: 4px; font-weight: bold; color: #444; margin: 3px 0px;}
.TopScoreId {font-size: 15px; color: #fff; background: #444; padding: 2px 5px; border-radius: 4px; text-align: center; width: 100%;}
#sevenToTen {display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 12px; color: #444; margin: 0 0 10px 0;}
.lowerEntry {display: flex; align-items: center; justify-content: start; padding: 2px 3px;}
.lowerEntry:nth-of-type(odd){background: #e0e0e0;}
.lowerEntry p:first-of-type {width: 40px;}
.lowerEntry p:nth-of-type(2) {width: 140px;}
.claimZone {background: #e0e0e0; padding: 5px;}

.top20 {margin-top: 20px;}
.bottom20 {margin-bottom: 20px;}

.jello-horizontal{-webkit-animation:jello-horizontal .9s both;animation:jello-horizontal .9s both}

@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}

.rotate-center{-webkit-animation:rotate-center .6s ease-in-out both;animation:rotate-center .6s ease-in-out both}

@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}

/* ----------------------------------------------
 * Generated by Animista on 2023-8-1 9:21:4
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@media screen and (max-width: 990px) {

.recordEntry {width: 120px;}
.recordEntry img {width: 110px; height: 110px;}
.recordEntry:nth-of-type(1) {height: 190px;}
.recordEntry:nth-of-type(2) {height: 220px;}
.TopScoreId {font-size: 13px;}

.scoreBoxOne {width: 150px;}
.oneScore {width: 72px; font-size: 15px;}
.totScore {font-size: 24px; margin: 0px 10px; width: 60px;}
.rankTable {width: 130px;}
.rankTable p {background: #f0f0f0; width: 100%; border: #c0c0c0 1px solid; padding: 5px; border-radius: 4px; text-align: center; font-size: 14px;}

.ansBoxTwo {font-size: 36px;}
.emojiTable td {text-align: right;}
}