slightly modify new colors

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;
     }
 }