split css style into layers for explicit per-site styling

assets/css/style.css

@@ -1,3 +1,6 @@
+@layer base, per-site;
+
+@layer base {
   :root {
     /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
     --accent-color-light: #DC049B;
@@ -13,14 +16,18 @@ body {
 
     /* Use dark grey instead of black to be lighter on the eyes. But also a grey
      * which still works with the link color nicely. */
-  background-color: #ffffff;
-  color: #2B2B2B;
+    --bg-color: #ffffff;
+    --fg-color: #2b2b2b;
+    --accent-color: var(--accent-color-light);
+    background-color: var(--bg-color);
+    color: var(--fg-color);
 
     @media (prefers-color-scheme: dark) {
       /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
       /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
-    background-color: #1b1b1b;
-    color: #ebebeb;
+      --bg-color: #1b1b1b;
+      --fg-color: #ebebeb;
+      --accent-color: var(--accent-color-dark);
     }
   }
 
@@ -38,14 +45,13 @@ img {
     width: 100%;
   }
 
-
   a:link, a:visited {
-  color: var(--accent-color-light);
-  @media (prefers-color-scheme: dark) {
-    color: var(--accent-color-dark);
-  }
+    color: var(--accent-color);
   }
 
+  u {
+    text-decoration-color: var(--accent-color);
+  }
 
   .title {
     text-align: center;
@@ -60,3 +66,5 @@ a:link, a:visited {
   p.bigger {
     font-size: 1.2rem;
   }
+
+}