@font-face {
  font-family: 'Main';
  src: url("../data/fonts/pixel.ttf");
}

canvas {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}


body {
  margin:0;
  padding:0;
}

.root {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  font-family: 'Main', monospace;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform:scale(6);
  transform-origin:0 0;
}

.root>div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.pages>div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hud {
  color: white;
  font-size: 24px;
  height: 100%;
}

.title {
  color: #926542;
  font-size: 48px;
  width: 100%;
  text-align: center;
  text-shadow: -1px -1px 0 #000,
  1px -1px 0 #000,
  -1px 1px 0 #000,
  1px 1px 0 #000;
}

.panel {
  position: absolute;
  top: 0;
  height: 100%;
  background: grey;
  width: 65px;
  pointer-events: none;
}

.left {
  left: 0;
}

.right {
  right: 0;
}