diff --git a/src/App.vue b/src/App.vue
index 90d6650..3f23a42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,41 +110,4 @@ export default {
 }
 </script>
 
-<style>
-@tailwind base;
-@tailwind components;
-
-.skip-link:focus {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-#header a {
-  @apply text-white no-underline;
-
-  &:hover,
-  &:focus {
-    @apply underline
-  }
-}
-
-#main a {
-  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
-
-  &:hover,
-  &:focus {
-    @apply text-blue-100 border-solid
-  }
-}
-
-#footer a {
-  @apply text-white no-underline border-b border-dotted border-white;
-
-  &:hover,
-  &:focus {
-    @apply border-none
-  }
-}
-
-@tailwind utilities;
-</style>
+<style src="./css/app.css"/>
diff --git a/src/css/app.css b/src/css/app.css
new file mode 100644
index 0000000..eba734f
--- /dev/null
+++ b/src/css/app.css
@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+
+.skip-link:focus {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+#header a {
+  @apply text-white no-underline;
+
+  &:hover,
+  &:focus {
+    @apply underline
+  }
+}
+
+#main a {
+  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
+
+  &:hover,
+  &:focus {
+    @apply text-blue-100 border-solid
+  }
+}
+
+#footer a {
+  @apply text-white no-underline border-b border-dotted border-white;
+
+  &:hover,
+  &:focus {
+    @apply border-none
+  }
+}
+
+@tailwind utilities;