* {
  margin: 0;
  padding: 0;
}

body,
html {
  margin: 30px;
  font-family: 'Roboto Mono', monospace;
  font-size: 1.3em;
  background: #e2e8ce;
  color: #305F72;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  width: 400px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #acbfa4;
  border-top: 10px solid #acbfa4;
  border-left: 10px solid #acbfa4;
  border-right: 10px solid #acbfa4;
}

.flag-box,
.timer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 125px;
  height: 75px;
  background: #262626;
  border: 5px solid;
  border-color: #7c8a76 #e2e8ce #e2e8ce #7c8a76;
  color: #ff7f11;
}

.emoji-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  margin: 0 20px 0 20px;
  padding-top: 5px;
  background: #acbfa4;
  border: 5px solid;
  border-color: #e2e8ce #7c8a76 #7c8a76 #e2e8ce;
  outline: none;
  font-size: 2.1em;
  cursor: pointer;
}

.grid {
  width: 400px;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  background: #acbfa4;
  border: 10px solid #acbfa4;
  margin-bottom: 20px;
}

.grid div {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.valid,
.bomb {
  height: 40px;
  width: 40px;
  border: 5px solid;
  border-color: #e2e8ce #7c8a76 #7c8a76 #e2e8ce;
  box-sizing: border-box;
}

.checked {
  height: 40px;
  width: 40px;
  border: 2px solid;
  background-color: #262626;
  border-color: #7c8a76;
  box-sizing: border-box;
}

.one {
  color: #4299E1;
}

.two {
  color: #48BB78;
}

.three {
  color: #F56565;
}

.four {
  color: #9F7AEA;
}