@font-face {
  font-family: 'Snake';
  src: url("font.woff") format("woff"),
       url("font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

#snake {
  background-color: black;
  font-family: Snake, monospace;
}

#snake > canvas {
  display: block;
}

#snake:not(.fullscreen) > canvas {
  border: 1px solid black;
}

#snake_center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 300px;
}

#snake_controls {
  display: flex;
  background-color: white;
  padding: 2px 6px;
  border-top: 1px solid black;
  border-bottom: 2px solid black;
}

#snake_controls > span {
  flex: 1;
}

input {
  /* For iOS */
  border-radius: 0;
  -webkit-appearance: none;

}