* { margin: 0; padding: 0; border: 0; }

body, html {
  height: 100%;
}

body {
  background: #424242;
}

div {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
div.start { background-image: url(../img/start.png); }
div.fail { background-image: url(../img/fail.png); }

p {
  position: absolute;
  bottom: 0px;
  left: 0px;
  font-size: 13px;
  font-family: 'Helvetica Neue', helvetica, sans-serif;
  z-index: 200;
  overflow: hidden;
  padding: 5px 8px;
  background: #fff;
  
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
  padding-right: 12px;
  opacity: 0.0;
  display: none;
  -webkit-transition: opacity 2s;
}

p.visible {
  opacity: 0.35;
  display: block;
}

p:hover {
  opacity: 0.8;
}

p.music {
  left: auto;
  right: 0px;
  padding: 5px 8px;
  padding-left: 12px;
  /* hip hip horrayyy for vendor css! */
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;  
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
}

p.info {
  top: 0px;
  bottom: auto;
  font-weight: bold;
  color: #000;
  border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;  
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}

p a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

p a span {
 opacity: 0.5;
 padding-right: 3px;
}

p a:hover {
  opacity: 1;
}

canvas {
  display: block;
  background: #0E0E0E;
  width: 100%;
  height: 100%;
}