some styling

_includes/head.njk

@@ -33,4 +33,9 @@
 	<!-- JS -->
 	<script type="module">{% getBundle "js" %}</script>
 	#}
+
+	<!-- Fonts -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 </head>

css/main.css

@@ -1,5 +1,14 @@
 :root {
 	color-scheme: light dark;
+
+	--color-dark: #202325;
+	--color-light: #e4edf3;
+	--color-blue-dark: #0c436d;
+	--color-blue-light: #5ca6ce;
+
+	--color-text: light-dark(var(--color-dark), var(--color-light));
+	--color-bg: light-dark(var(--color-light), var(--color-dark));
+	--color-accent: light-dark(var(--color-blue-dark), var(--color-blue-light));
 }
 
 /* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
@@ -25,6 +34,8 @@ body {
   line-height: 1.5; /* 4. Increase line-height */
   -webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
   font-family: sans-serif;
+  color: var(--color-text);
+  background-color: var(--color-bg);
 }
 
 #content {
@@ -65,6 +76,10 @@ h1, h2, h3, h4, h5, h6 {
   text-wrap: balance; /* 9. Improve line wrapping */
   font-family: serif;
   margin-block-start: 1em;
+  color: var(--color-accent);
+  font-variant: small-caps;
+  font-family: Montserrat;
+  font-weight: 400;
 }
 
 h1 {