#outerContainer {
  background-color: #e2dfdf;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  width: 455px;
}

#innerContainer {
  margin: 20px;
}

.container {
  margin-top: 20px;
}

.grid {
  background-color: lightgrey;
  border-color: #bab7a9 #fff9db #f5f3eb #bab7a9;
  border-style: solid;
  border-width: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 2px 2px 2px 2px;
  width: 400px;
  height: 400px;
}

.empty {
  background-color: #e2dfdf;
  border: 3px;
  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
  border-style: solid;
}

.cell {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
}

/* Cleared cells. */
.revealedCell {
  border: 1px;
  border-color: darkgrey;
  border-style: none;
  font-family: 'Nunito';
  font-size: 16px;
  width: 40px;
  height: 40px;
}

/* Dividers between cleared cells. */
.revealedCellBottomBorder {
  border-bottom-style: solid;
}

.revealedCellLeftBorder {
  border-left-style: solid;
}

.revealedCellRightBorder {
  border-right-style: solid;
}

.revealedCellTopBorder {
  border-top-style: solid;
}

/* The colours for the numbers that are revealed when a cell is successfully cleared. */
.number1 {
  color: blue;
}

.number2 {
  color: green;
}

.number3 {
  color: red;
}

.number4 {
  color: purple;
}

.number5 {
  color: maroon;
}

.number6 {
  color: turquoise;
}

.number7 {
  color: black;
}

.number8 {
  color: grey;
}

.revealedAsset {
  mix-blend-mode: multiply;
}

.horizontalSpacer {
  height: 20px;
}

/* Panel containing the difficultly level setting and the remaining flags count etc.. */
#statsPanel {
  color: white;
  font-family: "Share Tech Mono";
  font-size: 20px;
  background-color: #1e2832;
  border-color: #bab7a9 #f5f3eb  #fff9db  #bab7a9;
  border-style: solid;
  border-width: 3px;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.gameMetrics {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #323c46;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 8px;
  width: 36%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.gameMetric {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

#difficultyControls {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.difficultyControl {
  font-size: 10px;
  cursor: pointer;
  padding-right: 10px;
}

#newGameButton {
  margin-top: 20px;
  padding: 10px;
  width: 100%;
}

#result {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: crimson;
  display: none;
  font-family: "Orbitron";
  font-size: 48px;
  height: 410px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 30px;
  position: absolute;
  top: 110px;
  width: 410px;
  z-index: 10;
}

#facePanel {
  font-size: 32px;
}
/*# sourceMappingURL=style.css.map */