1 files changed, 64 insertions, 9 deletions

diff --git a/stuff/webgarden/style.css b/stuff/webgarden/style.css
index 0599032..bd37aec 100644
--- a/stuff/webgarden/style.css
+++ b/stuff/webgarden/style.css
@@ -22,33 +22,88 @@
   font-weight: bold;
   font-style: italic;
 }
+
+:root {
+  color-scheme: dark light;
+
+  /* Trying to define as few specific colours as possible as generically as possible */
+  --background: light-dark(#fff5eb, #1a1a1d);
+  --foreground: light-dark(#222, #ddd);
+  --accent1: light-dark(#64790a, #ff1159);
+  --accent2: light-dark(#007a70, #00ffd5);
+  --shadow: #000a;
+  --message-red: light-dark(#c00, red);
+  --message-green: light-dark(#007500, lime);
+  --message-yellow: light-dark(#d3b200, yellow);
+  --message-blue: light-dark(#005fbb, dodgerblue);
+
+  --linkcolor: var(--accent1);
+  --linkhover: var(--accent2);
+
+  --fg0: var(--foreground);
+  --fg1: color-mix(in srgb, var(--foreground) 85%, var(--background) 15%);
+  --fg2: color-mix(in srgb, var(--foreground) 75%, var(--background) 25%);
+  --fg3: color-mix(in srgb, var(--foreground) 65%, var(--background) 35%);
+
+  --bg0: var(--background);
+  --bg1: color-mix(in srgb, var(--background) 93%, var(--foreground) 7%);
+  --bg2: color-mix(in srgb, var(--background) 87%, var(--foreground) 13%);
+  --bg3: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
+  --bg00: light-dark(white, black);
+
+  --accentbordercolor: light-dark(var(--accent1), var(--fg0));
+}
+
 html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 body {
-  font-family: b612_mono, mono, monospace;
-  color: white;
-  background: #101010;
-  text-shadow: 1px 1px 4px black;
+  font-family: b612_mono, monospace;
+  color: var(--fg0);
+  background-color: var(--bg0);
 }
 #plant {
   height: 250px;
   width: 250px;
 }
-a#forward, a#back, h1, h2, #hoverme {
+a {
+  color: var(--linkcolor);
+}
+a:hover {
+  color: var(--linkhover);
+}
+a#forward, a#back, #hoverme {
   font-family: 'Silkscreen';
   color: white;
   text-decoration: none;
 }
+#hoverme, #statuscafe ~ #back {
+  color: var(--fg0);
+}
 #hoverme {
   position: absolute;
   top: 4px;
-  left: 209px; 
-  animation-name: arrowwiggle;
-  animation-duration: 6s;
-  animation-iteration-count: infinite;
+  left: 219px; 
   width: fit-content;
   text-align: right;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html:focus-within {
+   scroll-behavior: auto;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .bubblecolumn {
+    display: none;
+  }
 }
\ No newline at end of file