diff --git a/index.pug b/index.pug
index 3cd3699..c877fd7 100644
--- a/index.pug
+++ b/index.pug
@@ -3,85 +3,8 @@ html(lang="en-gb")
     head
         meta(content="text/html;charset=utf-8" http-equiv="Content-Type")
         title mixsy
-        style.
-            :root {
-                --bg: #ed9f96;
-                --alt: #dc4c6b;
-                --inverse: #444;
-                --text: #7be5b3;
-            }
-
-            * {
-                box-sizing: border-box;
-                color: var(--text);
-                font-family: sans-serif;
-            }
-
-            html, body {
-                background-color: var(--bg);
-                margin: 0;
-                padding: 0;
-            }
-
-            button {
-                background-color: var(--text);
-                border: 0;
-                border-radius: 2.5vmin;
-                color: var(--alt);
-                cursor: pointer;
-                display: block;
-                font-size: 5vmin;
-            }
-
-            h1, p {
-                margin: 0;
-                text-align: center;
-            }
-
-            h1 {
-                font-size: 10vmin;
-            }
-
-            h2 {
-                font-size: 5vmin;
-                margin: 0;
-                text-align: center;
-            }
-
-            textarea {
-                background-color: var(--inverse);
-                border: 0;
-                color: var(--text);
-                font-family: monospace;
-                height: 17vmin;
-                width: 100%;
-            }
-
-            #container {
-                background-color: var(--alt);
-                border-radius: 5vmin;
-                height: 100vmin;
-                width: 100vmin;
-            }
-
-            .centre {
-                margin: 0 auto;
-            }
-
-            .left {
-                float: left;
-            }
-
-            .row {
-                width: 100%;
-                height: calc(82vmin / 3);
-            }
-
-            .square {
-                width: 50vmin;
-                height: 100%;
-                padding: 0.5em;
-            }
+        style
+            include style.css
     body
         #container.centre
             h1 mixsy
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a439b2a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,79 @@
+:root {
+    --bg: #ed9f96;
+    --alt: #dc4c6b;
+    --inverse: #444;
+    --text: #7be5b3;
+}
+
+* {
+    box-sizing: border-box;
+    color: var(--text);
+    font-family: sans-serif;
+}
+
+html, body {
+    background-color: var(--bg);
+    margin: 0;
+    padding: 0;
+}
+
+button {
+    background-color: var(--text);
+    border: 0;
+    border-radius: 2.5vmin;
+    color: var(--alt);
+    cursor: pointer;
+    display: block;
+    font-size: 5vmin;
+}
+
+h1, p {
+    margin: 0;
+    text-align: center;
+}
+
+h1 {
+    font-size: 10vmin;
+}
+
+h2 {
+    font-size: 5vmin;
+    margin: 0;
+    text-align: center;
+}
+
+textarea {
+    background-color: var(--inverse);
+    border: 0;
+    color: var(--text);
+    font-family: monospace;
+    height: 17vmin;
+    padding: 0.5em;
+    width: 100%;
+}
+
+#container {
+    background-color: var(--alt);
+    border-radius: 5vmin;
+    height: 100vmin;
+    width: 100vmin;
+}
+
+.centre {
+    margin: 0 auto;
+}
+
+.left {
+    float: left;
+}
+
+.row {
+    width: 100%;
+    height: calc(82vmin / 3);
+}
+
+.square {
+    width: 50vmin;
+    height: 100%;
+    padding: 0.5em;
+}
\ No newline at end of file