html, body { background-color: #000; color: #eee; margin: 0px; padding: 0px; position: fixed; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; /* Prevent user selection. */ user-select: none; touch-callout: none; -webkit-touch-callout: none; -webkit-user-select: none; } .dialog { display: none; align-items: center; justify-content: center; font-family: sans-serif; font-size: 170%; position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .dialog.visible { display: flex; } .dialog .wrap { padding: 30px 60px; margin: 20px auto; width: 60%; background: rgba(0, 0, 0, 0.8); border-radius: 5px; } .dialog h1 { margin: 0; } a, a:visited { color: skyblue; } #watermark img { position: fixed; overflow: hidden; left: 0; bottom: 0; opacity: 0.3; width: 24px; height: 24px; padding: 12px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } #watermark img:hover { opacity: 1; -webkit-filter: drop-shadow(white 0 0 5px); } canvas { cursor: -webkit-grab; } canvas:active { cursor: -webkit-grabbing; } #play-overlay { position: fixed; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: none; align-items: center; justify-content: center; } #play-overlay.visible { display: flex; } #play-overlay img { width: 30%; height: 30%; } #error .message { font-family: monospace; }