@font-face {
  font-family:'Press Start 2P';
	src: url('fonts/pressstart2p.eot');
  src: url('fonts/pressstart2p.woff') format('woff'), url('fonts/pressstart2p.ttf') format('truetype'), url('fonts/pressstart2p.svg') format('svg');
  font-weight:normal;
  font-style:normal; }

@font-face {
	font-family: 'pixelFJ8pt1';
	src: url('fonts/pixelfj8pt1.eot');
	src: url('fonts/pixelfj8pt1.woff') format('woff'), url('fonts/pixelfj8pt1.ttf') format('truetype'), url('fonts/pixelfj8pt1.svg') format('svg');
	font-weight: normal;
	font-style: normal; }

body {
  font-family:'Press Start 2P';
  padding:0;
  margin:0;
  overflow:hidden;
  background-color:#fff; }
  
input {
  width: 100%;
  box-sizing: border-box;
  font-family:'Press Start 2P';
  padding: 0.5em;
  margin: 0.5em 0;
  border: 2px solid #c37e2b; }

#canvas {
  border:0;
  margin:0;
  position:absolute;
  overflow:hidden;
  background:transparent; }
  
#intro, #hiscore { 
  background-color:#febbdb;
  color: #fff;
  text-shadow: 0 2px #c37e2b;
  border: 2px solid #c37e2b;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%); 
  max-width:340px;
  display:none;
  z-index:1; 
  padding:0.5em 1em; }
  
#hstable, #divlegend {
  max-height:75vh;
  overflow-y:auto;
  overflow-x:hidden; }
  
br { clear:both; }

.icon {
  height:2em;
  width:2em;
  vertical-align:middle; }

a, a.visited {
  color: #000;
  text-shadow: none;
  text-decoration: none; }
  
.half { width: 50%; }
.item {
  text-transform: uppercase;
  font-size: 1.25em;
  box-sizing: border-box;
  white-space: nowrap; 
  float: left; }
.centered, h1 { text-align: center }
.score { font-size:1.5em; text-align:right; padding-left:1em; }
.highlight { color: #000; text-shadow: none; }


table { font-size: 0.9em; border-collapse: separate; border-spacing: 0; width:100%; text-transform: uppercase; }