body { background: #222; font-family: Georgia, Times, "Times New Roman", serif; color: #aaa; } body.mobile { font-size: 0.9em; } * { padding: 0; margin: 0; } h1 { color: #fff; display: block; margin: 0 0 1em 0; font-weight: normal; font-size: 30px; } .is-mobile h1 { font-size: 18px; } .nav-sep { padding: 0 5px; } .nav a, .nav a:link, .nav a:visited, .nav a:active, .nav a:hover { color: #aaa; text-decoration: none; border-bottom: 1px solid #555; padding: 0 0 2px 0; } .container { max-width: 800px; margin: 0 auto; padding: 64px 280px 0 280px; } .is-mobile .container { padding: 6% 6% 0 6%; } .is-fullscreen #canvas-container { width: 100%; height: 100%; } .is-fullscreen #canvas-container canvas { margin: 0; max-width: 100%; max-height: 100%; } .mobile .container { padding: 50px 40px 0 40px; } canvas { margin: 40px 0; max-width: 100%; } .mobile canvas { margin: 0; } canvas:active { cursor: pointer; cursor: -webkit-grabbing; } .controls-container { margin: 40px 0 0 0; width: 100%; } #canvas-container { margin: 20px 0; } #demo-select { padding: 8px 10px; width: 40%; color: #000; } #demo-reset { padding: 8px 10px; color: #000; } #demo-start { display: block; margin: 50px 0; padding: 20px 40px; width: 200px; color: #000; } .dg.a { margin-right: 0; }