* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  background-image: url("images/forest background.gif");
  background-size: cover;
  position: relative;
}

.container {
  height: 50px;
  width: 400px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items:center;
  background-color: #d2c58f;
  border: 4px solid;
  border-color: #f0e4b4 #c1b378 #c1b378 #f6edc9;
  box-sizing: border-box;
  padding: 0 20px;
}

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

.valid {
  border: 4px solid;
  border-color: #f0e4b4 #c1b378 #c1b378 #f6edc9;
  box-sizing: border-box;
  background-image: url("images/bush.png");
  background-size: contain;
}

.checked {
  border: 2px solid;
  background-color: #f6edc9;
  border-color: #c1b378;
  box-sizing: border-box;
  background-image: none;
}

.mine {
  border: 4px solid;
  border-color: #f0e4b4 #c1b378 #c1b378 #f6edc9;
  box-sizing: border-box;
  background-image: url("images/bush.png");
  background-size: contain;
}

.flag {
  border: 2px solid;
  background-color: #f6edc9;
  border-color: #c1b378;
  box-sizing: border-box;
  background-image: none;
}

.counter {
  width: 70px;
}

.timer {
  width: 70px;
}

h1 {
  font-family: 'Londrina Shadow', cursive;
  font-size: 40px;
  color: #f0e4b4;
}

button {
  width: 36px;
  height: 36px;
  background-image: url("images/basket.png");
  background-size: contain;
  background-color: #f6edc9;
  border-color: #f0e4b4;
}

button:focus {
  outline: none !important;
}

div {
  font-family: 'Roboto Mono', monospace;
  font-size: 25px;
  text-align: center;
  color: #793b14;
}

p {
  font-size: 15px;
  text-decoration: underline;
  text-align: center;
  margin-bottom: -5px;
}

.alert {
  width: 200px;
  height: 40px;
  background-color: #6b9b33;
  position: absolute;
  font-family: 'Londrina Shadow', cursive;
  font-size: 30px;
  color: #F0E4B4;
}

.score {
  font-size: 13px;
  text-align: left;
  color: #f0e4b4;
}

.one {
  color: blue;
}

.two {
  color: green;
}

.three {
  color: red;
}

.four {
  color: #bb41d3;
}

.five {
  color: #4199d3;
}

.six {
  color: #e76346;
}

.seven {
  color: #57da59;
}

.eight {
  color: #381532;
}


@media (max-width: 600px) {
  h1 {
    font-size: 30px;
  }
  
  .container {
    width: 50%;
  }
  
  .grid {
    width: 50%;
    height: 50%;
  }

  div {
    font-size: 13px;
    text-align: center;
  }

  .counter {
    font-size: 17px;
  }

  .timer {
    font-size: 17px;
  }
}