diff --git a/; b/;
deleted file mode 100644
index 4cc9b79..0000000
--- a/;
+++ /dev/null
@@ -1,205 +0,0 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
-  interface Pork {
-    pork: {
-      name: string;
-      cured: boolean;
-      tubed: boolean;
-      lb_package: boolean;
-      flavors: String[];
-      avg_weight: {
-        min: number;
-        max: number;
-      };
-    };
-  }
-
-  onMount(async () => {
-    const images = import.meta.glob("$lib/assests/*.jpg", {
-      eager: true,
-      query: { enhanced: true },
-    });
-    console.log(images);
-  });
-</script>
-
-<svelte:head>
-  <title>Sludge Farm Pork</title>
-  <meta
-    name="description"
-    content="Please buy some Pork, it tastes good I swear"
-  />
-</svelte:head>
-
-<section>
-  <h1><b>F</b>arm Raised Pork</h1>
-  <h5>this ain't your grocery store's pork</h5>
-  <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
-  <div id="pork">
-    {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
-      <card id={name}>
-        <h3>{name}</h3>
-        {#if src != undefined}
-          <img {src} alt="A photo of {name}" />
-        {:else}
-          <hr />
-        {/if}
-        <div>
-          {#if cured}
-            <span>Cured!</span>
-          {/if}
-          {#if tubed}
-            <span>Tubed!</span>
-          {/if}
-          <p>
-            Weight:
-            {#if lb_package}
-              1 lb
-            {:else}
-              {avg_weight.min}~ {avg_weight.max} lbs
-            {/if}
-          </p>
-        </div>
-
-        {#if flavors != undefined}
-          <ul>
-            <li>Flavors:</li>
-            {#each flavors as flavor}
-              <li>
-                {flavor}
-              </li>
-            {/each}
-          </ul>
-        {/if}
-      </card>
-    {/each}
-    <!-- <img -->
-    <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
-    <!--   alt={`Image of a ${selected}`} -->
-    <!-- /> -->
-  </div>
-</section>
-
-<style lang="scss">
-  b {
-    font-family: "Initials";
-    font-weight: 100;
-    color: var(--secondary-5);
-  }
-
-  section {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    h1 {
-      font-family: "Initials";
-      color: var(--secondary-3);
-      text-align: center;
-      font-size: 2.5rem;
-      font-weight: 500;
-      text-shadow: 3px 3px 3px var(--primary-8);
-    }
-    h5 {
-      font-size: 0.75rem;
-      color: var(--primary-8);
-    }
-
-    // img {
-    //   display: none;
-    // }
-  }
-  #pork {
-    display: flex;
-    flex-direction: column;
-    font-size: 1rem;
-    gap: 1rem;
-    width: 100%;
-    card {
-      background: var(--secondary-9);
-      border-radius: var(--br);
-      padding: 1rem;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      position: relative;
-      img {
-        width: 100%;
-        border-radius: var(--br);
-      }
-      hr {
-        height: 1rem;
-        color: var(--secondary-9);
-        width: 1rem;
-      }
-      div {
-        display: flex;
-        justify-content: space-around;
-        font-size: 0.75rem;
-      }
-      span {
-        // font-size: 0.75rem;
-        background: var(--primary-5);
-        color: var(--primary-10);
-        font-weight: 900;
-        width: fit-content;
-        border-radius: var(--br);
-        padding: 0.125rem 0.325rem;
-      }
-      h3 {
-        position: absolute;
-        background: var(--secondary-9);
-        border-radius: 0 0 var(--br) 0;
-        padding: 0.25rem 0.5rem;
-        top: 1rem;
-        text-transform: capitalize;
-        color: var(--primary-5);
-      }
-    }
-
-    ul {
-      font-size: 0.85rem;
-      width: 100%;
-      display: inherit;
-      flex-direction: column;
-      list-style: none;
-      li {
-        display: inherit;
-        gap: 1rem;
-        padding-left: 1rem;
-        text-transform: capitalize;
-        &:nth-child(even) {
-          background: var(--primary-8);
-        }
-        &:not(:first-child):hover {
-          background: var(--primary-10);
-        }
-      }
-    }
-  }
-
-  @media screen and (min-width: 640px) {
-    #pork {
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-around;
-      card {
-        flex-basis: 20rem;
-        // align-items: center;
-        justify-content: center;
-      }
-    }
-    // img {
-    //   display: unset !important;
-    //   width: 50%;
-    //   height: fit-content;
-    //   border-radius: 0.375rem;
-    //   text-align: center;
-    //   align-self: center;
-    // }
-  }
-</style>
diff --git a/src/app.scss b/src/app.scss
deleted file mode 100644
index 86b2c91..0000000
--- a/src/app.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-$blue: oklch(0.76 0.0358 233.23);
-$yellow: oklch(0.84 0.123 100);
-$orange: oklch(0.76 0.239 65);
-$brown: oklch(0.36 0.042 42);
-$green: oklch(0.22 0.0211 174);
-$green-42: oklch(0.42 0.042 142);
-
diff --git a/src/styles/functions.scss b/src/styles/functions.scss
new file mode 100644
index 0000000..41959b4
--- /dev/null
+++ b/src/styles/functions.scss
@@ -0,0 +1,4 @@
+@use 'sass:color';
+@function transparent($color, $opacity: 75%) {
+  @return color-mix(in oklch, $color, transparent $opacity);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..e69de29
diff --git a/vite.config.js b/vite.config.js
index 0815516..d58e83b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,24 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
-	plugins: [sveltekit()],
-	server:{
-		port: 4242
-	}
+  plugins: [sveltekit()],
+  server: {
+    port: 4242
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern',
+        additionalData: `
+          @use "${join(currentDir, './src/styles/functions')}" as *;
+          @use "${join(currentDir, './src/styles/variables')}" as *;
+        `
+      }
+    }
+  }
 });