css based active menu

src/App.vue

@@ -49,6 +49,15 @@
 </script>
 
 <style scope>
+  :root {
+    --dark1: #000000;
+    --dark2: #333333;
+    --dark3: #666666;
+    --light1: #999999;
+    --light2: #cccccc;
+    --light3: #eeeeee;
+  }
+
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -63,15 +72,20 @@
   }
 
   body {
-    background: black;
-    color: white;
+    background: var(--dark1);
+    color: var(--light3);
     font-family: Courier New;
   }
 
   canvas {
     flex: auto;
-    background: #110812;
-    margin-right: 10px;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 1) 0%,
+      rgba(131, 131, 131, 1) 52%,
+      rgba(0, 0, 0, 1) 100%
+    );
   }
 
   h1,
@@ -97,7 +111,7 @@
     cursor: pointer;
     font-size: 1.5em;
     vertical-align: middle;
-    color: #c6c6c6;
+    color: var(--light2);
   }
 
   @media screen and (max-width: 800px) {
@@ -113,7 +127,7 @@
     }
 
     #main-menu {
-      background: black;
+      background: var(--dark2);
       margin: 0 auto;
     }
   }