diff --git a/src/_layouts/base.html b/src/_layouts/base.html
index da6eab5..1ece10f 100644
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -17,13 +17,6 @@
                   href="{{ preload.href }}"
                   {% if preload.crossorigin %}crossorigin{% endif %} />
         {% endfor %}
-        {% set css %}
-            {% include "css/colorVariables.njk" %}
-            {% include "css/fontFace.njk" %}
-            {% include "css/fontVariables.njk" %}
-            {% include "css/spacing.njk" %}
-        {% endset %}
-        <style>{{ css | minifyCss | safe }}</style>
         {% if youtube %}
             <!-- youtube, if true in frontmatter -->
             <script type="module"
diff --git a/src/css/styles.11ty.js b/src/css/styles.11ty.js
index 709fbf0..7d8f71a 100644
--- a/src/css/styles.11ty.js
+++ b/src/css/styles.11ty.js
@@ -13,15 +13,22 @@ const autoprefixer = require("autoprefixer");
 const cssnano = require("cssnano");
 const path = require("path").posix;
 
+const colors = require("../css-utils/colors");
+const fontFamily = require("../css-utils/font-family");
+const fontVariables = require("../css-utils/font-variables");
+const spacing = require("../css-utils/spacing");
+
 module.exports = class {
   async data() {
     const rawFilepath = path.join(__dirname, "./global.css");
     const rawCss = fs.readFileSync(rawFilepath);
 
+    const css = `${rawCss}${fontFamily}${fontVariables}${colors}${spacing}`;
+
     return {
       permalink: `css/styles.css`,
       rawFilepath,
-      rawCss,
+      rawCss: css,
     };
   }