/*? FONTS*/

@font-face {
  font-family: zorque;
  src: url("../../public/fonts/zorque.otf");
}


@font-face{
  font-family: pricedown;
  src: url("../../public/fonts/pricedown.otf");
}


@font-face {
  font-family: 'masiku';
  src: url("../../public/fonts/Masiku.ttf");
}

@font-face {
  font-family: 'digital-clock';
  src: url("../../public/fonts/DIGITALDREAM.ttf");
}



body{
  overflow-x: hidden;
}

p{
  font-size: 18px;
}
.gameSetupBackground{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
}

.gameSetupBackground img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gameSetupHeader {
  background-color: rgba(52, 52, 52, 0.5);
  position: relative;
  z-index: 2;
}

.gameSetupBox{
  position: relative;
  margin: 60px auto;
  background-color: rgba(52, 52, 52, .9);
  width: 80%;
  height: auto;
  padding: 15px;
  border-radius: 20px;
  z-index: 2;
}

.gameSetupBox h2{
  margin-bottom: 15px;
}

.setup-option-holder{
  display: flex;
  justify-content: space-around;
}
.game-option button{
  background-color: rgba(0, 0, 0, 0);
  width: 300px;
  height: 300px;
  border-radius: 20px;
  border: 2px solid white;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.game-option button:hover{
  background-color: #04AA6D;
}
.game-option button p{
  font-size: 30px;
  margin: 20px;
}
.game-option button .football-image {
  width: 80%;
  height: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 auto;
}

.game-option button .football-image.load-ball{
  background-image: url(images/dirty-football.png);
  transition:all 0.1s;
}

.game-option button .football-image.new-ball{
  background-image: url(images/white-football.png);
  transition:all 0.1s;
}

.game-option button:hover .football-image.new-ball, .game-option button:hover .football-image.load-ball{
  background-image: url(images/golden-football-min.png);
  background-size: 80% 80%;
}
form{
  display: flex;
  flex-direction: column;
}

label{
  color: white;
}

.formLeft{
  width: 90%;
  height: 100%;
  margin: 0px auto;
}

.formLeft .error {
  font-size: 20px;
  color: white;
  margin: 30px 0;
}

input{
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
}

.formLeft label, .gameLoaderHolder label {
  color: white;
  font-size: 28px;
  margin: 0 15px 0 0;
}
.formLeft input, .gameLoaderHolder input{
  height: 50px;
  font-size: 28px;
  font-weight: bold;
}

.newGameCode{
  display: flex;
  color: white;
  margin-bottom: 15px;
  font-weight: bold;
}

.titleHeader.game-setup {
  width: 90%;
  text-align: center;
  margin: 60px auto;
}


/* Load Game */

.game-selection-outer {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  padding: 100px 0;
}

.individualGameSelection {
  background-position: center;
  background-size: cover;
  min-height: 120px;
  min-width: 300px;
  width: 300px;
  height: 200px;
  border: 1px solid white;
  border-radius: 20px;

}

.individualGameSelection .game-information {
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.individualGameSelection .game-information:hover {
  background-color: rgba(0, 0, 0, 0.3);
}


.game-information h3 {
  font-size: 24px;
}


.game-information img{
  object-fit: contain;
  width: 50%;
  height: auto;
  padding: 10px;
  border-radius: 10px;
  background-color: white;
  box-sizing: border-box;
  margin: 10px 0;
}


.game-information h4 {
  font-size: 24px;
}

/* Game Loader */

.spinner-container {
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* Rollover Modal */
.rollover-request {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 60px;
  background-color: #242627;
  border-radius: 20px;
  color: white;
  z-index: 1000;
  transform: translate(-50%, -50%);
}


.rollover-request .close-modal {
    position: absolute;
    right: 45px;
    top: 45px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid white;
    color: white;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
}

.rollover-request h2 {
  margin: 80px 30px 30px 30px;
  font-size: 22px;
}


.rollover-request .button-container {
  margin-top: 30px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Rollover Settings */

.rollover-modal {
  width: 100%;
  height: 100%;
  background-color: #242627;
  padding: 60px 15px;
  margin-bottom: 80px;
  box-sizing: border-box;
}

/* End of load game */

.event-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 45px 0;
}


.game-setting-section-title {
  margin-top: 180px;
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: 600;
  color: white;
  text-align: center;
}


.event-choice label {
  flex: 1 1 40%;
}

.event-choice label .checkmark {
  width: 100%;
  padding: 5px;
  height: 45px;
  font-size: 28px;
  font-weight: 600;
}


.teamNames{
  width: 100%;
  margin: 80px 0;
  display: flex;
  gap: 60px;
}

.teamNames > div{
  display: flex;
  flex-direction: column;
  flex: 1 1;
}

.teamNames > div label {
  min-width: max-content;
  margin-bottom: 15px;
}

.teamNames > div input {
  height: 50px;
}

.countdownTimerContainer{
  margin: 80px 0;
  display: flex;
  flex-direction: column;
}

.countdownTimerContainer label {
  margin-bottom: 15px;
}



.countdownTimerContainer [type=time]{
  width: 200px;
  padding: 0 15px;
  box-sizing: border-box;
}

.game-ticket-options {
  display: flex;
  gap: 60px;
  margin: 80px 0;
}


.game-ticket-options div {
  flex: 1 1 40%;
  
}


.vendorFeesOptions{
  display: flex;
  margin-top: 15px;
}

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  height: 30px;
  width: 79px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 79px;
  background-color: #A8A8A8;
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  font-weight: 600px;
  font-size: 28px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #04AA6D;
}









.ticketPriceContainer{
  display: flex;
  flex-direction: column;
}


.ticketPriceContainer label {
  margin-bottom: 15px;
}

.submitOptions{
  height: 50px;
  width: 50%;
  margin: 30px auto;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.submitOptions button:disabled {
  cursor: not-allowed!important;
  opacity: 0.8;
  background-color: gray;
}


.submitOptions button, .gameLoaderHolder button, button.new-load-option{
  height: inherit;
  width: inherit;
  font-size: 22px;
  background-color: #04AA6D;
  border-radius: 9px;
  border: 0px;
  color: white;
}


.submitOptions button {
  width: 100%;
}

button.new-load-option{
  margin-bottom: 30px;
  background-color:#C39B3C;
}

.submitOptions button:hover, .gameLoaderHolder button:hover, .new-load-option:hover {
  background-color: #0bcf87;
  cursor: pointer;
}


.gameLoaderHolder{
  width: 100%;
}

.gameLoaderHolder button, button.new-load-option{
  margin: 30px 5%;
  width: 90%;
  height: 50px;
}

.gameLoader{
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.gameLoader input{
  width:100px;
}








.formRight{
  padding: 30px 0;
  width: 100%;
}

.formRight h2{
  color: white;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  margin: 30px 0;
}

.formRightInner{
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  height: 80vh;
  overflow-y: scroll;
}


/* * RADIO BUTTON*/


.formRightInner label{
  flex: 1 1 170px;
  position: relative;
  width: 300px;
  min-width: 300px;
  height: auto;
  margin-bottom: 15px;
}

.selectionOverlay{
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: none;
  justify-content: center;
  align-items: center;
  border: 4px solid #C39B3C;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.formRightInner p{
  font-size: 24px;
}

.selectionOverlay p{
  font-weight: 400;
  font-size: 30px;
}

/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] ~ img {
  cursor: pointer;
  width: 100%;
  height: 280px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

/* CHECKED STYLES */
[type=radio]:checked ~ .selectionOverlay {
  display: flex;
  z-index: 2;
}



.rulesButton, #rulesModalClose{
  position: absolute;
  right: 45px;
  top:45px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid white;
  color: white;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
}

.modal{
  position: absolute;
  top: 45px;
  left: 10%;
  width: 80%;
  height: auto;
  color: white;
  background-color: black;
  margin: 0 auto;
  z-index: 100;
  font-size: 20px;
  border-radius: 20px;

}
.modal h2{
  margin: 30px;
}
.modal ol{
  margin: 60px;
}

.modal ol li {
  margin: 30px 0;
}

.modal p{
  width: 100%;
  text-align: center;
  padding: 30px;
}

.modal.wrongGameCode h2{
  width: 100%;
  text-align: center;
  margin: 30px 0 0 0;
}























/*GAME PAGE*/

.gameHolder{
  width: 100%;
  height: 100vh;
}

#confirmModal{
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #2E2E2E;
  border-radius: 20px;
  color: white;
  z-index: 10000;
  transform: translate(-50%, -50%);
}
#confirmModal > div {
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#confirmModal > div > div{
  height: 50px;
  margin-top: 30px;
  width: 280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#confirmModal h2{
  font-size: 40px;
}
#confirmModal span {
  font-weight: bold;
  color: #C39B3C;
}

#confirmModal button {
  height: inherit;
  width: 120px;
  font-size: 22px;
  background-color: #04AA6D;
  border-radius: 9px;
  border: 0px;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

#confirmModal button.confirm-button:hover, #confirmModal button.deny-button:hover{
  background-color: #ccc;
}

#confirmModal button.confirm-button{
  background-color: #04AA6D;
}

#confirmModal button.deny-button{
  background-color: #aa0404;
}

.gameHolder .background{
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.gameHolder .background .background-overlay{
  width: 100%;
  height: 100%;
  background-color: rgba(36, 38, 39, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.gameHolder .background img{
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}


.gameInner{
  margin: 64px;
  width: calc(100% - 128px);
  height: calc(100% - 128px);
  position:absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.gameTopBar{
  display: flex;
}

.timer{
  color: white;
  font-size: 20px;
}

.timer-upper{
  display: flex;
  align-items: center;
}

.timer-upper svg{
  width: 34px;
  height: 34px;
  fill: white;
  margin: 0 15px 0 0;
}

.timer-lower{
  display: flex;
  margin-top: 10px;
}
.timer p{
  font-size: 24px;
  font-family: 'urbane-rounded', sans-serif;
  font-weight: 600;
  font-style: normal;
}

.timer p.timer-number{
  color: #00FF00;
  font-family: 'digital-clock', sans-serif;
}

.gamePlayed{
  justify-self: center;
  width: 65%;
}

.gamePlayed h2{
  color: white;
  font-size: 80px;
  font-weight: bold;
  text-transform: uppercase;
  margin-left: 60px;
  font-family: 'aptly', sans-serif;
  font-weight: 500;
  letter-spacing: 3px;
}

.versus-text{
  font-family: 'Masiku', sans-serif;
  font-size: 60px;
}


.gameCenter{
  display: flex;
  align-items: center;
}

.jackpot{
  width: 301px;
  height: 432px;
  background-color: #2E2E2E;
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.jackpot svg{
  width: 234px;
  height:203px;
  fill: #C39B3C;
  -webkit-animation-name: gelatine;
          animation-name: gelatine;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  
}

@-webkit-keyframes gelatine {
  1% { transform: scale(1, 1); }
  2% { transform: scale(0.9, 1.1); }
  3% { transform: scale(1.1, 0.9); }
  4% { transform: scale(0.95, 1.05); }
  5% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}

@keyframes gelatine {
  1% { transform: scale(1, 1); }
  2% { transform: scale(0.9, 1.1); }
  3% { transform: scale(1.1, 0.9); }
  4% { transform: scale(0.95, 1.05); }
  5% { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}

.jackpot h2{
  font-size: 65px;
  color: #C39B3C;
  font-family: 'aptly', sans-serif;
  letter-spacing: 3px; 
}

.jackpot p{
  font-size: 50px;
  color: white;
  font-weight: bold;
}


.game-grid{
  display: grid;
  grid-template-columns: repeat(15, 60px);
  grid-template-rows: repeat(6, 60px);
  gap: 10px;
}

#gameGrid{
  margin-left: 5%;
}

.game-grid-block{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  background-color: #e2e2e2;
  border-radius: 15px;
  font-family: aptly, sans-serif;
  font-weight: 600;
  box-shadow: 2px 2px 2px #f0f0f0;
  cursor: pointer;
}


.event-mascot img{
  width: 400px;
  height: auto;
  object-fit: contain;
}



.adminPanel{
  display: flex;
}


.adminPanelInner{
  background-color: rgba(46, 46, 46, 0.75);
  border: 1px solid white;
  border-radius: 20px;
  width: 350px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin-left: 20px;
  padding: 20px;
}


.adminPanelInner p{
  color: white;
  font-weight: bold;
  font-size: 40px;
}

.adminPanelInner .admin-section-title{
  font-size: 24px;
  margin-bottom: 10px;
  color: white;
}

.adminPanelInner input{
  height: 40px;
  font-size: 24px;
  margin-top: 5px;
  font-weight: bold;
  width: 120px;
  text-align: center;
  padding-left: 0px;
}
.adminPanelInner div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.adminPanelInner .admin-button{
 height: 45px;
 color: white;
 border-radius: 8px;
 font-weight: 600;
 background-color: #A8A8A8;
 border: 0px;
 padding: 0px 10px;
 font-size: 20px;
 cursor: pointer;
}

.adminPanelInner .admin-button.disabled-button{
  cursor: not-allowed;
}

.adminPanelInner .admin-button:hover{
  outline: 3px solid white;
}


.winner{
  color: #C39B3C!important;
}

.picked{
  color: #8D8D8D;
  background-color: #9D2021;
  box-shadow: 2px 2px 2px #a74444;
}

#game-modal{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

#name-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2E2E2E;
  padding: 60px;
  border-radius: 20px;
}

#name-box h2{
  color: white;
  font-size: 40px;
  margin-top: 60px;
  text-align: center;
}

#name-box p {
  color: white;
  margin-top: 30px;
  font-size: 24px;
}

#name-box span{
  color: #C39B3C;
}

#name-box input{
  height: 40px;
  width: 260px;
  margin: 30px 0;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  padding-left: 0px;
}

#name-box button{
  height: inherit;
  width: 120px;
  font-size: 22px;
  background-color: #04AA6D;
  border-radius: 9px;
  border: 0px;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

#name-box button:hover{
  background-color: #ccc;
}








#numberBox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  border-radius: 50%;
  width: 400px;
  height: 400px;
}
#numberBox img{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#numberBox p{
  position: relative;
  z-index: 2;
  color: rgb(0, 0, 0);
  font-size: 90px;
  font-weight: bold;
  mix-blend-mode:multiply;
}
.winningSection{
  width: 100%;
  height: 100vh;
  position: relative;
}
.winner-bg{
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.winner-bg img{
  width: 100%;
  height: 100%;
}

.winner-overlay{
  z-index: 2;
  position: relative;
}

.winningSection .winnerText{
  font-size: 150px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  font-family: 'loos-normal', sans-serif;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffc403, 0 0 40px #ffc403, 0 0 50px #ffc403, 0 0 60px #ffc403, 0 0 70px #ffc403;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ffe75d, 0 0 40px #ffe75d, 0 0 50px #ffe75d, 0 0 60px #ffe75d, 0 0 70px #ffe75d, 0 0 80px #ffe75d;
  }
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ffc403, 0 0 40px #ffc403, 0 0 50px #ffc403, 0 0 60px #ffc403, 0 0 70px #ffc403;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ffe75d, 0 0 40px #ffe75d, 0 0 50px #ffe75d, 0 0 60px #ffe75d, 0 0 70px #ffe75d, 0 0 80px #ffe75d;
  }
}

.winner-number-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  -webkit-animation-name: gelatine;
          animation-name: gelatine;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  padding: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  margin: 0 auto;
}

.winningSection .winnerNumber{
  font-size: 150px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.winner-overlay h3{
  font-size: 50px;
  text-align: center;
  color: white;
  font-family: 'aptly', sans-serif;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 0, 0.5)
}



.timerScreen{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  background-color: rgb(9, 9, 9);
}
.timerScreenVideo{
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
}
.timerScreenVideo, .timerScreenVideo video {
  width: auto;
  height: 50vh;
  display: flex;
  margin: 0 auto;
}
.timerScreenOverlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.timerScreenTop h3{
  margin-top: 30px;
  font-family: liza-display-new,sans-serif;
  font-weight: 400;
  font-style: normal;
}

.timerScreen h2, .timerScreen h3{
  color: white;
  text-align: center;
}

.timerScreen h2{
  font-size: 60px;
  margin-top: 30px;
  color: #C39B3C;
  font-family: "zorque", sans-serif;
}

.timerScreen h3{
  font-size: 60px;
}

.timerScreenBottom{
  margin: 30px;
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.timerScreen h3.help-text{
 color: #C39B3C;
 font-size: 45px;
 font-weight: 500; 
 font-family: aptly,sans-serif;
 font-weight: 500;
 font-style: normal;
}
.green-text{
  color: #04AA6D;
}

.red-text{
  color: #aa0404;
}

.invisible{
  display:none!important;
}

svg{
  width: 100px;
  height: 100px;
  margin: 20px;
  display:inline-block;
}

.gameLogo{
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  width: 150px;
  height: auto;
  display: flex;
  border-radius: 20px;
  z-index: 10000;
}

.gameLogo img{
  width: 100%;
  height: 100%;
  display: flex;
  -o-object-fit: contain;
     object-fit: contain;
  box-sizing: border-box;
  padding: 15px;
}

input:disabled{
  background-color: black;
}




@media only screen and (min-height: 1080px){
  .timerScreen h2, .timerScreen h3{
    font-size: 90px;
  }

  .timerScreen h3.help-text{
    font-size: 65px;
  }
}

@media only screen and (min-height: 1440px){
  .timerScreen h2, .timerScreen h3{
    font-size: 120px;
  }

  .timerScreen h3.help-text{
    font-size: 90px;
  }




  .gamePlayed h2{
    font-size: 120px;
  }

  .timer p{
    font-size: 40px;
  }

  .game-grid{
    display: grid;
    grid-template-columns: repeat(15, 100px);
    grid-template-rows: repeat(6, 100px);
    gap: 20px;
  }

  .jackpot{
    width:401px;
    height: 550px;
  }

  .jackpot svg{
    width: 280px;
    height: auto;
  }

  .jackpot h2{
    font-size: 85px;
  }

  .jackpot p{
    font-size: 80px;
  }

  .gameLogo{
    width: 250px;
  }
}

@media only screen and (min-height: 2000px){
  .timerScreen h2, .timerScreen h3{
    font-size: 180px;
  }

  .timerScreen h3.help-text{
    font-size: 130px;
  }


  .gamePlayed h2{
    font-size: 180px;
  }

}

@media only screen and (min-height: 2880px){
  .timerScreen h2, .timerScreen h3{
    font-size: 240px;
  }

  .timerScreen h3.help-text{
    font-size: 175px;
  }
}



/*! RESPONSIVE */


@media only screen and (max-width: 1400px){
  .jackpot{
    width: 210.7px;
    height: 302.4px;
  }
  .jackpot svg{
    height:142.1px;
    width:163.8px;
  }

  .jackpot h2, .jackpot p{
    font-size: 35px;
  }

  .game-grid{
    display: grid;
    grid-template-columns: repeat(15, 45px);
    grid-template-rows: repeat(6, 45px);
  }
  .game-grid-block{
    font-size: 30px;
  }
}


@media only screen and (max-width:1100px){
  .gamePlayed h2{
    font-size: 40px;
  }

  .jackpot{
    width: 155px;
    height: 235px;
  }
  .jackpot svg{
    height:110px;
    width:auto;
  }

  .jackpot h2, .jackpot p{
    font-size: 24px;
  }
  .game-grid{
    display: grid;
    grid-template-columns: repeat(15, 38px);
    grid-template-rows: repeat(6, 38px);
  }
  .game-grid-block{
    font-size: 25px;
  }
}


/* ! PUBLIC DISPLAY */ 


@media only screen and (max-height: 730px){
  .gamePlayed h2{
    font-size: 55px;
  }
  .versus-text{
    font-size: 35px;
  }
}