/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
  font-family: 'EmojiSymbols';
  src: url('EmojiSymbols-Regular.woff') format('woff');
  text-decoration: none;
  font-style: normal;
}
/*-----*/

@font-face {
  font-family: 'Segoe UI Emoji';
  src: URL('seguiemj.ttf') format('truetype');
}

.container {
  width: 1170px;
  align-content: center;
}

.grid {
  width: 1050px;
  height: 560px;
  display: flex;
  flex-wrap: wrap;
  background-color: #dcd6bc;
  margin-left: 50px;
  margin-top: 12px;
  border: 10px solid #dcd6bc;
  margin-bottom: 10px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

div, input, button {
  font-size: 20px;
  text-align: center;
}

div, input {
  font-family: 'Roboto', sans-serif;
}

.grid div {
  font-family: 'Roboto Mono', monospace;
  font-size: 23px;
}

.topbar {
  display: grid;
  grid-template-columns: 40% 20% 40%;
  justify-content: center;
  align-items: center;
}

button {
  font-family: 'Segoe UI Emoji';
  height: 43px;
  width: 43px;
  background-color: #dcd6bc;
  outline: 0;
  box-shadow: none!important;
  border: 5px solid;
  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
}

.inline-flex-center {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

button:active {
  border: 2px solid;
  background-color: #cecab7;
  border-color: #9c998d;
}

#result {
  margin-top: 5px;
  color: #e76346;
}

#timer {
  width: 70px;
}

.bomb, .valid {
  height: 35px;
  width: 35px;
  border: 5px solid;
  border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
  box-sizing: border-box;
}

.bomb {
  font-family: 'Segoe UI Emoji'!important;
  font-size: 18px!important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.checked {
  height: 35px;
  width: 35px;
  border: 2px solid;
  background-color: #cecab7;
  border-color: #9c998d;
  box-sizing: border-box;
}

.flag {
  font-family: 'EmojiSymbols'!important;
  color: #d40a0a;
  font-size: 23px!important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.question {
  color: #521707;
  font-family: 'Roboto Mono', monospace!important;
  font-size: 23px!important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gameover.bomb.flag {
  font-family: 'EmojiSymbols'!important;
  color: #d40a0a;
  font-size: 24px!important;
}

.gameover.bomb.question {
  font-family: 'Segoe UI Emoji'!important;
  font-size: 18px!important;
}

.one {
  color: #103ee3;
}

.two {
  color: #289d0a;
}

.three {
  color: #ff2e00;
}

.four {
  color: #0b0060;
}

.five {
  color: #782400;
}

.six {
  color: #05c6b4;
}

.seven {
  color: #8c078f;
}

.eight {
  color: #000000;
}