/* Fonts */
@import 'https://fonts.googleapis.com/css?family=Press+Start+2P';

body {
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P';
}
#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
      -webkit-box-shadow:inset 0px 0px 0px 20px #9b4637;
    -moz-box-shadow:inset 0px 0px 0px 20px #9b4637;
    box-shadow:inset 0px 0px 0px 20px #9b4637;
  background-color: #16161a;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
/* Menu Container */
#menu-container {
  height: 50px;
  width: 200px;
  background-color: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-play-button {
  font-size: 1.5rem;
  font-family: 'Press Start 2P';
  background-color: transparent;
  border: none;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}
/* Game Container */
#game-container {
  text-align: center;
}
.snake-title {
  color: #9b4637;
  font: 300 2em 'Press Start 2P', serif;
  margin: 0 auto;
}
.snake-p {
  color: #d58e5e;
  margin-bottom: 0;
}
.snake {
  width: 80px;
  height: 20px;
  background-color: #fff;
}
.snake-score-p, .snake-high-score-p {
  color: #d58e5e;
  text-decoration: underline;
}
.snake-score, .snake-high-score {
  color: #fff;
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 2rem;
}
#snakeGame {
  background-color: #9b4637;
  margin: 0 auto;
  align-self: center;
  order: 1;
  border: 20px solid #d58e5e;
}
/* Control Buttons */
.controls {
  margin-top: 30px;
  display: flex;
  order: 2;
}
.control-button {
  width: 50px;
  height: 50px;
  background-color: #d58e5e;
  margin: 0px auto;
  color: #9b4637;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: s background-color ease, 0.5s color ease;
  box-shadow: 0px 5px 0px #9b4637;
}
.control-button:hover {
  background-color: #9b4637;
  color: #d58e5e;
}
.control-button i {
  margin: 0 auto;
}
/* Game Over Container */
#game-over-container {
  text-align: center;
}
.game-over-title {
  color: #fff;
  font: 300 2em 'Press Start 2P', serif;
}
.game-over-play-button {
    font-size: 1.5rem;
  color: #9b4637;
  font-family: 'Press Start 2P';
  background-color: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}