diff --git a/src/routes/blag/+page.svelte b/src/routes/blag/+page.svelte
index 0e8e94a..c0ac72b 100644
--- a/src/routes/blag/+page.svelte
+++ b/src/routes/blag/+page.svelte
@@ -1,44 +1,46 @@
 <script lang="javascript">
-	let {data} = $props()
+  let { data } = $props();
 
-	$inspect("b",data)
+  $inspect("b", data);
 </script>
 
 <svelte:head>
-	<title></title>
-	<meta name="description" content="" />
+  <title></title>
+  <meta name="description" content="" />
 </svelte:head>
 
 <section>
-	<h1>I might decide to write sometime</h1>
-	<ol>
-		{#each data.blags as {title, uri, created_at}}
-			<li><a href="blag/{uri}">{title}</a> @ <p>{new Date(created_at).toLocaleDateString()}</p></li>
-		{/each}
-	</ol>
+  <h1>I might decide to write sometime</h1>
+  <ol>
+    {#each data.blags as { title, uri, created_at }}
+      <li>
+        <a href="blag/{uri}">{title}</a> @
+        <p>{new Date(created_at).toLocaleDateString()}</p>
+      </li>
+    {/each}
+  </ol>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
+  section {
+    margin: 1rem auto;
+    min-width: 60rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+      font-size: 1.5rem;
+      text-shadow: 3px 3px 3px var(--primary-8);
+    }
+    ol {
+      list-style: none;
+      padding: 0;
+      li {
+        display: flex;
+        gap: 1rem;
+        justify-content: space-between;
+      }
+    }
+  }
+</style>
 
-	section {
-		margin: 1rem auto;
-		min-width: 60rem;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		h1{
-			font-size: 1.5rem;
-			text-shadow: 3px 3px 3px $green;
-		}
-		ol{
-			list-style: none;
-			padding: 0;
-			li{
-				display: flex;
-				gap: 1rem;
-				justify-content: space-between;
-			}
-		}
-	}
-</style>
\ No newline at end of file
diff --git a/src/routes/blag/[uri]/+page.svelte b/src/routes/blag/[uri]/+page.svelte
index 1745c57..672bdb2 100644
--- a/src/routes/blag/[uri]/+page.svelte
+++ b/src/routes/blag/[uri]/+page.svelte
@@ -22,7 +22,6 @@
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
   section {
     display: flex;
     flex-direction: column;
@@ -38,14 +37,14 @@
       text-align: center;
     }
     :global(hr) {
-      color: $green;
+      color: var(--primary-1);
     }
     :global(blockquote) {
-      background: $green-42;
-      border-left: 1rem solid $green;
+      background: var(--primary-6);
+      border-left: 1rem solid var(--primary-8);
       padding: 0.5rem 1rem;
       &:before {
-        color: $orange;
+        color: var(--secondary-5);
         content: open-quote;
         font-size: 1.5rem;
         line-height: 0.1rem;
@@ -61,4 +60,3 @@
     }
   }
 </style>
-
diff --git a/src/routes/blag/new/+page.svelte b/src/routes/blag/new/+page.svelte
index f2e8e36..17f9ade 100644
--- a/src/routes/blag/new/+page.svelte
+++ b/src/routes/blag/new/+page.svelte
@@ -53,8 +53,6 @@ Regular; hmm double enter gets a new
 </section>
 
 <style lang="scss">
-  @use "/src/app.scss" as *;
-
   section {
     width: 100%;
     display: flex;
@@ -74,9 +72,9 @@ Regular; hmm double enter gets a new
           margin: 1rem 0;
           gap: 1rem;
           input {
-            background: $green-42;
-            color: $yellow;
-            border: solid 3px $green;
+            background: var(--primary-7);
+            color: var(--primary-1);
+            border: solid 3px var(--primary-5);
             border-radius: 5px;
             &:focus-visible {
               outline: none;
@@ -88,10 +86,10 @@ Regular; hmm double enter gets a new
           width: 100%;
           height: 40rem;
           line-height: 1.5;
-          border: 1px solid $green;
+          border: 1px solid var(--primary-7);
           border-radius: 5px;
-          background: $green-42;
-          color: $yellow;
+          background: var(--primary-5);
+          color: var(--primary-1);
           font-family: "Garamond";
           &:focus-visible {
             outline: none;
@@ -100,9 +98,9 @@ Regular; hmm double enter gets a new
         button {
           padding: 0.25rem 0.75rem;
           margin-top: 1rem;
-          background-color: $green-42;
-          color: $yellow;
-          border: solid 3px $green;
+          background-color: var(--primary-5);
+          color: var(--primary-1);
+          border: solid 3px var(--primary-7);
           border-radius: 5px;
           align-self: center;
         }
@@ -119,14 +117,14 @@ Regular; hmm double enter gets a new
         text-align: center;
       }
       :global(hr) {
-        color: $green;
+        color: var(--primary-7);
       }
       :global(blockquote) {
-        background: $green-42;
-        border-left: 1rem solid $green;
+        background: var(--primary-7);
+        border-left: 1rem solid var(--primary-7);
         padding: 0.5rem 1rem;
         &:before {
-          color: $orange;
+          color: var(--secondary-5);
           content: open-quote;
           font-size: 1.5rem;
           line-height: 0.1rem;