body {
  background-image: url("assets/subtle_dots.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #022d01;
}

h1 {
  font-weight: 300;
}

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

.score-panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 10px;
  width: 300px;
}

.restart {
  cursor: pointer;
}

#head {
  height: 50px;
  width: 50px;
  position: absolute;
  z-index: 10;
  background-image: url("assets/gardener.png");
  object-fit: contain;
  background-size: 50px 50px;
}

#snakeBody {
  height: 50px;
  width: 50px;
  position: absolute;
  object-fit: contain;
  background-image: url("assets/carrot.png");
  background-size: 50px 50px;
}

#board {
  height: 700px;
  width: 700px;
  background-color: #cee6cd;
  border: 1px #022d01 solid;
  border-radius: 10px;
  box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#apple {
  height: 50px;
  width: 50px;
  position: absolute;
  object-fit: contain;
}

#msg {
  height: 50%;
  width: 75%; 
  font-size: 20px; 
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}