@import "../common.css";
@font-face {
  font-family: "Swiss 911";
  src: url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.eot"); /* IE9*/
  src: url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */
      url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.woff2")
      format("woff2"),
    /* chrome firefox */
      url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.woff")
      format("woff"),
    /* chrome firefox */
      url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.ttf")
      format("truetype"),
    /* chrome firefox opera Safari, Android, iOS 4.2+*/
      url("https://db.onlinewebfonts.com/t/6a891befed317fa85014538362250762.svg#Swiss 911")
      format("svg"); /* iOS 4.1- */
}
@font-face {
  font-family: "ITC Korinna Std";
  src: url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.eot");
  src: url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/598f92f2bbb58a544a174b7c145ca599.svg#ITC Korinna Std")
      format("svg");
}

h1 {
  text-align: center;
  text-shadow: 3px 3px 5px white;
  margin: 0 auto;
}

.return {
  top: 1%;
  left: 1%;
}

/* .options {
  top: 1%;
  left: 95%;
} */

.main {
  background-color: grey;
  padding: 10px;
  width: 95%;
  height: 90%;
}

.box {
  display: block;
  padding: 6px;
  margin: 5px;
  /* background-color: black; */
  text-align: justify;
}

.scorebd {
  margin: 10px auto;
  width: 100%;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  padding: 0px;
  border: 1px solid gray;
}

.scores {
  display: inline-flex;
  font-size: 1.5rem;
  /* width: 20%; */
  padding: 0 20px;
}

/* .gameboxes {
  width: 100%;
  height: 850px;
  border: 5px solid blue;
  background-color: black;
} */

.flex-game {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: stretch;
  align-items: center;
  background-color: black;
}

.cat-col {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 16.67%;
}

.flex-cells {
  flex-grow: 0;
  /* flex-basis: 16.67%; */
  height: 154px;
  font-family: "ITC Korinna Std";
  text-transform: uppercase;
  text-shadow: 1px 1px 1px lightgray;
  background-color: darkblue;
  color: white;
  border: none;
  margin: 1px;
  padding: 20px 4px;
  overflow-x: visible;
}

/* div.row {
  display: inline-flex;
  align-items: center;
  width: 100%;
} */

/* .clue100 { visibility: hidden;}
.clue200 { visibility: hidden;}
.clue300 { visibility: hidden;}
.clue400 { visibility: hidden;}
.clue500 { visibility: hidden;} */

button.catgry,
button.money,
button.clue {
  display: inline-block;
  height: 154px;
  /* width: 16.67%; */
  font-family: "ITC Korinna Std";
  /* font-size: 1.2em;
  font-weight: bold; */
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px lightgray;
  background-color: darkblue;
  color: white;
  border: none;
  /* border: 2px outset white;
  border-radius: 3px; */
  margin: 1px;
  padding: 20px 4px;
}

button.catgry {
  height: 70px;
  font-size: 1.3rem;
}
/* .catgry > text,
.money > text,
.clue > text {
  vertical-align: bottom;
  height: 1rem;
} */

.money {
  font-size: 3rem;
  color: gold;
}
.clue {
  font-size: 0.8rem;
  font-weight: normal;
  vertical-align: middle;
  min-height: 10px;
  margin: 5px auto;
}

#popup {
  display: none;
}

.tooltip {
  /* display: inline-flex; */
  display: inline-block;
  width: 120px;
  background-color: lightgreen;
  color: black;
  margin: 20px;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  border-bottom: 1px dotted black;
  /* writing-mode: horizontal-tb; */
  /* z-index: 1; */
}

.team {
  margin: 10px;
  margin-top: 0.8rem;
  /* color: red; */
}

.scorebd > div:first-child > * {
  color: pink;
  text-shadow: 3px 3px 5px black;
}

.scorebd > div:nth-child(2) > * {
  color: lightblue;
  text-shadow: 3px 3px 5px black;
}

#team1,
#team2 {
  font-size: 2rem;
  text-align: center;
  width: 6rem;
  margin: 0 auto;
}

/* .tooltipText {
    visibility: visible;
} */