html, body { height: 100%; }
body { margin: 0; padding: 0 }
canvas { display: block }

#info {
  position: absolute;
  left: 50%;
  bottom: 50px;
  z-index: 20;

  width: 300px;
  margin-left: -150px;

  padding: 25px;
  background: rgba(0, 0, 0, .5);
  color: #fff;

  font-family: "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: center;

  border-radius: 3px;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .4);

  opacity: 0;
}

#info.transition {
  -webkit-transition: opacity 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
}

#info kbd {
  background: #aaa;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, .3);
  border-radius: 3px;
  padding: 3px;
  margin: 3px;

  font-family: inherit;
}

.mathbox-label {
  font-family: 'klavika-web', sans-serif;
  font-weight: normal;
  font-style: normal;
  text-shadow:
    3px 0px 1px rgb(255, 255, 255),
    -3px 0px 1px rgb(255, 255, 255),
    0px -3px 1px rgb(255, 255, 255),
    0px 3px 1px rgb(255, 255, 255),
    2px 2px 1px rgb(255, 255, 255),
    -2px 2px 1px rgb(255, 255, 255),
    2px -2px 1px rgb(255, 255, 255),
    -2px -2px 1px rgb(255, 255, 255),
    3px 2px 1px rgb(255, 255, 255),
    -3px 2px 1px rgb(255, 255, 255),
    3px -2px 1px rgb(255, 255, 255),
    -3px -2px 1px rgb(255, 255, 255),
    1px 3px 1px rgb(255, 255, 255),
    -1px 3px 1px rgb(255, 255, 255),
    1px -3px 1px rgb(255, 255, 255),
    -1px -3px 1px rgb(255, 255, 255),
    -1px -1px 1px rgb(255, 255, 255),
    -1px 1px 1px rgb(255, 255, 255),
    1px -1px 1px rgb(255, 255, 255),
    1px 1px 1px rgb(255, 255, 255);
}