html,
body {
    width:100%;
    height:100%;
}
html {
	display:table;
}
body {
    background-color: #000;
    color: #999;
    font-family: Helvetica, Arial, sans-serif;
    display:table-cell;
    vertical-align:middle;
}

a:link, a:visited{
  color: #999;
}

a:hover{
  color: #ccc;
}

.grab{
	cursor:-moz-grab;
	cursor:-webkit-grab;
}

.grabbing{
	cursor:-moz-grabbing;
	cursor:-webkit-grabbing;
}
.footer{
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  bottom: 0;
  cursor: pointer;
  position: fixed;
  width: 100%;
  z-index: 10;
}

.info{
  padding: 20px;
}

.info .h1{
  color: #666;
  font-size: 16px;
  margin:0;
}

.info p{
  font-size: 14px;
  padding-left: 10px;
}

.info .h2{
  color: #666;
  font-size: 16px;
  margin: 0;
}

.credits{
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.credits li{
  float: left;
  width: 25%;
}

.credits dt{
  font-weight: bold;
}

.credits dd{
  margin-left: 10px;
} 

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
body { margin: 0; }
canvas { display: block; touch-action: none; }
#drag-prompt { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9; padding: 14px 22px; color: #fff; background: rgba(0, 0, 0, 0.65); border-radius: 3px; font-size: 16px; letter-spacing: 0.03em; pointer-events: none; white-space: nowrap; }
@media (max-width: 600px) { .credits li { width: 50%; } .footer { max-height: 80vh; overflow-y: auto; } }