add alternate versions for accessibility

style.css

@@ -9,11 +9,12 @@ body {
         hsl(234deg, 100%, 76%),
         hsl(195deg, 100%, 67%)
       );
+  --bg-image: url(niss_uwu_bg.png);
 }
 
 body {
   background:
-    url(niss_uwu_bg.png) top center fixed,
+    var(--bg-image) top center fixed,
     var(--gradient) fixed;
   background-blend-mode: overlay;
 }
@@ -65,7 +66,7 @@ h1 {
 }
 .niss { bottom: 100%; left: 20px; }
 .nisse { bottom: 85%; right: 0; }
-#mlem img {
+#mlem picture {
   filter: drop-shadow(0 0 30px hsla(52deg, 85%, 95%, 75%));
 }
 
@@ -171,3 +172,77 @@ footer a {
     background-blend-mode: initial;
   }
 }
+
+
+/******************************/
+/* actual accessibility stuff */
+/******************************/
+
+@media (prefers-reduced-motion: reduce) {
+  /* see also the alternate source in #mlem > picture */
+  .mlem-text {
+    display: none;
+  }
+}
+
+
+/* ~the "not actually supported by browsers yet" zone~ */
+@media (prefers-contrast: high) {
+  body {
+    --gradient:
+      linear-gradient(to bottom,
+          hsl(42deg,  56%, 55%),
+          hsl(348deg, 56%, 55%),
+          hsl(334deg, 60%, 43%),
+          hsl(234deg, 60%, 40%),
+          hsl(195deg, 60%, 44%)
+        );
+    --bg-image: url(niss_uwu_bg_dim.png);
+  }
+
+  main {
+    background: hsla(0, 0%, 0%, 60%);
+    border-color: hsla(0, 0%, 0%, 30%);
+  }
+
+  .cake::before, .cake::after,
+  header rt::before, header rt::after,
+  section h2::before, section h2::after {
+    mix-blend-mode: screen;
+  }
+
+  a {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+  }
+
+  footer {
+    background: hsla(0, 0%, 0%, 50%);
+    color: white;
+  }
+
+  footer a {
+    color: hsl(254deg, 100%, 85%);
+  }
+
+  footer .emojo {
+    background: hsla(52deg, 85%, 95%, 75%);
+    padding: 2px;
+    border-radius: 1000px;
+  }
+
+  hr {
+    background: white;
+  }
+
+  #mlem picture {
+    filter: drop-shadow(0 0 20px hsla(52deg, 85%, 95%, 35%));
+  }
+}
+
+@media (prefers-reduced-transparency) {
+  body {
+    background: var(--gradient) fixed;
+    background-blend-mode: initial;
+  }
+}