@font-face {
  font-family: 'Erix';
  font-style: normal;
  font-weight: normal;
  src: url('./erix_outline.ttf') format('truetype');
} /* Erix Outline font by Patrick H. Lauke http://www.splintered.co.uk/experiments/72/ */

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
  cursor:default;
}

a {
  color:#0078ff;
}

.hud {
  position:absolute;
  z-index:999;
  color:white;
  font-family: 'Erix', serif;
  font-size: 100%;
  font-style: normal;
}

#but {
  position:absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  top:50%;
  left:0;
}

.but {
  color:white;
  font-family: 'Erix', serif;
  font-size: 100%;
  font-style: normal;
  border-radius:0.3em;
  border:0.1em solid white;
  background-color: rgba(99,99,99,0.65);
  cursor:pointer;
  padding: 0.5em;
  margin: 0 auto;
  width: 8em;
  /* initial start button style */
  display: none;
}

.but:hover {
  background-color: #404040;
}

#score {
  top:10px;
  right:20px;
}

#lives {
  top:10px;
  left:60px;
  font-size:100%;
}

#hiscore {
  position:absolute;
  z-index:999;
  top:10px;
  left:0;
  width:100%;
  margin:0;
  text-align:center;
  font-size:90%;
  line-height:100%;
}			

#info {
  position:absolute;
  z-index:999;
  bottom:75px;
  left:50%;
  width:20em;
  margin-left:-10em;
  text-align:center;
  font-size:60%;
  line-height: 1.2;
}

small {
  font-size:70%;
}

#title {
  position:absolute;
  z-index:999;
  top:19%;
  left:0;
  width:100%;
  text-align:center;
  font-size: 200%;
}

#credit {
  font-family: 'Erix', serif;
  position:absolute;
  bottom:1em;
  width: 100%;
  text-align:center;
  font-size:30%;
  color:#aaa;
}

#credit a { color: #f00; }

video {
  position:absolute;
  top: 60px;
  left: 10px;
  z-index:1000;
  display:block;
  width: 200px; height: 150px;
  -o-transform : scaleX(-1);
  -moz-transform : scaleX(-1);
  -webkit-transform : scaleX(-1);
  -ms-transform: scaleX(-1);
  transform : scaleX(-1);
}

.grayout .but {
  filter:alpha(opacity=40); /* IE */
  opacity: 0.4; /* Safari, Opera */
  -moz-opacity:0.40; /* FireFox */
  cursor: default;
}
* {
  -moz-user-select: none;
  -webkit-user-select: none;
}
body {
  background:#000;
  padding:0;
  margin:0;
  font-weight: bold;
  overflow:hidden;
  font-family: 'Jockey One', sans-serif;
}
a {
  color : #bb2200;
}
canvas {
  cursor:crosshair;
}
#like {
  position:absolute;
  bottom:5px;
  left:50%;
  width:790px;
  margin-left:-365px;
}
#feedback {
  position:absolute;
  top:12px;
  right:8px;
  width:300px;
  text-align:right;
}
#feedback a {
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  background-color:rgba(255,255,255,0.75);
  padding:6px;
  border-radius:4px;
}

.click {cursor:pointer; opacity:0.8}
.click:hover {opacity:1}

span {text-shadow: 0 0 2px white, 0 0px 10px white; letter-spacing:0.05em; user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; font-size:150%;  }
#hud {position:absolute; z-index:999; top:10px; right:15px; opacity:0.5;}
#panel1, #panel2 {position:absolute; z-index:999; top:50%; left:0px; width:100%; text-align:center; color:white; font-size:30px;}
#panel1 {margin-top:-190px; line-height:260%;}
#panel2 {margin-top:-190px; line-height:200%; display:none}
#fk2logo {font-size:500%; letter-spacing:0px; opacity:0.95; cursor:default;}
#start {font-size:300%;}
#options {font-size:220%;}
#score  {position:absolute; top:10px; left:50%; width:420px; margin-left:-210px; text-align:center; font-size:250%; color:white;}
#info {font-size:100%}
#info a {text-decoration:none; color:white;}