diff --git a/blog.css b/blog.css
index 334cb1d..cbb0232 100644
--- a/blog.css
+++ b/blog.css
@@ -1,5 +1,5 @@
 a[href="./rss.xml"]:hover {
-    color: var(--ayu-error) !important;
+    color: var(--red) !important;
 }
 
 /* article cards styling */
@@ -16,7 +16,7 @@ a[href="./rss.xml"]:hover {
         }
 
         h3 a {
-            color: var(--ayu-e-fg);
+            color: var(--foreground);
             text-decoration: unset;
         }
 
@@ -45,8 +45,8 @@ a[href="./rss.xml"]:hover {
     }
 
     .wip {
-        background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent);
-        color: var(--ayu-s-special);
+        background-color: color-mix(in srgb, var(--yellow) 20%, transparent);
+        color: var(--yellow);
         padding: .2rem;
         border-radius: 5px;
     }
diff --git a/blog/index.html b/blog/index.html
index 29b3fe1..d564487 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -29,7 +29,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -97,11 +97,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/colors.css b/colors.css
index 79f63de..9c3b948 100644
--- a/colors.css
+++ b/colors.css
@@ -1,99 +1,97 @@
-/* i use ayu since i feel like it fits the theme better
-https://raw.githubusercontent.com/ayu-theme/ayu-colors
-for a quick ref/cheatsheet try https://raw.githubusercontent.com/ayu-theme/ayu-colors/refs/heads/master/colors.svg
-(only works in chromium for some reason)
+/*
 
-and also:
+custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
+it's basically a mix and mash of the both of them together, and slightly modified.
+it doesn't have a name, call it "synth.download color scheme official real"
 
---ayu-s-tag for blue
---ayu-v-added for green
---ayu-s-constant for purple
---ayu-s-keyword for orange
---ayu-s-special for yellow
---ayu-s-markup OR --ayu-error for red
-
---ayu-e-bg AND --ayu-ui-fg used for "regular" viewing colors, otherwise use
---ayu-ui-fg AND --ayu-ui-bg for more "unimportant" sections
---ayu-uip-bg can be used as a "subbackground" color of sorts
---ayu-accent for the "accent" yellow, used for the "branding"
 */
 
-@media (prefers-color-scheme: light) {
-    /* ayu light */
-    :root {
-        --ayu-s-tag: #55B4D4;
-        --ayu-s-func: #F2AE49;
-        --ayu-s-entity: #399EE6;
-        --ayu-s-string: #86B300;
-        --ayu-s-regexp: #4CBF99;
-        --ayu-s-markup: #F07171;
-        --ayu-s-keyword: #FA8D3E;
-        --ayu-s-special: #E6BA7E;
-        --ayu-s-comment: #787B8099;
-        --ayu-s-constant: #A37ACC;
-        --ayu-s-operator: #ED9366;
-        --ayu-v-added: #6CBF43;
-        --ayu-v-modified: #478ACC;
-        --ayu-v-removed: #FF7383;
-        --ayu-e-fg: #5C6166;
-        --ayu-e-bg: #FCFCFC;
-        --ayu-e-line: #8A91991A;
-        --ayu-es-active: #035BD626;
-        --ayu-es-inactive: #035BD612;
-        --ayu-efm-active: #9F40FF2B;
-        --ayu-efm-inactive: #9F40FFCC;
-        --ayu-eg-active: #8A9199CC;
-        --ayu-eg-normal: #8A919966;
-        --ayu-eig-active: #8A919959;
-        --ayu-eig-normal: #8A91992E;
-        --ayu-ui-fg: #8A9199;
-        --ayu-ui-bg: #F8F9FA;
-        --ayu-ui-line: #6B7D8F1F;
-        --ayu-uis-active: #56728F1F;
-        --ayu-uis-normal: #6B7D8F1F;
-        --ayu-uip-bg: #F3F4F5;
-        --ayu-uip-shadow: #00000026;
-        --ayu-accent: #FFAA33;
-        --ayu-error: #E65050;
-    }
+:root {
+    /* base colors */
+    --background: #fafafa;
+    --foreground: #3d454d;
+    --selection: #f0eee4;
+    --comment: #abb0b6;
+    --accent: #ffaa33;
+
+    /* original ayu colors */
+    --orange: #ff9940;
+    --green: #86b300;
+    --blue: #4cbf99;
+    --purple: #a37acc;
+    --red: #f34646;
+
+    /* extended catppuccin based colors */
+    --flamingo: #ff7d7d;
+    --rosewater: #ffbfb3;
+    --pink: #ff8adb;
+    --mauve: #ba8aff;
+    --maroon: #e06c75;
+    --peach: #ffac6b;
+    --yellow: #e5c07b;
+    --teal: #2bbac5;
+    --sky: #3eacce;
+    --sapphire: #4db5d0;
+    --lavender: #a9b1ff;
+
+    /* ui accent colors */
+    --ui-orange: #fa8d3e;
+    --ui-green: #91b362;
+    --ui-blue: #6994bf;
+    --ui-purple: #7e57c2;
+    --ui-teal: #56c2c0;
+    --ui-lavender: #9d8cdb;
+
+    /* misc. */
+    --border: #e4e4e4;
+    --shadow: rgba(0, 0, 0, 0.1);
+    --hover: rgba(0, 0, 0, 0.05);
+    --active: rgba(0, 0, 0, 0.1);
+    --focus: #86b300;
 }
 
 @media (prefers-color-scheme: dark) {
-    /* ayu dark */
     :root {
-        --ayu-s-tag: #39BAE6;
-        --ayu-s-func: #FFB454;
-        --ayu-s-entity: #59C2FF;
-        --ayu-s-string: #AAD94C;
-        --ayu-s-regexp: #95E6CB;
-        --ayu-s-markup: #F07178;
-        --ayu-s-keyword: #FF8F40;
-        --ayu-s-special: #E6B673;
-        --ayu-s-comment: #ACB6BF8C;
-        --ayu-s-constant: #D2A6FF;
-        --ayu-s-operator: #F29668;
-        --ayu-v-added: #7FD962;
-        --ayu-v-modified: #73B8FF;
-        --ayu-v-removed: #F26D78;
-        --ayu-e-fg: #BFBDB6;
-        --ayu-e-bg: #0D1017;
-        --ayu-e-line: #131721;
-        --ayu-es-active: #409FFF4D;
-        --ayu-es-inactive: #409FFF21;
-        --ayu-efm-active: #6C5980;
-        --ayu-efm-inactive: #6C598066;
-        --ayu-eg-active: #6C7380E6;
-        --ayu-eg-normal: #6C738099;
-        --ayu-eig-active: #6C738080;
-        --ayu-eig-normal: #6C738033;
-        --ayu-ui-fg: #565B66;
-        --ayu-ui-bg: #0B0E14;
-        --ayu-ui-line: #11151C;
-        --ayu-uis-active: #47526640;
-        --ayu-uis-normal: #47526633;
-        --ayu-uip-bg: #0F131A;
-        --ayu-uip-shadow: #00000080;
-        --ayu-accent: #E6B450;
-        --ayu-error: #D95757;
+        /* base colors */
+        --background: #0a0e14;
+        --foreground: #b3b1ad;
+        --selection: #253340;
+        --comment: #5c6773;
+        --accent: #e6b450;
+        
+        /* original ayu colors */
+        --orange: #ffb454;
+        --green: #aad94c;
+        --blue: #59c2ff;
+        --purple: #d2a6ff;
+        --red: #f07178;
+
+        /* extended catppuccin based colors */
+        --flamingo: #f2cdcd;
+        --rosewater: #f5e0dc;
+        --pink: #ffc9e3;
+        --mauve: #cba6f7;
+        --maroon: #eba0ac;
+        --peach: #ffcca8;
+        --yellow: #f9e2af;
+        --teal: #8ddedc;
+        --sky: #89dceb;
+        --sapphire: #74c7ec;
+        --lavender: #b4befe;
+
+        /* ui accent colors */
+        --ui-orange: #e6b450;
+        --ui-green: #aad94c;
+        --ui-blue: #39bae6;
+        --ui-purple: #a37acc;
+        --ui-teal: #7adbd3;
+        --ui-lavender: #ada0f3;
+
+        /* misc. */
+        --border: #1a1f29;
+        --shadow: rgba(0, 0, 0, 0.4);
+        --hover: rgba(255, 255, 255, 0.05);
+        --active: rgba(255, 255, 255, 0.1);
+        --focus: #ffb454;
     }
 }
\ No newline at end of file
diff --git a/donate/index.html b/donate/index.html
index 9e3a73b..729d9ef 100644
--- a/donate/index.html
+++ b/donate/index.html
@@ -28,7 +28,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -79,7 +79,7 @@
 
     <section>
         <p>hi! i'm <a href="/me">ruben</a>. currently just a student running synth.download in my spare time because i like doing so.</p>
-        <p>if you'd like to donate, you may choose so through either <a href="https://ko-fi.com/sneexy" style="padding: .2rem; color: var(--ayu-s-constant); background-color: color-mix(in srgb, var(--ayu-s-constant) 20%, transparent); border-radius: .2rem;">ko-fi</a>, or directly donate to me via the widget below:</p>
+        <p>if you'd like to donate, you may choose so through either <a href="https://ko-fi.com/sneexy" style="padding: .2rem; color: var(--sapphire); background-color: color-mix(in srgb, var(--sapphire) 20%, transparent); border-radius: .2rem;">ko-fi</a> or directly donate to me via stripe with the widget below:</p>
         <stripe-buy-button buy-button-id="buy_btn_1R9UrrGPbe5QWVnnm6jC3XUf" publishable-key="pk_live_51QFpvEGPbe5QWVnnCUUlT1nEYhVy2F4z30BVaG3LHD8o4qNc7IL67QcPUzBUeptEYpFOtYs6Jc1GvM3ujqsFltYb00oUvMTDMM"></stripe-buy-button>
         <p>please don't feel like you need to donate. currently, i am able to pay things on my own, but donations do help. <span aria-hidden="true">^^</span></p>
     </section>
@@ -97,11 +97,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/home.css b/home.css
index a4bf482..22a14b9 100644
--- a/home.css
+++ b/home.css
@@ -36,10 +36,10 @@
             }
         }
         div:first-child {
-            background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent);
+            background-color: color-mix(in srgb, var(--yellow) 20%, transparent);
         }
         div:last-child {
-            background-color: color-mix(in srgb, var(--ayu-s-constant) 20%, transparent);
+            background-color: color-mix(in srgb, var(--sapphire) 20%, transparent);
             margin-left: 1.5em;
         }
     }
@@ -95,13 +95,13 @@
     margin-left: auto;
     margin-right: auto;
 
-    border: var(--ayu-accent) solid .15rem !important;
+    border: var(--accent) solid .15rem !important;
     border-radius: .6rem;
     transition: .2s box-shadow;
 }
 
 #links > section > iframe:hover {
-    box-shadow: var(--ayu-accent) 0px 0px 0px .3rem;
+    box-shadow: var(--accent) 0px 0px 0px .3rem;
     transition: .2s box-shadow;
 }
 
diff --git a/index.html b/index.html
index 92fdc36..5d68369 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -83,12 +83,12 @@
         <p>most services here are public facing, anything that requires registration is most likely only for friends of mine.</p>
         <p>we currently run...</p>
         <ul style="max-width: fit-content; margin-left: auto; margin-right: auto;">
-            <li><a href="https://reddit.synth.download" style="padding: .2rem; color: var(--ayu-s-markup); background-color: color-mix(in srgb, var(--ayu-s-markup) 20%, transparent); border-radius: .2rem;">redlib</a>, a simple frontend for reddit,</li>
-            <li><a href="https://forged.synth.download" style="padding: .2rem; color: var(--ayu-s-special); background-color: color-mix(in srgb, var(--ayu-s-special) 20%, transparent); border-radius: .2rem;">forgejo</a>, a home for git repositories,</li>
-            <li><a href="https://beeping.synth.download" style="padding: .2rem; color: var(--ayu-s-tag); background-color: color-mix(in srgb, var(--ayu-s-tag) 20%, transparent); border-radius: .2rem;">iceshrimp</a>, a microblogging based fediverse <small>(activitypub)</small>  software with many features,</li>
-            <li><a href="https://booping.synth.download" style="padding: .2rem; color: var(--ayu-s-entity); background-color: color-mix(in srgb, var(--ayu-s-entity) 20%, transparent); border-radius: .2rem;">sharkey</a>, another microblogging based fediverse <small>(activitypub)</small> software with many features, based off of <a href="https://misskey-hub.net">misskey</a>,</li>
-            <li><a href="https://asking.synth.download" style="padding: .2rem; color: var(--ayu-s-constant); background-color: color-mix(in srgb, var(--ayu-s-constant) 20%, transparent); border-radius: .2rem;">ask-js</a>, a platform for asking other users questions,</li>
-            <li><small><a href="https://adarkroom.synth.download" style="padding: .2rem; color: var(--ayu-e-fg); background-color: color-mix(in srgb, var(--ayu-e-fg) 10%, transparent); border-radius: .2rem;">a dark room</a>, a text adventure game.</small></li>
+            <li><a href="https://reddit.synth.download" style="padding: .2rem; color: var(--red); background-color: color-mix(in srgb, var(--red) 20%, transparent); border-radius: .2rem;">redlib</a>, a simple frontend for reddit,</li>
+            <li><a href="https://forged.synth.download" style="padding: .2rem; color: var(--yellow); background-color: color-mix(in srgb, var(--yellow) 20%, transparent); border-radius: .2rem;">forgejo</a>, a home for git repositories,</li>
+            <li><a href="https://beeping.synth.download" style="padding: .2rem; color: var(--blue); background-color: color-mix(in srgb, var(--blue) 20%, transparent); border-radius: .2rem;">iceshrimp</a>, a microblogging based fediverse <small>(activitypub)</small>  software with many features,</li>
+            <li><a href="https://booping.synth.download" style="padding: .2rem; color: var(--ui-teal); background-color: color-mix(in srgb, var(--ui-teal) 20%, transparent); border-radius: .2rem;">sharkey</a>, another microblogging based fediverse <small>(activitypub)</small> software with many features, based off of <a href="https://misskey-hub.net">misskey</a>,</li>
+            <li><a href="https://asking.synth.download" style="padding: .2rem; color: var(--sapphire); background-color: color-mix(in srgb, var(--sapphire) 20%, transparent); border-radius: .2rem;">ask-js</a>, a platform for asking other users questions,</li>
+            <li><small><a href="https://adarkroom.synth.download" style="padding: .2rem; color: var(--foreground); background-color: color-mix(in srgb, var(--foreground) 10%, transparent); border-radius: .2rem;">a dark room</a>, a text adventure game.</small></li>
         </ul>
     </section>
 </details>
@@ -110,7 +110,7 @@
     </summary>
 
     <section>
-        <span style="color: var(--ayu-error);">if any are broken and/or missing, poke me.</span>
+        <span style="color: var(--red);">if any are broken and/or missing, poke me.</span>
         <p style="text-align: center;">friends!</p>
         <div class="buttons">
             <a href="https://23sonics.zone"><img src="/assets/buttons/friends/23sonics.gif" alt="23Sonics"></a>
@@ -205,7 +205,7 @@
             <img src="/assets/buttons/random/tucows.gif" alt="Tucows">
             <img src="/assets/buttons/random/yoshilore.gif" alt="Yoshi Lore">
         </div>
-        <p style="text-align: center;"><small><span style="color: var(--ayu-v-added);">me!</span> (click to copy html)</small></p>
+        <p style="text-align: center;"><small><span style="color: var(--green);">me!</span> (click to copy html)</small></p>
         <div class="buttons">
             <button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSynthDownload()">
                 <img src="/assets/buttons/synth.download.svg" alt="Synth.Download!">
@@ -229,11 +229,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/me/dni/index.html b/me/dni/index.html
index e24b16a..52b2614 100644
--- a/me/dni/index.html
+++ b/me/dni/index.html
@@ -27,7 +27,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -98,10 +98,10 @@
         <p><b>instances that i look out for:</b></p>
         <ul>
             <li>
-                mastodon.social, mastodon.online, mas.to, and most other large "general" mastodon instances are <span style="color:var(--ayu-error);">ignored</span>
+                mastodon.social, mastodon.online, mas.to, and most other large "general" mastodon instances are <span style="color:var(--red);">ignored</span>
             </li>
             <li>
-                hachyderm.io, fosstodon.org, floss.social and most "foss supporting" instances are <span style="color:var(--ayu-s-special);">discouraged</span>
+                hachyderm.io, fosstodon.org, floss.social and most "foss supporting" instances are <span style="color:var(--yellow);">discouraged</span>
             </li>
             <li>
                 transfem.social and woem.men go though heavy vibe checking
@@ -124,11 +124,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/me/index.html b/me/index.html
index be86ed4..b9abb60 100644
--- a/me/index.html
+++ b/me/index.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <title>me @ synth download!</title>
     <link rel="icon" type="image/png" href="/assets/favicon.png">
+    <link rel="stylesheet" type="text/css" href="/colors.css">
     <link rel="stylesheet" type="text/css" href="/ruben.css">
     <link rel="stylesheet" type="text/css" href="/font.css">
     <link rel="stylesheet" type="text/css" href="/tabler.css">
@@ -29,7 +30,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -90,19 +91,19 @@
             <div style="grid-area: pronouns;">
                 <p>pronouns</p>
                 <ul>
-                    <li style="color: var(--ayu-v-added);"><span class="tabler--thumb-up" alt="preferred!"></span> he/him</li>
-                    <li style="color: var(--ayu-v-added);"><span class="tabler--thumb-up" alt="preferred!"></span> it/its</li>
+                    <li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> he/him</li>
+                    <li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> it/its</li>
                     <li><span class="tabler--thumb-up" alt="acceptable,"></span> they/them</li>
-                    <li style="color: var(--ayu-error);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> anything else</small></li>
+                    <li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> anything else</small></li>
                 </ul>
             </div>
             <div style="grid-area: names;">
                 <p>names</p>
                 <ul>
-                    <li style="color: var(--ayu-v-added);"><span class="tabler--thumb-up" alt="preferred!"></span> ruben</li>
+                    <li style="color: var(--green);"><span class="tabler--thumb-up" alt="preferred!"></span> ruben</li>
                     <li><span class="tabler--thumb-up" alt="acceptable,"></span> sneexy, sneex*</li>
-                    <li style="color: var(--ayu-s-special);"><small><span class="tabler--user-heart" alt="only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> rube, rubie (ruby)</small></li>
-                    <li style="color: var(--ayu-error);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> variations/anything else</small></li>
+                    <li style="color: var(--yellow);"><small><span class="tabler--user-heart" alt="only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> rube, rubie (ruby)</small></li>
+                    <li style="color: var(--red);"><small><span class="tabler--thumb-down" alt="unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> variations/anything else</small></li>
                 </ul>
             </div>
         </div>
@@ -132,7 +133,7 @@
         <p>i'm a nerd into <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">free and open source</a> software and privacy stuff. i'm not a programmer or some IT guy or anything, though. i've tried, didn't work out.</p>
         <p>also a nerd into <a href="https://www.redhat.com/en/topics/linux/what-is-linux">Linux</a> stuff, mostly touched <a href="https://archlinux.org">Arch</a> and a little bit of <a href="https://nixos.org">NixOS</a> but have found to stuck with <a href="https://fedoraproject.org">Fedora</a>.</p>
         <p>enthusiast in open, <a href="https://en.wikipedia.org/wiki/Decentralization">decentralized</a> and <a href="https://www.techopedia.com/definition/2500/federation">federated</a> projects, networks or services. favorites include the <a href="https://fediverse.info">fediverse</a>, <a href="https://atproto.com">atproto</a> and <a href="https://listenbrainz.org">listenbrainz</a>.</p>
-        <p>i <i>absolutely</i> despise corporations and capitalism with every single fiber in my living synthentic body <span class="tabler--heart" style="background-color: var(--ayu-error) !important;"></span>
+        <p>i <i>absolutely</i> despise corporations and capitalism with every single fiber in my living synthentic body <span class="tabler--heart" style="background-color: var(--red) !important;"></span>
         <p>very much a furry connoisseur and into other beings like protogens and other fellow synths. <small>being a human fucking SUCKS.</small></p>
         <p>Certified™ idiot <small>(i think this one is obvious)</small></p>
         <p>usually pretty tired and sometimes full of ideas that i just can't bring myself to execute.</p>
@@ -160,14 +161,14 @@
         <h2><a href="#links">links</a></h2>
         <p>my links to all of my public facing socials and contacts. if i know you well, you may ask me for anything more private, like signal or matrix, etc. <small>fastest way to get this is by checking my pinned post if you follow me/we're mutuals on fedi.</small></span></p>
         <div class="socials-contacts-list">
-            <a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--ayu-s-operator) 25%, transparent); color: var(--ayu-s-operator);" alt="Fediverse/Mastodon"><span class="tabler--universe" style="pointer-events: none;"></span></a>
-            <a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--ayu-s-entity) 25%, transparent); color: var(--ayu-s-entity);" alt="Fediverse/Mastodon" aria-hidden="true"><span class="tabler--brand-mastodon" style="pointer-events: none;"></span></a>
-            <a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--ayu-error) 25%, transparent); color: var(--ayu-error);" alt="Email"><span class="tabler--mail" style="pointer-events: none;"></span></a>
-            <a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--ayu-s-constant) 25%, transparent); color: var(--ayu-s-constant);" alt="ListenBraniz"><span class="tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
-            <a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--ayu-error) 25%, transparent); color: var(--ayu-error);" alt="Last.fm"><span class="tabler--brand-lastfm" style="pointer-events: none;"></span></a>
-            <a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="Git"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-            <a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--ayu-s-regexp) 25%, transparent); color: var(--ayu-s-regexp);" alt="GitHub"><span class="tabler--brand-github" style="pointer-events: none;"></span></a>
-            <a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--ayu-e-fg) 25%, transparent); color: var(--ayu-e-fg);" alt="Internet Archive"><span class="tabler--building-bank" style="pointer-events: none;"></span></a>
+            <a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" alt="Fediverse/Mastodon"><span class="tabler--universe" style="pointer-events: none;"></span></a>
+            <a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" alt="Fediverse/Mastodon" aria-hidden="true"><span class="tabler--brand-mastodon" style="pointer-events: none;"></span></a>
+            <a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" alt="Email"><span class="tabler--mail" style="pointer-events: none;"></span></a>
+            <a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="ListenBraniz"><span class="tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
+            <a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" alt="Last.fm"><span class="tabler--brand-lastfm" style="pointer-events: none;"></span></a>
+            <a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="Git"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+            <a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" alt="GitHub"><span class="tabler--brand-github" style="pointer-events: none;"></span></a>
+            <a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" alt="Internet Archive"><span class="tabler--building-bank" style="pointer-events: none;"></span></a>
         </div>
         <p><span class="tabler--corner-down-right"></span> you may observe my <small>somewhat public</small> fediverse activity below:</p>
         <iframe src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
@@ -215,11 +216,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/me/ruben/index.html b/me/ruben/index.html
index 6d3fcb6..d71d456 100644
--- a/me/ruben/index.html
+++ b/me/ruben/index.html
@@ -26,7 +26,7 @@
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><span class="tabler--grid-dots"></span> synth download!</a>
     <details class="nav-base nav-baselink-mobile">
-        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--ayu-e-bg) !important;"></div> d!</summary>
+        <summary><span class="tabler--grid-dots"></span> s <div class="dot" style="background-color: var(--background) !important;"></div> d!</summary>
         <ul>
             <li>
                 <a href="/"><span class="tabler--home"></span> home</a>
@@ -131,22 +131,22 @@
         <p>his goo is reactive with his mood and can change colors along with the accents on his system and emits different scents as well. it's also edible! with different flavors depending on the mood.</p>
         <ul>
             <li>
-                <b>neutral/happy</b> is a <span style="color: var(--ayu-v-added);">green-ish</span> color, and tastes similar to a mint flavor.
+                <b>neutral/happy</b> is a <span style="color: var(--green);">green-ish</span> color, and tastes similar to a mint flavor.
             </li>
             <li>
-                <b>angry/ticked off</b> is <span style="color: var(--ayu-error);">red</span>, and tastes similar to a cooked cayenne pepper, although not as spicy. he can also get somewhat warm in this mood.
+                <b>angry/ticked off</b> is <span style="color: var(--red);">red</span>, and tastes similar to a cooked cayenne pepper, although not as spicy. he can also get somewhat warm in this mood.
             </li>
             <li>
-                <b>sad/disappointed</b> is a <span style="color: var(--ayu-s-entity);">blue-ish</span> grey color, having an "undescribable" flavor by others, but causes those to taste it feeling somewhat gloomy themselves.
+                <b>sad/disappointed</b> is a <span style="color: var(--teal);">blue-ish</span> grey color, having an "undescribable" flavor by others, but causes those to taste it feeling somewhat gloomy themselves.
             </li>
             <li>
-                <b>excited/shocked/embarassed</b> is <span style="color: var(--ayu-s-special);">yellow</span>, it tastes like pineapple and getting close to the goo can feel similar to getting up close to a CRT television.
+                <b>excited/shocked/embarassed</b> is <span style="color: var(--yellow);">yellow</span>, it tastes like pineapple and getting close to the goo can feel similar to getting up close to a CRT television.
             </li>
             <li>
-                <b>love</b> is a <span style="color: var(--ayu-s-constant);">purple-ish</span> color, and tastes similarly to a mixed berry smoothie. he warms up around others in this mood as well.
+                <b>love</b> is a <span style="color: var(--sapphire);">purple-ish</span> color, and tastes similarly to a mixed berry smoothie. he warms up around others in this mood as well.
                 <ul>
                     <li>
-                        a more <i>"extreme"</i> lovey mood results in a more <span style="color: var(--ayu-s-constant);">hot pink-ish</span> like color, tasting more like a strawberry smoothie and incrdibly warm.
+                        a more <i>"extreme"</i> lovey mood results in a more <span style="color: var(--sapphire);">hot pink-ish</span> like color, tasting more like a strawberry smoothie and incrdibly warm.
                     </li>
                 </ul>
             </li>
@@ -200,11 +200,11 @@
             <p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" alt="Previous"><span class="tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" alt="Next"><span class="tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
             <section class="inner-footer">
-                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--ayu-s-string) 25%, transparent); color: var(--ayu-s-string);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
-                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--ayu-accent) 25%, transparent); color: var(--ayu-accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
-                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent); color: var(--ayu-s-tag);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
-                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--ayu-v-added) 25%, transparent); color: var(--ayu-v-added);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
-                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--ayu-v-removed) 25%, transparent); color: var(--ayu-v-removed);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
+                <a href="https://forged.synth.download/sneexy/pages" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" alt="website source!"><span class="tabler--brand-git" style="pointer-events: none;"></span></a>
+                <a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" alt="Ayu"><span class="tabler--palette" style="pointer-events: none;"></span></svg></a>
+                <a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" alt="Tabler"><span class="tabler--brand-tabler" style="pointer-events: none;"></span></a>
+                <a href="https://www.jetbrains.com/lp/mono" style="background-color: color-mix(in srgb, var(--green) 25%, transparent); color: var(--green);" alt="JetBrains Mono"><span class="tabler--text-size" style="pointer-events: none;"></span></a>
+                <a href="https://www.lexend.com" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" alt="Lexend"><span class="tabler--letter-case" style="pointer-events: none;"></span></i></a>
             </section>
             <p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way.</p>
             <p>made with <span class="rainbow">love</span>, <span class="rainbow">lack of sleep</span> and <span class="rainbow">procrastination</span></p>
diff --git a/ruben.css b/ruben.css
index eef269a..9525641 100644
--- a/ruben.css
+++ b/ruben.css
@@ -1,101 +1,15 @@
-/* direct copy of of colors.css with --ayu-accent swapped out for my green goo :] */
+/*
 
-/* i use ayu since i feel like it fits the theme better
-https://raw.githubusercontent.com/ayu-theme/ayu-colors
-for a quick ref/cheatsheet try https://raw.githubusercontent.com/ayu-theme/ayu-colors/refs/heads/master/colors.svg
-(only works in chromium for some reason)
+replaces the accent color with ruben flavored goo
 
-and also:
-
---ayu-s-tag for blue
---ayu-v-added for green
---ayu-s-constant for purple
---ayu-s-keyword for orange
---ayu-s-special for yellow
---ayu-s-markup OR --ayu-error for red
-
---ayu-e-bg AND --ayu-ui-fg used for "regular" viewing colors, otherwise use
---ayu-ui-fg AND --ayu-ui-bg for more "unimportant" sections
---ayu-uip-bg can be used as a "subbackground" color of sorts
---ayu-accent for the "accent" yellow, used for the "branding"
 */
 
-@media (prefers-color-scheme: light) {
-    /* ayu light */
-    :root {
-        --ayu-s-tag: #55B4D4;
-        --ayu-s-func: #F2AE49;
-        --ayu-s-entity: #399EE6;
-        --ayu-s-string: #86B300;
-        --ayu-s-regexp: #4CBF99;
-        --ayu-s-markup: #F07171;
-        --ayu-s-keyword: #FA8D3E;
-        --ayu-s-special: #E6BA7E;
-        --ayu-s-comment: #787B8099;
-        --ayu-s-constant: #A37ACC;
-        --ayu-s-operator: #ED9366;
-        --ayu-v-added: #6CBF43;
-        --ayu-v-modified: #478ACC;
-        --ayu-v-removed: #FF7383;
-        --ayu-e-fg: #5C6166;
-        --ayu-e-bg: #FCFCFC;
-        --ayu-e-line: #8A91991A;
-        --ayu-es-active: #035BD626;
-        --ayu-es-inactive: #035BD612;
-        --ayu-efm-active: #9F40FF2B;
-        --ayu-efm-inactive: #9F40FFCC;
-        --ayu-eg-active: #8A9199CC;
-        --ayu-eg-normal: #8A919966;
-        --ayu-eig-active: #8A919959;
-        --ayu-eig-normal: #8A91992E;
-        --ayu-ui-fg: #8A9199;
-        --ayu-ui-bg: #F8F9FA;
-        --ayu-ui-line: #6B7D8F1F;
-        --ayu-uis-active: #56728F1F;
-        --ayu-uis-normal: #6B7D8F1F;
-        --ayu-uip-bg: #F3F4F5;
-        --ayu-uip-shadow: #00000026;
-        --ayu-accent: #00e736;
-        --ayu-error: #E65050;
-    }
+:root {
+    --accent: #00d131 !important;
 }
 
 @media (prefers-color-scheme: dark) {
-    /* ayu dark */
     :root {
-        --ayu-s-tag: #39BAE6;
-        --ayu-s-func: #FFB454;
-        --ayu-s-entity: #59C2FF;
-        --ayu-s-string: #AAD94C;
-        --ayu-s-regexp: #95E6CB;
-        --ayu-s-markup: #F07178;
-        --ayu-s-keyword: #FF8F40;
-        --ayu-s-special: #E6B673;
-        --ayu-s-comment: #ACB6BF8C;
-        --ayu-s-constant: #D2A6FF;
-        --ayu-s-operator: #F29668;
-        --ayu-v-added: #7FD962;
-        --ayu-v-modified: #73B8FF;
-        --ayu-v-removed: #F26D78;
-        --ayu-e-fg: #BFBDB6;
-        --ayu-e-bg: #0D1017;
-        --ayu-e-line: #131721;
-        --ayu-es-active: #409FFF4D;
-        --ayu-es-inactive: #409FFF21;
-        --ayu-efm-active: #6C5980;
-        --ayu-efm-inactive: #6C598066;
-        --ayu-eg-active: #6C7380E6;
-        --ayu-eg-normal: #6C738099;
-        --ayu-eig-active: #6C738080;
-        --ayu-eig-normal: #6C738033;
-        --ayu-ui-fg: #565B66;
-        --ayu-ui-bg: #0B0E14;
-        --ayu-ui-line: #11151C;
-        --ayu-uis-active: #47526640;
-        --ayu-uis-normal: #47526633;
-        --ayu-uip-bg: #0F131A;
-        --ayu-uip-shadow: #00000080;
-        --ayu-accent: #65FF88;
-        --ayu-error: #D95757;
+        --accent: #65ff88 !important;
     }
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index c6998c3..fd79774 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 /* background wallpaper, global font */
 
 body {
-    background: linear-gradient(var(--ayu-ui-bg), color-mix(in srgb, var(--ayu-accent) 25%, var(--ayu-uip-bg)));
+    background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
     min-height: calc(100vh - 4rem);
     font-family: 'JetBrains Mono', monospace, system-ui, sans-serif;
     font-size: 1.125rem;
@@ -13,7 +13,7 @@ body {
     summary {
         display: inline-flex;
         min-width: 100%;
-        background-color: color-mix(in srgb, var(--ayu-accent) 10%, var(--ayu-uip-bg));
+        background-color: color-mix(in srgb, var(--accent) 10%, var(--background));
         opacity: .8;
         text-align: center;
         vertical-align: middle;
@@ -21,13 +21,13 @@ body {
         transition: .2s opacity;
 
         div:first-child {
-            background: color-mix(in srgb, var(--ayu-accent) 40%, transparent);
+            background: color-mix(in srgb, var(--accent) 40%, transparent);
             padding: .4rem .4rem .2rem 1rem;
-            border-right: .2rem solid var(--ayu-accent);
+            border-right: .2rem solid var(--accent);
             border-bottom-right-radius: 1rem;
 
             span {
-                background-color: var(--ayu-e-fg);
+                background-color: var(--foreground);
             }
         }
 
@@ -35,7 +35,7 @@ body {
             font-family: 'Inter', system-ui, sans-serif;
             padding: .3rem 0rem .3rem .5rem;
             text-decoration: none;
-            color: var(--ayu-e-fg);
+            color: var(--foreground);
         }
 
         a:hover {
@@ -53,7 +53,7 @@ body {
             span {
                 text-align: center;
                 vertical-align: middle;
-                background-color: var(--ayu-e-fg);
+                background-color: var(--foreground);
             }
 
             /* maximize button (which does nothing) */
@@ -65,11 +65,11 @@ body {
 
         /* close button */
         div:nth-child(4) {
-            background: color-mix(in srgb, var(--ayu-accent) 40%, transparent);
+            background: color-mix(in srgb, var(--accent) 40%, transparent);
             padding: .4rem .5rem .2rem .6rem;
-            border-left: .2rem solid var(--ayu-accent);
+            border-left: .2rem solid var(--accent);
             border-bottom-left-radius: 1rem;
-            color: var(--ayu-e-fg);
+            color: var(--foreground);
 
             transition: background .2s;
             transition: background-color .2s;
@@ -77,12 +77,12 @@ body {
 
         /* close button (animated on hover) */
         div:nth-child(4):hover {
-            background: var(--ayu-error);
+            background: var(--red);
 
             transition: background .2s;
 
             span {
-                background-color: var(--ayu-ui-bg);
+                background-color: var(--background);
                 transition: background-color .2s;
             }
         }
@@ -92,10 +92,10 @@ body {
         padding: .8rem;
     }
 
-    background-color: var(--ayu-e-bg);
-    color: var(--ayu-e-fg);
+    background-color: var(--background);
+    color: var(--foreground);
 
-    border: var(--ayu-accent) solid .15rem;
+    border: var(--accent) solid .15rem;
     border-radius: .6rem;
 
     max-width: 60em;
@@ -122,7 +122,7 @@ body {
 .window[open] {
     summary {
         opacity: 1;
-        border-bottom: .1rem solid var(--ayu-accent);
+        border-bottom: .1rem solid var(--accent);
 
         transition: .2s opacity;
     }
@@ -131,7 +131,7 @@ body {
 }
 
 .window:hover {
-    box-shadow: var(--ayu-accent) 0px 0px 0px .3rem;
+    box-shadow: var(--accent) 0px 0px 0px .3rem;
 
     transition: .2s box-shadow;
 }
@@ -173,9 +173,9 @@ footer {
     font-family: 'Inter', system-ui, sans-serif;
     align-content: center;
     vertical-align: middle;
-    background-color: color-mix(in srgb, var(--ayu-accent) 10%, transparent);
-    border-bottom: .2rem solid var(--ayu-accent);
-    color: var(--ayu-e-fg);
+    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
+    border-bottom: .2rem solid var(--accent);
+    color: var(--foreground);
 
     .nav-base {
         padding: 0px .2em !important;
@@ -183,19 +183,19 @@ footer {
         align-content: center;
     }
     .nav-baselink {
-        background-color: var(--ayu-accent);
+        background-color: var(--accent);
         text-decoration: unset !important;
-        color: var(--ayu-e-bg);
+        color: var(--background);
         padding: 0px .4rem .1rem !important;
         border-bottom-right-radius: 1rem;
 
         svg {
-            color: var(--ayu-e-bg) !important;
+            color: var(--background) !important;
         }
     }
     .nav-baselink::before {
         content: '';
-        background: var(--ayu-e-bg);
+        background: var(--background);
         min-width: 14rem;
         min-height: 1.7rem;
         display: block;
@@ -206,22 +206,22 @@ footer {
         display: none;
     }
     .nav-links {
-        background-color: var(--ayu-e-bg);
-        color: var(--ayu-e-fg);
+        background-color: var(--background);
+        color: var(--foreground);
         padding: 0px .4rem !important;
         border-bottom-right-radius: 1rem;
     }
     .nav-links a {
-        color: var(--ayu-e-fg);
+        color: var(--foreground);
         text-decoration: unset !important;
     }
     .nav-links a:hover {
-        color: var(--ayu-accent);
+        color: var(--accent);
         text-decoration: underline !important;
     }
     .nav-systray {
-        background-color: var(--ayu-e-bg);
-        color: var(--ayu-e-fg);
+        background-color: var(--background);
+        color: var(--foreground);
         margin-left: auto !important;
         padding: 0px .4rem !important;
         border-bottom-left-radius: 1rem;
@@ -237,7 +237,7 @@ footer {
         opacity: .7;
     }
     svg {
-        color: var(--ayu-e-fg) !important;
+        color: var(--foreground) !important;
     }
 }
 
@@ -246,7 +246,7 @@ font-family and <p> is set under .terminal */
 
 /* headings */
 h1, h1 a {
-    color: var(--ayu-e-fg);
+    color: var(--foreground);
     font-size: 2rem;
     text-decoration: none;
 }
@@ -254,7 +254,7 @@ h1, h1 a {
 /* apparently having more than one h1 is against web standards
 but i prefer how it looks so i just use the same styling again */
 h2, h2 a {
-    color: var(--ayu-e-fg);
+    color: var(--foreground);
     font-size: 2rem;
     text-decoration: none;
 }
@@ -275,13 +275,13 @@ p, li, button {
 /* links should look good i think */
 a {
     font-size: 1.125rem;
-    color: var(--ayu-accent);
+    color: var(--accent);
     transition: 0.2s;
 }
 
 a:hover {
     transition: 0.2s;
-    text-shadow: 0em 0em 0.25em var(--ayu-accent);
+    text-shadow: 0em 0em 0.25em var(--accent);
 }
 
 /* smol text */
@@ -313,7 +313,7 @@ h1 a:hover {
     height: 1.3rem;
     padding-bottom: .2rem;
     vertical-align: middle !important;
-    color: var(--ayu-e-fg) !important;
+    color: var(--foreground) !important;
 }
 
 /* the dot */
@@ -321,7 +321,7 @@ h1 a:hover {
     display: inline-flex;
     width: .4rem;
     height: .4rem;
-    background-color: var(--ayu-e-fg);
+    background-color: var(--foreground);
     border-radius: 100%;
     vertical-align: middle;
     margin-left: .2rem;
@@ -367,11 +367,11 @@ details.styled[open] {
 /* alt text popup */
 .alt-popup {
     position: fixed;
-    background-color: color-mix(in srgb, var(--ayu-ui-bg) 85%, transparent);
+    background-color: color-mix(in srgb, var(--background) 85%, transparent);
     backdrop-filter: blur(.5rem);
-    color: var(--ayu-e-fg);
+    color: var(--foreground);
     padding: .5rem;
-    border: solid .01rem var(--ayu-accent);
+    border: solid .01rem var(--accent);
     border-radius: .5rem;
     font-size: 1rem;
     max-width: 30rem;
@@ -393,42 +393,42 @@ footer {
         a {
             display: inline-grid;
             font-size: 1.5rem;
-            color: var(--ayu-v-added);
+            color: var(--green);
             margin-bottom: .5em;
             vertical-align: bottom;
         }
         [href="https://fediring.net"] {
-            color: var(--ayu-e-fg);
-            background: color-mix(in srgb, var(--ayu-s-tag) 25%, transparent);
+            color: var(--foreground);
+            background: color-mix(in srgb, var(--purple) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
         [href="https://keithhacks.cyou/furryring.php"] {
-            color: var(--ayu-e-fg);
-            background: color-mix(in srgb, var(--ayu-s-constant) 25%, transparent);
+            color: var(--foreground);
+            background: color-mix(in srgb, var(--sapphire) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
         [href="https://stellophiliac.github.io/roboring"] {
-            color: var(--ayu-e-fg);
-            background: color-mix(in srgb, var(--ayu-eg-active) 25%, transparent);
+            color: var(--foreground);
+            background: color-mix(in srgb, var(--comment) 25%, transparent);
             padding: 0px 10px 0px 10px;
             border-radius: 5px;
         }
         [href*="prev"] {
-            background: color-mix(in srgb, var(--ayu-s-special) 25%, transparent);
+            background: color-mix(in srgb, var(--orange) 25%, transparent);
             padding: 5px 6px;
             border-radius: 5px;
             span {
-                background-color: var(--ayu-s-operator) !important;
+                background-color: var(--orange) !important;
             }
         }
         [href*="next"] {
-            background: color-mix(in srgb, var(--ayu-v-added) 25%, transparent);
+            background: color-mix(in srgb, var(--green) 25%, transparent);
             padding: 5px 6px;
             border-radius: 5px;
             span {
-                background-color: var(--ayu-v-added) !important;
+                background-color: var(--green) !important;
             }
         }
     }
@@ -576,7 +576,7 @@ footer {
 
 @media (prefers-reduced-motion) {
     body {
-        background: var(--ayu-ui-bg) !important;
+        background: var(--background) !important;
         animation: unset !important;
         -moz-animation: unset !important;
         -webkit-animation: unset !important;
@@ -608,13 +608,13 @@ footer {
             a {
                 display: inline-flex;
                 align-items: center;
-                color: var(--ayu-e-fg);
+                color: var(--foreground);
                 padding: .6em .7em;
                 text-decoration: none;
             }
 
             a:hover {
-                color: var(--ayu-accent);
+                color: var(--accent);
                 text-decoration: underline;
             }
 
@@ -623,10 +623,10 @@ footer {
             }
 
             ul {
-                background-color: var(--ayu-e-bg);
+                background-color: var(--background);
                 border-bottom-right-radius: 1rem;
-                border-right: var(--ayu-accent) solid .15rem;
-                border-bottom: var(--ayu-accent) solid .15rem;
+                border-right: var(--accent) solid .15rem;
+                border-bottom: var(--accent) solid .15rem;
                 max-width: 10em;
                 width: auto;
                 margin-top: unset !important;
@@ -642,9 +642,9 @@ footer {
             display: block !important;
             margin-top: 0px !important;
             font-family: 'Inter', system-ui, sans-serif;
-            background-color: var(--ayu-accent);
+            background-color: var(--accent);
             text-decoration: unset !important;
-            color: var(--ayu-e-bg);
+            color: var(--background);
             padding: .3em;
             border-bottom-right-radius: 1rem;
             width: 4.7em;
@@ -679,8 +679,8 @@ footer {
             padding: .5rem;
         }
     
-        border-top: var(--ayu-accent) solid .15rem;
-        border-bottom: var(--ayu-accent) solid .15rem;
+        border-top: var(--accent) solid .15rem;
+        border-bottom: var(--accent) solid .15rem;
         border-left: unset !important;
         border-right: unset !important;
         border-radius: unset !important;
@@ -696,8 +696,8 @@ footer {
 
 @media screen and (max-width: 540px) {
     details#footer.window {
-        border-top: var(--ayu-accent) solid .15rem;
-        border-bottom: var(--ayu-accent) solid .15rem;
+        border-top: var(--accent) solid .15rem;
+        border-bottom: var(--accent) solid .15rem;
         border-left: unset !important;
         border-right: unset !important;
         border-radius: unset !important;