diff --git a/base.htm b/base.htm
index 6d588b0..1ee8094 100644
--- a/base.htm
+++ b/base.htm
@@ -110,15 +110,6 @@ main u {
 main s {
     text-decoration: line-through;
 }
-main .highlight {
-    color: blue;
-}
-main .highlight2 {
-    color: red;
-}
-main .highlighted {
-    background: #ff0;
-}
 main pre, main tt, main kbd {
     font-family: Monaco,Consolas,Liberation Mono,Courier,monospace;
     white-space: pre;
@@ -203,47 +194,12 @@ main footer {
 }
 </style>
 <style>
-@media (prefers-color-scheme: light) {
-    :root {
-        color-scheme: light;
-    }
-    body {
-        font-family: Lato,Helvetica,Neue,Arial,Deja Vu,sans-serif;
-        font-size: 14px;
-    }
-    header {
-        background: #2980B9;
-    }
-    header section h1 {
-        color: #fcfcfc;
-    }
-    header section h2 {
-        color: #56b5ee;
-    }
-    header nav {
-        background: #343131;
-    }
-    header nav ul li:hover {
-        background: #4e4a4a;
-    }
-    header nav ul ul li a {
-        color: #b3b3b3;
-    }
-    header nav li a {
-        color: #55a5d9;
-    }
-    main, main footer {
-        background: #fbf4ce;
-    }
     main {
-        color: #404040;
         font-size: 16px;
     }
     main pre {
         margin: 1px 0 23px;
         padding: 12px;
-        border: 1px solid #e1e4e5;
-        background: #f2ecb7;
     }
     main blockquote :first-child::before {
         content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAABRElEQVRYw+3WTytEURjH8c/4l1JTpKxsyEbYWFkpG+UVKOWFeAts7eytbJSysLLVxIKNFAslwhSlUQabUdM0xm0e967Ot+7inPN8z+13z73nXBKJRCIRoJSxbggrmMMInlHBIWoF+KEAQ9jAaJuxe2zhJUe/Iz0ZahZ/uTmMYT1nPxxg/I/xWQzn6IcD1IIha//wkEIBKhlq+nP0wwHOsYuvDjWvOfod6c1Yd9O4ZjDQZvwAbzn6oRVofpKbqLf0P+GxAD8cAO7w0NJ3WqAfDlBCuan9gaMC/XCA+cbJ+sMRqgX6oQCTWGtqX2O/QL8tfRlqyljGUlPgW2y3+SDz8Lv6mRvEQmPbm25ZqQvs/LHtRf3wCkxgtaWvij2cZJg36ocD/Pw91nGJY5zhM+O8UT/8Ck01TswrvHcxb9RPJBKJRDF8AyNbWk4WFTIzAAAAAElFTkSuQmCC);
@@ -261,20 +217,14 @@ main footer {
     }
     main a {
         text-decoration: underline;
-        color: blue;
-    }
-    main a:visited {
-        color: purple;
     }
     main kbd {
         display: inline-block;
-        border: 1px solid #888;
         height: 24px;
         padding: 0 4px;
         margin: -2px 0 -2px;
         border-radius: 4px;
         font-weight: 700;
-        background-image: linear-gradient(#ddd 0%,#eee 10%,#bbb 10%,#ccc 30%,#fff 85%,#eee 85%,#888 100%);
     }
     main span.mbl, main span.mbr, main.mbw {
         display: inline-block;
@@ -294,10 +244,8 @@ main footer {
         content: url(data:type/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAMAAADEfo0+AAAAe1BMVEUAAACzs7OoqKisrKyRkZGlpaX9/f22trabm5uNjY2mpqanp6ePj4+1tbWYmJi3t7eWlpajo6OZmZmwsLD5+fnu7u7x8fHi4uLW1tbm5ube3t7T09Pq6ur19fW4uLi7u7u0tLTa2trPz8+/v7/Dw8PLy8vHx8eIiIhERkS4354xAAAAAXRSTlMAQObYZgAAAKdJREFUGNNV0NkagiAUhdHjPAECzWWlWdL7P2Fno/nJumHzXx4iMMI5YeivVVOX592k2vkfy/1CxvjL6L6KJAd9ZF+GVxP144Eh4B170kPHEPAOmtwFEPxw5E6A4AeHKyD4wWEABD84nAHBDw43QPCDwyvA4RPgMAU4vAOO0mLcKFJqzHPDNETisSH4HpntVzbDyazaLZSdj2qqsk6Suqw2d7fO2fnmP7kAJW9a/HbiAAAAAElFTkSuQmCC);
     }
     main span.button {
-        border: 1px solid #555;
         border-radius: 3px;
         padding: 4px;
-        background-image: linear-gradient(#fff 0%,#fff 1%,#f2f2f2 1%,#ebebeb 50%,#ddd 50%,#cfcfcf 99%,#fff 99%,#fff 100%);
         font-size: 90%;
     }
     main div.box :first-child::before {
@@ -305,6 +253,78 @@ main footer {
     }
     main div.box :first-child {
         font-weight: 700;
+    }
+    main footer {
+        margin-top: 16px;
+        border-top: 2px solid #2d70aa;
+        opacity: 0.8;
+        font-size: 80%;
+    }
+    main footer .generated {
+        opacity: 0.8;
+        font-size: 90%;
+    }
+</style>
+<style>
+@media (prefers-color-scheme: light) {
+    :root {
+        color-scheme: light;
+    }
+    header {
+        background: #2980B9;
+    }
+    header section h1 {
+        color: #fcfcfc;
+    }
+    header section h2 {
+        color: #56b5ee;
+    }
+    header nav {
+        background: #343131;
+    }
+    header nav ul li:hover {
+        background: #4e4a4a;
+    }
+    header nav ul ul li a {
+        color: #b3b3b3;
+    }
+    header nav li a {
+        color: #55a5d9;
+    }
+    main, main footer {
+        background: #fbf4ce;
+    }
+    main {
+        color: #404040;
+    }
+    main .highlight {
+        color: blue;
+    }
+    main .highlight2 {
+        color: red;
+    }
+    main .highlighted {
+        background: #ff0;
+    }
+    main pre {
+        border: 1px solid #e1e4e5;
+        background: #f2ecb7;
+    }
+    main a {
+        color: blue;
+    }
+    main a:visited {
+        color: purple;
+    }
+    main kbd {
+        border: 1px solid #888;
+        background-image: linear-gradient(#ddd 0%,#eee 10%,#bbb 10%,#ccc 30%,#fff 85%,#eee 85%,#888 100%);
+    }
+    main span.button {
+        border: 1px solid #555;
+        background-image: linear-gradient(#fff 0%,#fff 1%,#f2f2f2 1%,#ebebeb 50%,#ddd 50%,#cfcfcf 99%,#fff 99%,#fff 100%);
+    }
+    main div.box :first-child {
         color: #eee;
     }
     main div.box.hint {
@@ -332,14 +352,7 @@ main footer {
         background: #5c5353;
     }
     main footer {
-        margin-top: 16px;
         border-top: 2px solid #2d70aa;
-        opacity: 0.8;
-        font-size: 80%;
-    }
-    main footer .generated {
-        opacity: 0.8;
-        font-size: 90%;
     }
 }
 </style>
@@ -348,6 +361,90 @@ main footer {
     :root {
         color-scheme: dark;
     }
+    header {
+        background: #17679B;
+    }
+    header section h1 {
+        color: #fcfcfc;
+    }
+    header section h2 {
+        color: #56b5ee;
+    }
+    header nav {
+        background: #343131;
+    }
+    header nav ul li:hover {
+        background: #4e4a4a;
+    }
+    header nav ul ul li a {
+        color: #b3b3b3;
+    }
+    header nav li a {
+        color: #55a5d9;
+    }
+    main, main footer {
+        background: #80732d;
+    }
+    main {
+        color: #0f0b37;
+    }
+    main .highlight {
+        color: blue;
+    }
+    main .highlight2 {
+        color: #4f0;
+    }
+    main .highlighted {
+        background: #d0d016;
+    }
+    main pre {
+        border: 1px solid #495457;
+        background: #999463;
+    }
+    main a {
+        color: blue;
+    }
+    main a:visited {
+        color: purple;
+    }
+    main kbd {
+        border: 1px solid #888;
+        background-image: linear-gradient(#999 0%,#aaa 10%,#777 10%,#888 30%,#bbb 85%,#aaa 85%,#444 100%);
+    }
+    main span.button {
+        border: 1px solid #555;
+        background-image: linear-gradient(#bbb 0%,#bbb 1%,#b2b2b2 1%,#a7a7a7 50%,#999 50%,#8b8b8b 99%,#bbb 99%,#bbb 100%);
+    }
+    main div.box :first-child {
+        color: #eee;
+    }
+    main div.box.hint {
+        background: #68bd7e;
+    }
+    main div.box.hint :first-child {
+        background: #13821b;
+    }
+    main div.box.info {
+        background: #58b8ce;
+    }
+    main div.box.info :first-child {
+        background: #086abf;
+    }
+    main div.box.warn {
+        background: #bd7e4f;
+    }
+    main div.box.warn :first-child {
+        background: #973c3c;
+    }
+    main div.box.note {
+        background: #c4c4c4;
+    }
+    main div.box.note :first-child {
+        background: #575656;
+    }
+    main footer {
+        border-top: 2px solid #2d70aa;
+    }
 }
 </style>
     </head>