add pause overlay

assets/game.css

@@ -1,14 +1,20 @@
 #viewport {
   background: url('./background.jpg');
   width: 1400px;
+  /*position: absolute;*/
+}
+
+#canvas-container {
   margin: auto;
+  position: relative;
 }
 
 body {
   display: flex;
   font-family: sans-serif;
   flex-direction: column;
   background: radial-gradient(#4FEDFE, #0C3C7E);
+  position: relative;
 }
 
 body h1 {
@@ -26,7 +32,7 @@ body h1 {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  width: 80%;
+  width: 100%;
   margin: auto;
 }
 
@@ -131,3 +137,19 @@ a {
 #end-modal {
   display: none;
 }
+
+#pause-overlay {
+  display: none;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 1400px;
+  height: 700px;
+  overflow: auto;
+  pointer-events: none;
+  color: white;
+  font-size: 40px;
+  text-align: center;
+}

index.html

@@ -32,18 +32,21 @@ <h2>Game Over!</h2>
         <button class="game-button" id="restart">Play Again (Space)</button>
       </div>
     </div>
-    <canvas id="viewport"></canvas>
-    <section class="footer">
-      <div class="info">
-        <h1>Cytosis</h1>
-        <h3>By: David Janas</h3>
-      </div>
-      <div class="links">
-        <a href="http://david-janas.com"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
-        <a href="http://github.com/drj17/cytosis"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
-        <a href="https://www.linkedin.com/in/david-janas-661325125/"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a>
-      </div>
-  </section>
+    <div id="canvas-container">
+      <canvas id="viewport"></canvas>
+      <div id="pause-overlay">PAUSED</div>
+      <section class="footer">
+        <div class="info">
+          <h1>Cytosis</h1>
+          <h3>By: David Janas</h3>
+        </div>
+        <div class="links">
+          <a href="http://david-janas.com"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a>
+          <a href="http://github.com/drj17/cytosis"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
+          <a href="https://www.linkedin.com/in/david-janas-661325125/"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a>
+        </div>
+      </section>
+    </div>
     <script src="lib/bundle.js" charset="utf-8"></script>
 
   </body>