@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* 
NOTE FROM SCOTT 20230907: Not sure why this is here - sasm's font is raleway?
NOTE FROM JUSTIN 2023-09-20: THIS WAS LIKELY TO PROVIDE A DEFAULT FONT FOR THE GAME. SASM SPECIFIC THEMING SHOULD GO IN TO SASM'S TEMPLATE, 
JUST LIKE WHAT WE DO WITH POWERMAIL FOR EXAMPLE. WE APPLY CLIENT SPECIFIC OVERRIDES IN THEIR TEMPLATE.CSS FILE. THIS IS HOW WE ACCOMPLISH RE-USEABILITY AND OUR OWN BRAND FOR OUR OWN EXTENSIONS.
.... THAT SAID, I DONT THINK I USED THE FONT ANYWAYS SO CAN PROBABLY DELETE ALL FONTS.
@font-face {
  font-family: "Cera Pro";
  src: url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.eot");
  src: url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.woff") format("woff"), url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/2f407d03c34861737fe4b85ab35eb729.svg#Cera Pro") format("svg");
}

@font-face {
  font-family: "Cera Pro Bold";
  src: url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.eot");
  src: url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.woff") format("woff"), url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/98b78079f5ee4295c40260785b4e4fbf.svg#Cera Pro") format("svg");
}
*/

#interactiveGameBoard {
  width: 100%;
  height: 700px;  
  background-color: #c0c0c0;
  position: relative;
  background-size: cover;
}

#interactiveGameBoard .overlay-div {
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  z-index:995;
  background-size:cover;
  background-repeat:no-repeat;
}

#interactiveGameBoard h1 {
  font-size: 4rem;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.233),
    0px 18px 23px rgba(0, 0, 0, 0.295);
}

.game-bar {
  position:absolute;  
  top: 10px;
  width:100%;
  display:inline-flex;
  /*justify-content: space-evenly;*/
}

.game-bar > section {
  position: absolute;
  font-size: 13px;
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

.game-exit {
  cursor:pointer;
}

#center {
  transform-style: preserve-3d;
  position: relative;
  display:inline-flex;
}

.countdown-container {
  display: flex;
  justify-content: space-evenly;
  border-radius: 15px;
  transform-style: preserve-3d;
  position: relative;
}

#score {
  transform-style: preserve-3d;
  position: relative;
}

#tag, #timerAction {
  transform-style: preserve-3d;
  display: none;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%);
  font-size:18px;
  font-weight:700;
  color:green;
  background-color:white;
  padding:4px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  text-align: center;
}

#title {
  transform-style: preserve-3d;
  padding-right:10px;
}

#roundNumber {
  padding-left:10px;
}

button {
  background: transparent;  
  border: none;
}

.game-default-btn, .modal-next-level-btn, .modal-restart-btn, .modal-close-btn {
  text-align: center;
  text-transform: uppercase;
  color: white;  
  cursor: pointer;
  width: 190px;
  height: 50px;
  font-weight: 600;
  font-size: 25px;
  text-shadow: -2px 2px 2px black;
  background-image: url("../Images/Common/green-start-button.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.game-default-btn {
  padding-right: 50px;
  font-size: 60px;
  width: 332px;
  height: 87px;
}

.modal-restart-btn {
  width: 200px;  
  height: auto;
  font-size: 30px;
  padding-right: 40px;
}


.start-scene {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;    
}

.cd-number {
  font-size: 5rem;
  font-weight: bolder;
  text-align: center;
  color: #def7e0;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.233),
    0px 18px 23px rgba(0, 0, 0, 0.295);
}

.cd-text {
  font-size: 1.3rem;
  font-weight: lighter;
  padding: 50px;
  text-align: center;
  color: #93a194;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.233),
    0px 18px 23px rgba(0, 0, 0, 0.295);
}

/* TIMER */
.score {
  font-size: 3rem;
  text-align: center;
}

.title {
  font-size: 1.5rem;
  text-align: center;
}

.countdown {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: top;
}

.add-score-btn {
  position: absolute;
  bottom: 0;
}

.content {
  padding: 40px;
}

.scene-elements {
  width:100%;
  height:100%;
}

.intro-box {
  text-align:center;
  transform:translate(-50%, -50%);
  left:50%;
  top:10%;
  position:absolute;
  border-radius:50px;
  padding:10px;
  border: 1px solid black;
  background-color: #ffffffa8;
}

.game-area {
  padding-top:55px;
  width:100%;
  height:100%;
}

.modal-overlay {
  position: absolute;
  width: 500px;
  max-width: 90%;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 996;
}

.modal-overlay .modal-content {
  text-align:center;
  padding-top:20px;
  padding-bottom:10px;
  padding-left:10%;
  padding-right:10%;
  border: 1px black solid;
}

.modal-overlay .modal-text {
  padding-bottom:10px;
  color: #ef8835;
  font-size: 600;
}

.modal-content {
  background: rgba(0,0,0,0.8) !important;
  border: none !important;
}

.help-info, #toggleFullScreen {
  cursor:pointer;
}

.countdown {
  left: 50%;
  padding-top: 5px;
  color: white !important;  
  width: 40%;
  height: 50px;
  margin: 0 0 0 -20%;
  font-weight: 600;
  font-size: 25px !important;
  text-shadow: 0px 0px 8px red;
}

.game-exit {
   background-image: url("../Images/Common/exit.jpg");  
   left: 7px;
   width: 48px;
   height: 48px;
   background-size: contain;
   background-repeat: no-repeat;
}

.level-progress {
  left: 60px;
  text-align: center;
  padding-top: 5px;
  padding-right: 17px;
  color: white !important;  
  width: 180px;
  height: 50px;
  font-weight: 600;
  font-size: 25px !important;
  text-shadow: -2px 2px 2px black;
  background-image: url("../Images/Common/green-start-button.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.fullscreen-toggle {
  right: 110px;
  text-align: center;
  padding-top: 5px;
  color: white !important;  
  cursor: pointer;
  width: 180px;
  height: 50px;
  font-weight: 600;
  font-size: 0px !important;
  text-shadow: -2px 2px 2px black;
  background-image: url("../Images/Common/fullscreen.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.score-wrapper {
  right: 50px;
  text-align: center;
  padding-top: 5px;
  color: white !important;  
  width: 180px;
  height: 50px;
  font-weight: 600;
  font-size: 25px !important;
  text-shadow: -2px 2px 2px black;
  background-image: url("../Images/Common/green-start-button.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.help-info {
  width: 55px;
  height: 50px;
  right: 10px;
  background-image: url("../Images/Common/help-button.png");
  background-size: contain;
  background-repeat: no-repeat;
}