diff --git a/src/App.vue b/src/App.vue
index 2ef7620..1d94c50 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,88 +50,5 @@
   </div>
 </template>
 
-<style>
-  :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;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    /* color: #2c3e50; */
-  }
-
-  * {
-    margin: 0;
-    padding: 0;
-  }
-
-  body {
-    background: var(--dark1);
-    color: var(--light3);
-    font-family: Courier New;
-  }
-
-  canvas {
-    flex: auto;
-    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,
-  h2 {
-    font-weight: bold;
-  }
-
-  h1 {
-    margin: 10px auto;
-    font-size: larger;
-    text-transform: uppercase;
-  }
-
-  #container {
-    display: flex;
-    height: calc(100vh - 100px);
-    overflow: hidden;
-    flex-direction: column;
-  }
-
-  #burger-toggle {
-    display: none;
-    cursor: pointer;
-    font-size: 1.5em;
-    vertical-align: middle;
-    color: var(--light2);
-  }
-
-  @media screen and (max-width: 800px) {
-    h1 {
-      font-size: medium;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 10px;
-    }
-
-    #burger-toggle {
-      display: inline;
-    }
-
-    #main-menu {
-      background: var(--dark2);
-      margin: 0 auto;
-    }
-  }
+<style src="./assets/css/main.css">
 </style>
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
new file mode 100644
index 0000000..a5f294d
--- /dev/null
+++ b/src/assets/css/main.css
@@ -0,0 +1,195 @@
+:root {
+  --dark1: #000000;
+  --dark2: #333333;
+  --dark3: #666666;
+  --light1: #999999;
+  --light2: #cccccc;
+  --light3: #eeeeee;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--dark1);
+  color: var(--light3);
+  /* font-family: Courier New; */
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+
+canvas {
+  flex: auto;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(131, 131, 131, 1) 52%,
+    rgba(0, 0, 0, 1) 100%
+  );
+}
+
+h1,
+h2 {
+  font-weight: bold;
+}
+
+h1 {
+  margin: 10px auto;
+  font-size: larger;
+  text-transform: uppercase;
+}
+
+#container {
+  display: flex;
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  flex-direction: column;
+}
+
+#burger-toggle {
+  display: none;
+  cursor: pointer;
+  font-size: 1.5em;
+  vertical-align: middle;
+  color: var(--light2);
+}
+
+a {
+  font-weight: bold;
+  border: 1px solid white;
+  padding: 2px;
+}
+
+a:hover {
+  cursor: pointer;
+  color: var(--light1);
+}
+
+select {
+  margin-top: 10px;
+  padding: 5px;
+}
+
+input[type="button"] {
+  min-width: 60px;
+  padding: 5px;
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.form-field {
+  display: flex;
+  margin: 10px;
+  justify-content: space-between;
+}
+
+.menu-row {
+  flex: 1;
+  position: relative;
+}
+
+.menu-row h2 {
+  font-size: medium;
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--dark3);
+  border-top: 1px solid var(--dark3);
+  margin: 0 0 10px 0;
+}
+
+.menu-row a {
+  color: white;
+  font-weight: bold;
+  text-decoration: none;
+  font-size: small;
+}
+
+.menu-row-content {
+  position: absolute;
+  background: var(--dark1);
+  width: 100%;
+}
+
+label,
+.form-field label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+#canvas-board {
+  flex: 1;
+  margin: 0 auto;
+}
+
+#main-menu {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex: 1;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+#main-menu::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+#main-menu {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.reset-menu {
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+}
+
+@media screen and (max-width: 800px) {
+  h1 {
+    font-size: medium;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+  }
+
+  #burger-toggle {
+    display: inline;
+  }
+
+  #main-menu {
+    background: var(--dark2);
+    margin: 0 auto;
+    flex-direction: column;
+    position: absolute;
+  }
+
+  .menu-row {
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .menu-row h2,
+  .form-field {
+    margin: 0;
+  }
+
+  .menu-row h2 {
+    border-bottom: 1px solid var(--dark3);
+    border-top: none;
+  }
+
+  .form-field {
+    padding: 10px;
+  }
+
+  .menu-row-content {
+    position: relative;
+    width: 100%;
+  }
+}
diff --git a/src/assets/main.css b/src/assets/main.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/CanvasBoard.vue b/src/components/CanvasBoard.vue
index d196ef8..82074d8 100644
--- a/src/components/CanvasBoard.vue
+++ b/src/components/CanvasBoard.vue
@@ -191,9 +191,3 @@
     :height="store.renderer.height"
   />
 </template>
-<style>
-  #canvas-board {
-    flex: 1;
-    margin: 0 auto;
-  }
-</style>
diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index 438ad72..f0b634b 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -13,30 +13,3 @@
   import MenuElementaryCA from "./MenuElementaryCA.vue";
   import Menu2dCA from "./Menu2dCA.vue";
 </script>
-
-<style>
-  #main-menu {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    flex: 1;
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  #main-menu::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Hide scrollbar for IE, Edge and Firefox */
-  #main-menu {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
-
-  @media screen and (max-width: 800px) {
-    #main-menu {
-      flex-direction: column;
-      position: absolute;
-    }
-  }
-</style>
diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue
index 4a5d7d3..0846116 100644
--- a/src/components/MenuCellProperties.vue
+++ b/src/components/MenuCellProperties.vue
@@ -53,14 +53,3 @@
     </form>
   </MenuRow>
 </template>
-
-<style scoped>
-  a {
-    font-weight: bold;
-    border: 1px solid white;
-    padding: 2px;
-  }
-  a:hover {
-    cursor: pointer;
-  }
-</style>
diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue
index 79ca9e9..b7adc7a 100644
--- a/src/components/MenuElementaryCA.vue
+++ b/src/components/MenuElementaryCA.vue
@@ -105,12 +105,3 @@
     </form>
   </MenuRow>
 </template>
-
-<style>
-  .menu-row a {
-    color: white;
-    font-weight: bold;
-    text-decoration: none;
-    font-size: small;
-  }
-</style>
diff --git a/src/components/MenuReset.vue b/src/components/MenuReset.vue
index d0f1974..c719028 100644
--- a/src/components/MenuReset.vue
+++ b/src/components/MenuReset.vue
@@ -40,11 +40,3 @@
     />
   </div>
 </template>
-
-<style scoped>
-  .reset-menu {
-    display: flex;
-    justify-content: flex-end;
-    padding: 5px;
-  }
-</style>
diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue
index 94dab7d..0051fef 100644
--- a/src/components/MenuRow.vue
+++ b/src/components/MenuRow.vue
@@ -49,81 +49,3 @@
     </div>
   </div>
 </template>
-
-<style>
-  .menu-row h2 {
-    font-size: medium;
-    padding: 10px;
-    cursor: pointer;
-    border-bottom: 1px solid var(--dark3);
-    border-top: 1px solid var(--dark3);
-    margin: 0 0 10px 0;
-  }
-
-  select {
-    margin-top: 10px;
-    padding: 5px;
-  }
-
-  input[type="button"] {
-    min-width: 60px;
-    padding: 5px;
-    font-weight: bold;
-    margin-right: 10px;
-  }
-
-  .form-field {
-    display: flex;
-    margin: 10px;
-    justify-content: space-between;
-  }
-
-  .menu-row {
-    flex: 1;
-    position: relative;
-  }
-
-  .menu-row-content {
-    position: absolute;
-    background: var(--dark1);
-    width: 100%;
-  }
-
-  label,
-  .form-field label {
-    margin-right: 10px;
-    font-weight: bold;
-  }
-
-  @media screen and (max-width: 800px) {
-    .menu-row {
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    .menu-row h2,
-    .form-field {
-      margin: 0;
-    }
-
-    .menu-row h2 {
-      border-bottom: 1px solid var(--dark3);
-      border-top: none;
-    }
-
-    .form-field {
-      padding: 10px;
-    }
-
-    /* .menu-row:active .menu-row-content {
-       display: flex;
-       flex-direction: column;
-       height: 100%;
-       } */
-
-    .menu-row-content {
-      position: relative;
-      width: 100%;
-    }
-  }
-</style>
diff --git a/src/components/preset.js b/src/components/preset.js
deleted file mode 100644
index 0eee491..0000000
--- a/src/components/preset.js
+++ /dev/null
@@ -1,95 +0,0 @@
-const presetRuleset = [
-  {
-    name: "rule 73",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 86",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 0,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 90",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "rule 45?",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 1,
-      111: 0,
-      "011": 1,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-  {
-    name: "rule 54?",
-    rules: {
-      100: 1,
-      101: 0,
-      110: 1,
-      111: 1,
-      "011": 0,
-      "010": 1,
-      "001": 1,
-      "000": 0,
-    },
-  },
-  {
-    name: "unknown rule",
-    rules: {
-      100: 0,
-      101: 0,
-      110: 0,
-      111: 1,
-      "011": 0,
-      "010": 0,
-      "001": 1,
-      "000": 1,
-    },
-  },
-];
-
-const initialStates = [
-  {
-    id: "onecell",
-    name: "One cell at center",
-    description: "State with a single cell in the middle",
-  },
-  {
-    id: "random",
-    name: "Random cell",
-    description: "State populated with random cells",
-  },
-];
-
-export { presetRuleset, initialStates };