src/App.vue

@@ -35,19 +35,19 @@
 </script>
 
 <template>
-  <div id="main">
-    <h1 id="main-title" v-if="store.mainMenu || windowWidth <= 800">
-      <span id="burger-toggle" @click="toggleMainMenu">
+  <main>
+    <h1 id="main-title" class="main-title" v-if="store.mainMenu || windowWidth <= 800">
+      <span id="burger-toggle" class="burger-toggle" @click="toggleMainMenu">
         {{ store.mainMenu == true ? "▼" : "☰" }}
       </span>
       <span >Cellular Automata Explorer</span>
     </h1>
-    <div id="container">
-      <MainMenu v-if="store.mainMenu || windowWidth >= 800" />
+    <div id="container" class="container">
+      <MainMenu class="main-menu" v-if="store.mainMenu || windowWidth >= 800" />
       <CanvasBoard />
     </div>
     <MenuReset :windowWidth=windowWidth />
-  </div>
+  </main>
 </template>
 
 <style src="./assets/css/main.css">

src/assets/css/main.css

@@ -43,14 +43,14 @@ h1, .desktop-title {
   text-transform: uppercase;
 }
 
-#container {
+.container {
   display: flex;
   height: calc(100vh - 100px);
   overflow: hidden;
   flex-direction: column;
 }
 
-#burger-toggle {
+.burger-toggle {
   display: none;
   cursor: pointer;
   font-size: 1.5em;
@@ -75,7 +75,7 @@ select {
 }
 
 input[type="number"] {
-  width: 100%;
+  max-width: 100%;
   height: 100%;
   
 }
@@ -126,12 +126,12 @@ label,
   font-weight: bold;
 }
 
-#canvas-board {
+.canvas-board {
   flex: 1;
   margin: 0 auto;
 }
 
-#main-menu {
+.main-menu {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -139,12 +139,12 @@ label,
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-#main-menu::-webkit-scrollbar {
+.main-menu::-webkit-scrollbar {
   display: none;
 }
 
 /* Hide scrollbar for IE, Edge and Firefox */
-#main-menu {
+.main-menu {
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
@@ -170,11 +170,11 @@ label,
     padding: 0 10px;
   }
 
-  #burger-toggle {
+  .burger-toggle {
     display: inline;
   }
 
-  #main-menu {
+  .main-menu {
     background: var(--dark2);
     margin: 0 auto;
     flex-direction: column;

src/components/CanvasBoard.vue

@@ -187,6 +187,7 @@
   <canvas
     id="board-canvas"
     ref="board-canvas"
+    class="board-canvas"
     :width="store.renderer.width"
     :height="store.renderer.height"
   />

src/components/MenuGeneralOptions.vue

@@ -56,8 +56,6 @@
       </div>
       <div class="form-field">
         <label>Refresh Rate (ms)</label>
-      </div>
-      <div class="form-field">
         <input
           id="refreshRate"
           name="refreshRate"