update

style.css

@@ -1,6 +1,38 @@
 /* root */
 :root {
   --lr-width: 45%;
+
+  /* mellow theme colors */
+  --bg: #161617;
+  --fg: #c9c7cd;
+  --bg-dark: #131314;
+  --black: #27272a;
+  --red: #f5a191;
+  --green: #90b99f;
+  --yellow: #e6b99d;
+  --blue: #aca1cf;
+  --magenta: #e29eca;
+  --cyan: #ea83a5;
+  --white: #c1c0d4;
+  --bright_black: #353539;
+  --bright_red: #ffae9f;
+  --bright_green: #9dc6ac;
+  --bright_yellow: #f0c5a9;
+  --bright_blue: #b9aeda;
+  --bright_magenta: #ecaad6;
+  --bright_cyan: #f591b2;
+  --bright_white: #cac9dd;
+  --gray01: #1b1b1d;
+  --gray02: #2a2a2d;
+  --gray03: #3e3e43;
+  --gray04: #57575f;
+  --gray05: #757581;
+  --gray06: #9998a8;
+  --gray07: #c1c0d4;
+}
+
+html, body {
+  max-height: 100%;
 }
 
 /* desktop mode */
@@ -37,7 +69,7 @@ html, body {
  justify-content: center;
 }
 body[id=blog] {
-  background-color: #161617;
+  background-color: var(--bg);
   display: unset !important;
   max-width: 80ch;
   margin: auto;
@@ -49,7 +81,7 @@ div#master header {
 div#group hgroup {
   text-align: center;
 }
-#font, p, ul, ol {
+#font, p, ul, ol, h1, h2, h3, h4, h5 {
   font-family: sans-serif;
   color: white;
 }
@@ -65,7 +97,7 @@ p#blogpreview span {
 a {
   font-family: sans-serif;
   text-decoration: none;
-  color: #ea83a5;
+  color: var(--cyan);
 }
 a:hover, a:active {
   font-style: italic;