diff --git a/web/index.html b/web/index.html
index 827f75f..553196c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -20,7 +20,9 @@
 
 body {
 	background-color: white;
-	background-image: radial-gradient(circle at top left, rgb(7,0,0),transparent,transparent), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px), repeating-linear-gradient(0deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 1px, transparent 1px, transparent 30px),repeating-linear-gradient(90deg, rgb(153,197,206) 0px, rgb(153,197,206) 2px, transparent 2px, transparent 150px), linear-gradient(white, white);
+	background-image: linear-gradient(135deg, rgb(0,0,0) 65px, transparent 130px),
+repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px),
+repeating-linear-gradient(45deg, rgb(0,0,0) 0px, rgb(153,197,206) 1px,transparent 1px, transparent 30px);
 	background-size: cover;
 	color: gray;
 	display: grid;
@@ -34,13 +36,13 @@
 	top: 0;
 }
 
-#invisible_click, #canvas, #nav-container {
+#nav-container:focus-within {
 	z-index: 1;
 }
 
-#nav-button {
-	z-index: 2;
-}
+#nav-content, #nav-container .bg,  #nav-container:focus-within #nav-button {
+ 	z-index: 1;
+ }
 
 #canvas {
 	display: block;
@@ -56,7 +58,7 @@
 	box-shadow: 0px 0px 12px black, 0px 0px 18px black;
 }
 
-#dragdrop::before {
+.dragdrop::before {
 	content: "⌜ Tap to start! ⌟";
 	font: 1.5em serif;
 	padding-top: 2em;
@@ -66,6 +68,10 @@
 	width: 100%;
 }
 
+.dragdrop.error:before {
+	content: "⌜ Error! WebGL is not enabled :( ⌟";
+}
+
 #invisible_click {
 	position: fixed;
 	opacity: 0;
@@ -271,6 +277,8 @@
 
 <input style="display:none;" type="file" name="file_input" id="file_input" onchange="Main.fileInput(this);" />
 
+<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
+
 <div id="nav-container" class="mode-4c">
     <div class="bg" onclick="Main.blurNav();"></div>
     <button id="nav-button" tabindex="0" onclick="Main.clickNav();">
@@ -292,7 +300,6 @@
       </ul>
     </div>
 </div>
-<a id="invisible_click" href="javascript:;" onclick="Main.clickNav()"></a>
 
 <script type="text/javascript">
 	if ('serviceWorker' in navigator) {
@@ -303,7 +310,7 @@
 	var Module = {};
 	Module.canvas = canvas;
 	Module.onRuntimeInitialized = () => {
-		Main.init();
+		Main.init(canvas);
 		Main.nextFrame();
 	};
 </script>
diff --git a/web/main.js b/web/main.js
index bf8f1e1..efdbe24 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,9 +1,10 @@
 var Main = function() {
 
 var _interval = 66;
+var _pause = 0;
 
 var _showStats = false;
-var _renders = 0;
+var _counter = 0;
 var _renderTime = 0;
 
 function toggleFullscreen()
@@ -43,14 +44,23 @@ return {
   {
     Module._initialize_GL(1040, 1040);
     Main.resize();
+    Main.check_GL_enabled(canvas);
+  },
+
+  check_GL_enabled : function(canvas)
+  {
+    if (canvas.getContext("2d")) {
+       var elem = document.getElementById('dragdrop');
+       elem.classList.add("error");
+    }
   },
 
   resize : function()
   {
     // reset zoom
     var canvas = document.getElementById('canvas');
-    var width = window.innerWidth;
-    var height = window.outerHeight;
+    var width = window.innerWidth - 12;
+    var height = window.outerHeight - 12;
     Main.scaleCanvas(canvas, width, height);
     Main.alignInvisibleClick(canvas);
   },
@@ -58,6 +68,21 @@ return {
   toggleFullscreen : function()
   {
     toggleFullscreen().then(Main.resize);
+    Main.togglePause(true);
+  },
+
+  togglePause : function(pause)
+  {
+    // pause is a cooldown. We pause to help autofocus, but we don't want to do it forever...
+    if (pause === undefined) {
+       pause = !Main.isPaused();
+    }
+    _pause = pause? 15 : 0;
+  },
+
+  isPaused : function()
+  {
+     return _pause > 0;
   },
 
   scaleCanvas : function(canvas, width, height)
@@ -66,16 +91,14 @@ return {
     if (height < dim) {
       dim = height;
     }
-    console.log(dim);
-    if (dim > 1040) {
-      dim = 1040;
-    }
+    console.log(dim + "x" + dim);
     canvas.style.width = dim + "px";
     canvas.style.height = dim + "px";
   },
 
   alignInvisibleClick : function(canvas)
   {
+     canvas = canvas || document.getElementById('canvas');
      var cpos = canvas.getBoundingClientRect();
      var invisible_click = document.getElementById("invisible_click");
      invisible_click.style.width = canvas.style.width;
@@ -109,11 +132,15 @@ return {
     document.getElementById("nav-button").focus();
   },
 
-  blurNav : function()
+  blurNav : function(pause)
   {
+    if (pause === undefined) {
+       pause = true;
+    }
     document.getElementById("nav-button").blur();
     document.getElementById("nav-content").blur();
     document.getElementById("nav-find-file-link").blur();
+    Main.togglePause(pause);
   },
 
   clickFileInput : function()
@@ -127,14 +154,20 @@ return {
     var file = document.getElementById('file_input').files[0];
     if (file)
        importFile(file);
-    Main.blurNav();
+    Main.blurNav(false);
   },
 
   nextFrame : function()
   {
+    _counter += 1;
+    if (_pause > 0) {
+       _pause -= 1;
+    }
     var start = performance.now();
-    Module._render();
-    var frameCount = Module._next_frame();
+    if (!Main.isPaused()) {
+       Module._render();
+       var frameCount = Module._next_frame();
+    }
 
     var elapsed = performance.now() - start;
     var nextInterval = _interval>elapsed? _interval-elapsed : 0;
@@ -144,6 +177,9 @@ return {
       _renderTime += elapsed;
       Main.setHTML( "status", elapsed + " : " + frameCount + " : " + Math.ceil(_renderTime/frameCount));
     }
+    if ( !(_counter & 31) ) {
+       Main.resize();
+    }
   },
 
   setActive : function(active)
@@ -194,6 +230,10 @@ window.addEventListener('keydown', function(e) {
       Main.clickNav();
       e.preventDefault();
     }
+    else if (e.key == 'Backspace' || e.keyCode == 8) {
+      Main.togglePause(true);
+      e.preventDefault();
+    }
   }
   else {
     if (e.key == 'Escape' || e.keyCode == 27 ||
@@ -259,6 +299,21 @@ window.addEventListener('keydown', function(e) {
   }
 }, true);
 
+window.addEventListener("touchstart", function(e) {
+  e = e || event;
+  Main.togglePause(true);
+}, false);
+
+window.addEventListener("touchend", function(e) {
+  e = e || event;
+  Main.togglePause(false);
+}, false);
+
+window.addEventListener("touchcancel", function(e) {
+  e = e || event;
+  Main.togglePause(false);
+}, false);
+
 window.addEventListener("dragover", function(e) {
   e = e || event;
   e.preventDefault();