diff --git a/colors.css b/colors.css
index 9c3b948..14b295b 100644
--- a/colors.css
+++ b/colors.css
@@ -23,7 +23,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
 
     /* extended catppuccin based colors */
     --flamingo: #ff7d7d;
-    --rosewater: #ffbfb3;
+    --rosewater: #eca69a;
     --pink: #ff8adb;
     --mauve: #ba8aff;
     --maroon: #e06c75;
@@ -32,7 +32,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
     --teal: #2bbac5;
     --sky: #3eacce;
     --sapphire: #4db5d0;
-    --lavender: #a9b1ff;
+    --lavender: #7881ce;
 
     /* ui accent colors */
     --ui-orange: #fa8d3e;
@@ -54,7 +54,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
     :root {
         /* base colors */
         --background: #0a0e14;
-        --foreground: #b3b1ad;
+        --foreground: #d8d6d2;
         --selection: #253340;
         --comment: #5c6773;
         --accent: #e6b450;
@@ -64,7 +64,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
         --green: #aad94c;
         --blue: #59c2ff;
         --purple: #d2a6ff;
-        --red: #f07178;
+        --red: #f0646b;
 
         /* extended catppuccin based colors */
         --flamingo: #f2cdcd;
diff --git a/style.css b/style.css
index fd79774..e2cef3f 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,6 @@
-/* background wallpaper, global font */
+/* ----------------------------------
+- background wallpaper, global font -
+---------------------------------- */
 
 body {
     background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
@@ -8,12 +10,15 @@ body {
     margin: unset !important; /* idk why it does that */
 }
 
-/* window stylign */
+/* ---------------
+- window styling -
+---------------- */
+
 .window {
     summary {
         display: inline-flex;
         min-width: 100%;
-        background-color: color-mix(in srgb, var(--accent) 10%, var(--background));
+        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
         opacity: .8;
         text-align: center;
         vertical-align: middle;
@@ -142,7 +147,10 @@ body {
 }
 
 
-/* the footer window */
+/* ------------------
+- the footer window -
+------------------ */
+
 footer {
     max-width: 30em;
     margin-left: auto;
@@ -157,7 +165,9 @@ footer {
     }
 }
 
-/* top navbar styling, attempts to look like a window manager bar */
+/* ---------------------------------------------------------------
+- top navbar styling, attempts to look like a window manager bar -
+--------------------------------------------------------------- */
 
 .navbar {
     display: flex;
@@ -173,7 +183,7 @@ footer {
     font-family: 'Inter', system-ui, sans-serif;
     align-content: center;
     vertical-align: middle;
-    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
+    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
     border-bottom: .2rem solid var(--accent);
     color: var(--foreground);
 
@@ -335,32 +345,30 @@ summary {
     display: flex;
 } 
 
-/* styled summary styling */
+/* -----------------------
+- styled summary styling -
+----------------------- */
 
 details.styled {
-    padding: .5em;
-    border-radius: 1em;
-    background-color: var(--surface0);
 
     summary {
-        display: inline-block;
-        width: 100%;
-
-        i {
-            vertical-align: middle;
-            padding-bottom: .2rem;
-        }
-    }
-
-    ul li {
-        padding-bottom: unset !important;
+        max-width: 30%;
+        font-size: 1.5rem;
+        padding: .5rem;
+        border-radius: .5rem;
     }
 }
 
 details.styled[open] {
+    background-color: color-mix(in srgb, var(--background) 90%, var(--accent));
+    
     summary {
-        border-bottom: solid 1px var(--surface2);
-        padding-bottom: .5rem;
+        border-radius: .5rem;
+    }
+
+    section {
+        padding: .5rem;
+        border-radius: .5rem;
     }
 }