body {

  margin: 0;

}

.game-canvas {

  width: 100%;

  height: 100vw;

  max-width: 500px;

  max-height:500px;

  margin-left: auto;

  margin-right: auto;

}

.keys {

  font-family: 'Lato', sans-serif;

  text-align: center;

  width: 100%;

  padding: 10px;

  box-sizing: border-box;

  height: 200px;

  margin: auto;

}

.up {

  position: relative;

  top: -4px;

}

.chevron::before {

  border-style: solid;

  border-width: 8px 8px 0 0;

  content: '';

  display: inline-block;

  height: 20px;

  width: 20px;

  top: -10px;

  position: relative;

  transform: rotate(-45deg);

}

.chevron.down::before {

  transform: rotate(135deg);

  top: -22px;

}

.chevron.right::before {

  transform: rotate(45deg);

  top: -18px;

  left: -5px;

}

.chevron.left::before {

  transform: rotate(225deg);

  top: -18px;

  left: 5px;

}

.arr {

  cursor: pointer;

  width: 70px;

  height: 70px;

  text-align: center;

  line-height: 100px;

  background: gray;

  color: white;

  font-size: 50px;

  border-right: 10px solid #ccc;

  border-bottom: 10px solid #ccc;

  border-left: 10px solid #ddd;

  border-top: 10px solid #eee;

  display: inline-block;

  margin: 5px;

  transition: all .05s linear;

  user-select: none;

}

.arr:active {

  background: #555;

}

#game-container {

  display: flex;

  flex-direction: column;

  background-color: rgba(220, 220, 220, 0.6);

}