Initial redesign commit

5 files changed, 497 insertions, 391 deletions

diff --git a/public/css/colorschemes/catppuccin-frappe.css b/public/css/colorschemes/catppuccin-frappe.css
index debb417..9be1833 100644
--- a/public/css/colorschemes/catppuccin-frappe.css
+++ b/public/css/colorschemes/catppuccin-frappe.css
@@ -1,11 +1,93 @@
 :root {
-    --background: #232634;
-    --background-secondary: #414559;
-    --foreground: #c6d0f5;
-    --links: #8caaee;
-    --warning: #ff7272;
-    --warning-box-bg: #f64a3c;
-    --warning-box-border: #c81a11;
+    --ctp-frappe-rosewater: #f2d5cf;
+    --ctp-frappe-rosewater-rgb: 242 213 207;
+    --ctp-frappe-rosewater-hsl: 10.286 57.377% 88.039%;
+    --ctp-frappe-flamingo: #eebebe;
+    --ctp-frappe-flamingo-rgb: 238 190 190;
+    --ctp-frappe-flamingo-hsl: 0.000 58.537% 83.922%;
+    --ctp-frappe-pink: #f4b8e4;
+    --ctp-frappe-pink-rgb: 244 184 228;
+    --ctp-frappe-pink-hsl: 316.000 73.171% 83.922%;
+    --ctp-frappe-mauve: #ca9ee6;
+    --ctp-frappe-mauve-rgb: 202 158 230;
+    --ctp-frappe-mauve-hsl: 276.667 59.016% 76.078%;
+    --ctp-frappe-red: #e78284;
+    --ctp-frappe-red-rgb: 231 130 132;
+    --ctp-frappe-red-hsl: 358.812 67.785% 70.784%;
+    --ctp-frappe-maroon: #ea999c;
+    --ctp-frappe-maroon-rgb: 234 153 156;
+    --ctp-frappe-maroon-hsl: 357.778 65.854% 75.882%;
+    --ctp-frappe-peach: #ef9f76;
+    --ctp-frappe-peach-rgb: 239 159 118;
+    --ctp-frappe-peach-hsl: 20.331 79.085% 70.000%;
+    --ctp-frappe-yellow: #e5c890;
+    --ctp-frappe-yellow-rgb: 229 200 144;
+    --ctp-frappe-yellow-hsl: 39.529 62.044% 73.137%;
+    --ctp-frappe-green: #a6d189;
+    --ctp-frappe-green-rgb: 166 209 137;
+    --ctp-frappe-green-hsl: 95.833 43.902% 67.843%;
+    --ctp-frappe-teal: #81c8be;
+    --ctp-frappe-teal-rgb: 129 200 190;
+    --ctp-frappe-teal-hsl: 171.549 39.227% 64.510%;
+    --ctp-frappe-sky: #99d1db;
+    --ctp-frappe-sky-rgb: 153 209 219;
+    --ctp-frappe-sky-hsl: 189.091 47.826% 72.941%;
+    --ctp-frappe-sapphire: #85c1dc;
+    --ctp-frappe-sapphire-rgb: 133 193 220;
+    --ctp-frappe-sapphire-hsl: 198.621 55.414% 69.216%;
+    --ctp-frappe-blue: #8caaee;
+    --ctp-frappe-blue-rgb: 140 170 238;
+    --ctp-frappe-blue-hsl: 221.633 74.242% 74.118%;
+    --ctp-frappe-lavender: #babbf1;
+    --ctp-frappe-lavender-rgb: 186 187 241;
+    --ctp-frappe-lavender-hsl: 238.909 66.265% 83.725%;
+    --ctp-frappe-text: #c6d0f5;
+    --ctp-frappe-text-rgb: 198 208 245;
+    --ctp-frappe-text-hsl: 227.234 70.149% 86.863%;
+    --ctp-frappe-subtext1: #b5bfe2;
+    --ctp-frappe-subtext1-rgb: 181 191 226;
+    --ctp-frappe-subtext1-hsl: 226.667 43.689% 79.804%;
+    --ctp-frappe-subtext0: #a5adce;
+    --ctp-frappe-subtext0-rgb: 165 173 206;
+    --ctp-frappe-subtext0-hsl: 228.293 29.496% 72.745%;
+    --ctp-frappe-overlay2: #949cbb;
+    --ctp-frappe-overlay2-rgb: 148 156 187;
+    --ctp-frappe-overlay2-hsl: 227.692 22.286% 65.686%;
+    --ctp-frappe-overlay1: #838ba7;
+    --ctp-frappe-overlay1-rgb: 131 139 167;
+    --ctp-frappe-overlay1-hsl: 226.667 16.981% 58.431%;
+    --ctp-frappe-overlay0: #737994;
+    --ctp-frappe-overlay0-rgb: 115 121 148;
+    --ctp-frappe-overlay0-hsl: 229.091 13.360% 51.569%;
+    --ctp-frappe-surface2: #626880;
+    --ctp-frappe-surface2-rgb: 98 104 128;
+    --ctp-frappe-surface2-hsl: 228.000 13.274% 44.314%;
+    --ctp-frappe-surface1: #51576d;
+    --ctp-frappe-surface1-rgb: 81 87 109;
+    --ctp-frappe-surface1-hsl: 227.143 14.737% 37.255%;
+    --ctp-frappe-surface0: #414559;
+    --ctp-frappe-surface0-rgb: 65 69 89;
+    --ctp-frappe-surface0-hsl: 230.000 15.584% 30.196%;
+    --ctp-frappe-base: #303446;
+    --ctp-frappe-base-rgb: 48 52 70;
+    --ctp-frappe-base-hsl: 229.091 18.644% 23.137%;
+    --ctp-frappe-mantle: #292c3c;
+    --ctp-frappe-mantle-rgb: 41 44 60;
+    --ctp-frappe-mantle-hsl: 230.526 18.812% 19.804%;
+    --ctp-frappe-crust: #232634;
+    --ctp-frappe-crust-rgb: 35 38 52;
+    --ctp-frappe-crust-hsl: 229.412 19.540% 17.059%;
+}
+
+:root {
+    --page-width: 900px;
+    --sidebar-width: 15rem;
+    --firefox-shadow: 0 0 20px;
+    --foreground: var(--ctp-frappe-text);
+    --background: var(--ctp-frappe-crust);
+    --background-secondary: var(--ctp-frappe-surface0);
+    --links: var(--ctp-frappe-sapphire);
+    --shadow: #cdd6f44f;
 }
 
 html {
diff --git a/public/css/colorschemes/catppuccin-latte.css b/public/css/colorschemes/catppuccin-latte.css
index 5990649..0809f30 100644
--- a/public/css/colorschemes/catppuccin-latte.css
+++ b/public/css/colorschemes/catppuccin-latte.css
@@ -1,11 +1,93 @@
 :root {
-    --background: #dce0e8;
-    --background-secondary: #ccd0da;
-    --foreground: #4c4f69;
-    --links: #1e66f5;
-    --warning: #ff7272;
-    --warning-box-bg: #f64a3c;
-    --warning-box-border: #c81a11;
+    --ctp-latte-rosewater: #dc8a78;
+    --ctp-latte-rosewater-rgb: 220 138 120;
+    --ctp-latte-rosewater-hsl: 10.800 58.824% 66.667%;
+    --ctp-latte-flamingo: #dd7878;
+    --ctp-latte-flamingo-rgb: 221 120 120;
+    --ctp-latte-flamingo-hsl: 0.000 59.763% 66.863%;
+    --ctp-latte-pink: #ea76cb;
+    --ctp-latte-pink-rgb: 234 118 203;
+    --ctp-latte-pink-hsl: 316.034 73.418% 69.020%;
+    --ctp-latte-mauve: #8839ef;
+    --ctp-latte-mauve-rgb: 136 57 239;
+    --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
+    --ctp-latte-red: #d20f39;
+    --ctp-latte-red-rgb: 210 15 57;
+    --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
+    --ctp-latte-maroon: #e64553;
+    --ctp-latte-maroon-rgb: 230 69 83;
+    --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
+    --ctp-latte-peach: #fe640b;
+    --ctp-latte-peach-rgb: 254 100 11;
+    --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
+    --ctp-latte-yellow: #df8e1d;
+    --ctp-latte-yellow-rgb: 223 142 29;
+    --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
+    --ctp-latte-green: #40a02b;
+    --ctp-latte-green-rgb: 64 160 43;
+    --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
+    --ctp-latte-teal: #179299;
+    --ctp-latte-teal-rgb: 23 146 153;
+    --ctp-latte-teal-hsl: 183.231 73.864% 34.510%;
+    --ctp-latte-sky: #04a5e5;
+    --ctp-latte-sky-rgb: 4 165 229;
+    --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
+    --ctp-latte-sapphire: #209fb5;
+    --ctp-latte-sapphire-rgb: 32 159 181;
+    --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
+    --ctp-latte-blue: #1e66f5;
+    --ctp-latte-blue-rgb: 30 102 245;
+    --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
+    --ctp-latte-lavender: #7287fd;
+    --ctp-latte-lavender-rgb: 114 135 253;
+    --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
+    --ctp-latte-text: #4c4f69;
+    --ctp-latte-text-rgb: 76 79 105;
+    --ctp-latte-text-hsl: 233.793 16.022% 35.490%;
+    --ctp-latte-subtext1: #5c5f77;
+    --ctp-latte-subtext1-rgb: 92 95 119;
+    --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
+    --ctp-latte-subtext0: #6c6f85;
+    --ctp-latte-subtext0-rgb: 108 111 133;
+    --ctp-latte-subtext0-hsl: 232.800 10.373% 47.255%;
+    --ctp-latte-overlay2: #7c7f93;
+    --ctp-latte-overlay2-rgb: 124 127 147;
+    --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
+    --ctp-latte-overlay1: #8c8fa1;
+    --ctp-latte-overlay1-rgb: 140 143 161;
+    --ctp-latte-overlay1-hsl: 231.429 10.048% 59.020%;
+    --ctp-latte-overlay0: #9ca0b0;
+    --ctp-latte-overlay0-rgb: 156 160 176;
+    --ctp-latte-overlay0-hsl: 228.000 11.236% 65.098%;
+    --ctp-latte-surface2: #acb0be;
+    --ctp-latte-surface2-rgb: 172 176 190;
+    --ctp-latte-surface2-hsl: 226.667 12.162% 70.980%;
+    --ctp-latte-surface1: #bcc0cc;
+    --ctp-latte-surface1-rgb: 188 192 204;
+    --ctp-latte-surface1-hsl: 225.000 13.559% 76.863%;
+    --ctp-latte-surface0: #ccd0da;
+    --ctp-latte-surface0-rgb: 204 208 218;
+    --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
+    --ctp-latte-base: #eff1f5;
+    --ctp-latte-base-rgb: 239 241 245;
+    --ctp-latte-base-hsl: 220.000 23.077% 94.902%;
+    --ctp-latte-mantle: #e6e9ef;
+    --ctp-latte-mantle-rgb: 230 233 239;
+    --ctp-latte-mantle-hsl: 220.000 21.951% 91.961%;
+    --ctp-latte-crust: #dce0e8;
+    --ctp-latte-crust-rgb: 220 224 232;
+    --ctp-latte-crust-hsl: 220.000 20.690% 88.627%;
+}
+
+:root {
+    --page-width: 900px;
+    --sidebar-width: 15rem;
+    --firefox-shadow: 0 0 20px;
+    --foreground: var(--ctp-latte-text);
+    --background: var(--ctp-latte-crust);
+    --background-secondary: var(--ctp-latte-surface0);
+    --links: var(--ctp-latte-sapphire);
+    --shadow: #cdd6f44f;
 }
 
 html {
diff --git a/public/css/colorschemes/catppuccin-macchiato.css b/public/css/colorschemes/catppuccin-macchiato.css
index 5d69ee6..2477eda 100644
--- a/public/css/colorschemes/catppuccin-macchiato.css
+++ b/public/css/colorschemes/catppuccin-macchiato.css
@@ -1,11 +1,93 @@
 :root {
-    --background: #181926;
-    --background-secondary: #363a4f;
-    --foreground: #cad3f5;
-    --links: #8aadf4;
-    --warning: #ff7272;
-    --warning-box-bg: #f64a3c;
-    --warning-box-border: #c81a11;
+    --ctp-macchiato-rosewater: #f4dbd6;
+    --ctp-macchiato-rosewater-rgb: 244 219 214;
+    --ctp-macchiato-rosewater-hsl: 10.000 57.692% 89.804%;
+    --ctp-macchiato-flamingo: #f0c6c6;
+    --ctp-macchiato-flamingo-rgb: 240 198 198;
+    --ctp-macchiato-flamingo-hsl: 0.000 58.333% 85.882%;
+    --ctp-macchiato-pink: #f5bde6;
+    --ctp-macchiato-pink-rgb: 245 189 230;
+    --ctp-macchiato-pink-hsl: 316.071 73.684% 85.098%;
+    --ctp-macchiato-mauve: #c6a0f6;
+    --ctp-macchiato-mauve-rgb: 198 160 246;
+    --ctp-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
+    --ctp-macchiato-red: #ed8796;
+    --ctp-macchiato-red-rgb: 237 135 150;
+    --ctp-macchiato-red-hsl: 351.176 73.913% 72.941%;
+    --ctp-macchiato-maroon: #ee99a0;
+    --ctp-macchiato-maroon-rgb: 238 153 160;
+    --ctp-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
+    --ctp-macchiato-peach: #f5a97f;
+    --ctp-macchiato-peach-rgb: 245 169 127;
+    --ctp-macchiato-peach-hsl: 21.356 85.507% 72.941%;
+    --ctp-macchiato-yellow: #eed49f;
+    --ctp-macchiato-yellow-rgb: 238 212 159;
+    --ctp-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
+    --ctp-macchiato-green: #a6da95;
+    --ctp-macchiato-green-rgb: 166 218 149;
+    --ctp-macchiato-green-hsl: 105.217 48.252% 71.961%;
+    --ctp-macchiato-teal: #8bd5ca;
+    --ctp-macchiato-teal-rgb: 139 213 202;
+    --ctp-macchiato-teal-hsl: 171.081 46.835% 69.020%;
+    --ctp-macchiato-sky: #91d7e3;
+    --ctp-macchiato-sky-rgb: 145 215 227;
+    --ctp-macchiato-sky-hsl: 188.780 59.420% 72.941%;
+    --ctp-macchiato-sapphire: #7dc4e4;
+    --ctp-macchiato-sapphire-rgb: 125 196 228;
+    --ctp-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
+    --ctp-macchiato-blue: #8aadf4;
+    --ctp-macchiato-blue-rgb: 138 173 244;
+    --ctp-macchiato-blue-hsl: 220.189 82.813% 74.902%;
+    --ctp-macchiato-lavender: #b7bdf8;
+    --ctp-macchiato-lavender-rgb: 183 189 248;
+    --ctp-macchiato-lavender-hsl: 234.462 82.278% 84.510%;
+    --ctp-macchiato-text: #cad3f5;
+    --ctp-macchiato-text-rgb: 202 211 245;
+    --ctp-macchiato-text-hsl: 227.442 68.254% 87.647%;
+    --ctp-macchiato-subtext1: #b8c0e0;
+    --ctp-macchiato-subtext1-rgb: 184 192 224;
+    --ctp-macchiato-subtext1-hsl: 228.000 39.216% 80.000%;
+    --ctp-macchiato-subtext0: #a5adcb;
+    --ctp-macchiato-subtext0-rgb: 165 173 203;
+    --ctp-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
+    --ctp-macchiato-overlay2: #939ab7;
+    --ctp-macchiato-overlay2-rgb: 147 154 183;
+    --ctp-macchiato-overlay2-hsl: 228.333 20.000% 64.706%;
+    --ctp-macchiato-overlay1: #8087a2;
+    --ctp-macchiato-overlay1-rgb: 128 135 162;
+    --ctp-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
+    --ctp-macchiato-overlay0: #6e738d;
+    --ctp-macchiato-overlay0-rgb: 110 115 141;
+    --ctp-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
+    --ctp-macchiato-surface2: #5b6078;
+    --ctp-macchiato-surface2-rgb: 91 96 120;
+    --ctp-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
+    --ctp-macchiato-surface1: #494d64;
+    --ctp-macchiato-surface1-rgb: 73 77 100;
+    --ctp-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
+    --ctp-macchiato-surface0: #363a4f;
+    --ctp-macchiato-surface0-rgb: 54 58 79;
+    --ctp-macchiato-surface0-hsl: 230.400 18.797% 26.078%;
+    --ctp-macchiato-base: #24273a;
+    --ctp-macchiato-base-rgb: 36 39 58;
+    --ctp-macchiato-base-hsl: 231.818 23.404% 18.431%;
+    --ctp-macchiato-mantle: #1e2030;
+    --ctp-macchiato-mantle-rgb: 30 32 48;
+    --ctp-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
+    --ctp-macchiato-crust: #181926;
+    --ctp-macchiato-crust-rgb: 24 25 38;
+    --ctp-macchiato-crust-hsl: 235.714 22.581% 12.157%;
+}
+
+:root {
+    --page-width: 900px;
+    --sidebar-width: 15rem;
+    --firefox-shadow: 0 0 20px;
+    --foreground: var(--ctp-macchiato-text);
+    --background: var(--ctp-macchiato-crust);
+    --background-secondary: var(--ctp-macchiato-surface0);
+    --links: var(--ctp-macchiato-sapphire);
+    --shadow: #cdd6f44f;
 }
 
 html {
diff --git a/public/css/colorschemes/catppuccin-mocha.css b/public/css/colorschemes/catppuccin-mocha.css
index 7d91e5e..40f2044 100644
--- a/public/css/colorschemes/catppuccin-mocha.css
+++ b/public/css/colorschemes/catppuccin-mocha.css
@@ -1,11 +1,93 @@
 :root {
-    --background: #11111b;
-    --background-secondary: #313244;
-    --foreground: #cdd6f4;
-    --links: #89b4fa;
-    --warning: #ff7272;
-    --warning-box-bg: #f64a3c;
-    --warning-box-border: #c81a11;
+    --ctp-mocha-rosewater: #f5e0dc;
+    --ctp-mocha-rosewater-rgb: 245 224 220;
+    --ctp-mocha-rosewater-hsl: 9.600 55.556% 91.176%;
+    --ctp-mocha-flamingo: #f2cdcd;
+    --ctp-mocha-flamingo-rgb: 242 205 205;
+    --ctp-mocha-flamingo-hsl: 0.000 58.730% 87.647%;
+    --ctp-mocha-pink: #f5c2e7;
+    --ctp-mocha-pink-rgb: 245 194 231;
+    --ctp-mocha-pink-hsl: 316.471 71.831% 86.078%;
+    --ctp-mocha-mauve: #cba6f7;
+    --ctp-mocha-mauve-rgb: 203 166 247;
+    --ctp-mocha-mauve-hsl: 267.407 83.505% 80.980%;
+    --ctp-mocha-red: #f38ba8;
+    --ctp-mocha-red-rgb: 243 139 168;
+    --ctp-mocha-red-hsl: 343.269 81.250% 74.902%;
+    --ctp-mocha-maroon: #eba0ac;
+    --ctp-mocha-maroon-rgb: 235 160 172;
+    --ctp-mocha-maroon-hsl: 350.400 65.217% 77.451%;
+    --ctp-mocha-peach: #fab387;
+    --ctp-mocha-peach-rgb: 250 179 135;
+    --ctp-mocha-peach-hsl: 22.957 92.000% 75.490%;
+    --ctp-mocha-yellow: #f9e2af;
+    --ctp-mocha-yellow-rgb: 249 226 175;
+    --ctp-mocha-yellow-hsl: 41.351 86.047% 83.137%;
+    --ctp-mocha-green: #a6e3a1;
+    --ctp-mocha-green-rgb: 166 227 161;
+    --ctp-mocha-green-hsl: 115.455 54.098% 76.078%;
+    --ctp-mocha-teal: #94e2d5;
+    --ctp-mocha-teal-rgb: 148 226 213;
+    --ctp-mocha-teal-hsl: 170.000 57.353% 73.333%;
+    --ctp-mocha-sky: #89dceb;
+    --ctp-mocha-sky-rgb: 137 220 235;
+    --ctp-mocha-sky-hsl: 189.184 71.014% 72.941%;
+    --ctp-mocha-sapphire: #74c7ec;
+    --ctp-mocha-sapphire-rgb: 116 199 236;
+    --ctp-mocha-sapphire-hsl: 198.500 75.949% 69.020%;
+    --ctp-mocha-blue: #89b4fa;
+    --ctp-mocha-blue-rgb: 137 180 250;
+    --ctp-mocha-blue-hsl: 217.168 91.870% 75.882%;
+    --ctp-mocha-lavender: #b4befe;
+    --ctp-mocha-lavender-rgb: 180 190 254;
+    --ctp-mocha-lavender-hsl: 231.892 97.368% 85.098%;
+    --ctp-mocha-text: #cdd6f4;
+    --ctp-mocha-text-rgb: 205 214 244;
+    --ctp-mocha-text-hsl: 226.154 63.934% 88.039%;
+    --ctp-mocha-subtext1: #bac2de;
+    --ctp-mocha-subtext1-rgb: 186 194 222;
+    --ctp-mocha-subtext1-hsl: 226.667 35.294% 80.000%;
+    --ctp-mocha-subtext0: #a6adc8;
+    --ctp-mocha-subtext0-rgb: 166 173 200;
+    --ctp-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
+    --ctp-mocha-overlay2: #9399b2;
+    --ctp-mocha-overlay2-rgb: 147 153 178;
+    --ctp-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
+    --ctp-mocha-overlay1: #7f849c;
+    --ctp-mocha-overlay1-rgb: 127 132 156;
+    --ctp-mocha-overlay1-hsl: 229.655 12.775% 55.490%;
+    --ctp-mocha-overlay0: #6c7086;
+    --ctp-mocha-overlay0-rgb: 108 112 134;
+    --ctp-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
+    --ctp-mocha-surface2: #585b70;
+    --ctp-mocha-surface2-rgb: 88 91 112;
+    --ctp-mocha-surface2-hsl: 232.500 12.000% 39.216%;
+    --ctp-mocha-surface1: #45475a;
+    --ctp-mocha-surface1-rgb: 69 71 90;
+    --ctp-mocha-surface1-hsl: 234.286 13.208% 31.176%;
+    --ctp-mocha-surface0: #313244;
+    --ctp-mocha-surface0-rgb: 49 50 68;
+    --ctp-mocha-surface0-hsl: 236.842 16.239% 22.941%;
+    --ctp-mocha-base: #1e1e2e;
+    --ctp-mocha-base-rgb: 30 30 46;
+    --ctp-mocha-base-hsl: 240.000 21.053% 14.902%;
+    --ctp-mocha-mantle: #181825;
+    --ctp-mocha-mantle-rgb: 24 24 37;
+    --ctp-mocha-mantle-hsl: 240.000 21.311% 11.961%;
+    --ctp-mocha-crust: #11111b;
+    --ctp-mocha-crust-rgb: 17 17 27;
+    --ctp-mocha-crust-hsl: 240.000 22.727% 8.627%;
+}
+
+:root {
+    --page-width: 900px;
+    --sidebar-width: 15rem;
+    --firefox-shadow: 0 0 20px;
+    --foreground: var(--ctp-mocha-text);
+    --background: var(--ctp-mocha-crust);
+    --background-secondary: var(--ctp-mocha-surface0);
+    --links: var(--ctp-mocha-sapphire);
+    --shadow: #cdd6f44f;
 }
 
 html {
diff --git a/public/css/master.css b/public/css/master.css
index 3fbd078..4da69c1 100644
--- a/public/css/master.css
+++ b/public/css/master.css
@@ -1,80 +1,74 @@
-/* ── Global Elements ─────────────────────────────────────────────────────────────── */
-
-body {
-    font-family: sans-serif;
-    margin: 0;
-    color: var(--foreground);
-    background-color: var(--background);
-    text-align: left;
-}
-
-ul {
-    list-style-type: square;
-}
-
-hr {
-    border: 1px solid var(--foreground);
-    border-bottom: none;
-}
-
-h1, h2, h3 {
-    margin-top: 0;
-    clear: left;
+@font-face {
+    font-family: 'BigBlue TerminalPlus';
+    src: url('/fonts/BigBlue_TerminalPlus.woff2') format('woff2'),
+    url('/fonts/BigBlue_TerminalPlus.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
 }
 
-img {
-    border: none;
-    max-width: 100%;
+@font-face {
+    font-family: pixel nes;
+    src: url("/fonts/Pixel_NES.eot?") format("eot"),
+    url("/fonts/Pixel_NES.woff") format("woff"),
+    url("/fonts/Pixel_NES.ttf") format("truetype");
+    font-style: normal;
+    font-weight: 400;
 }
 
-pre {
-    display: inline;
-    max-width: 95%;
-    overflow: auto;
+@font-face {
+    font-family: nec_apc3;
+    src: url("/fonts/Web437_NEC_APC3_8x16.woff") format("woff");
+    font-style: normal;
+    font-weight: 400;
 }
 
-nav {
-    margin-bottom: 0.3em;
-    text-align: left;
+@font-face {
+    font-family: nec_apc3;
+    src: url("/fonts/Web437_Nix8810_M16.woff") format("woff");
+    font-style: normal;
+    font-weight: 700;
 }
 
-nav img {
-    width: 32px;
+@supports (-moz-appearance:none) {
+    h2 {
+        text-shadow: var(--firefox-shadow) var(--shadow) !important;
+    }
 }
 
-nav h1 {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-    font-weight: normal;
-    font-size: 30px;
-    margin: 10px 10px 10px 0;
+html,
+body,
+.container {
+    height: 100%;
 }
 
-video {
-    max-width: 100%;
+body {
+    background-color: var(--background);
+    color: var(--foreground);
 }
 
-table {
-    border-collapse: collapse;
-    border-color: var(--foreground);
+body,
+button,
+select {
+    font-family: russiangothic, ms ui gothic, "nec_apc3", Tahoma, sans-serif;
 }
 
-table td {
-    border: 1px solid var(--foreground);
+h1,
+h2,
+h3,
+h4 {
+    font-family: "pixel nes", sans-serif;
 }
 
-td {
-    padding: 0;
-    vertical-align: top;
+h1,
+h2,
+h3,
+h4,
+ul,
+p {
+    margin: 0;
 }
 
-h1 { font-size: 150%; }
-
-h2 { font-size: 130%; }
-
-h3 { font-size: 115%; }
-
 a {
     color: var(--links);
     text-decoration: underline dotted;
@@ -84,143 +78,94 @@ a:hover {
     text-decoration: underline;
 }
 
-caption h1,
-caption h2 {
-    margin: 0;
-}
-
-caption {
-    text-align: left;
-}
-
-button {
-    color: var(--foreground);
-    background-color: var(--background);
-    border: var(--foreground) solid 1px;
-}
-
-button:hover {
-    color: var(--background);
-    background-color: var(--foreground);
-}
-
-/* ── Common Styles ───────────────────────────────────────────────────────────────── */
-
-div.page {
-    /*min-width: 1000px;*/
-    /*max-width: 1100px;*/
-    width: 975px;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-    margin: auto;
-}
-
-h1.inline {
-    margin-top: 0;
-    clear: none;
-    display: inline;
-}
-
-img.right {
-    float: right;
-    margin-left: 0.5em;
-}
-
-table.form td {
-    border: none;
+ul {
+    list-style: square;
+    padding-left: 0;
+    list-style-position: inside;
 }
 
-img.pixel {
-    image-rendering: pixelated;
+.container {
+    display: flex;
+    /*align-items: center;*/
+    justify-content: center;
 }
 
-td.diagonal-line {
-    background: linear-gradient(to right bottom, var(--background) 0%,var(--background) 49.9%,var(--foreground) 50%,var(--foreground) 51%,var(--background) 51.1%,var(--background) 100%);
+.page {
+    min-width: var(--page-width);
+    max-width: var(--page-width);
 }
 
-.info-section {
-    margin-top: 20px;
+.navbar {
+    border: var(--foreground) solid 1px;
 }
 
-.info-section ul,
-ul.quick-specs {
-    list-style-position: inside;
+.navbar ul {
     list-style-type: none;
-    padding-left: 0;
-    margin: 0;
-}
-
-.info-section ul li:before {
-    content: "◆ ";
-}
-
-.info-section h2 {
     margin: 0;
+    padding: 0;
+    overflow: hidden;
 }
 
-.info-section p {
-    margin: 0;
-}
-
-table.info-table tr td {
-    border: none;
-    padding-right: 5px;
-}
-
-table.info-table {
-    width: 100%;
+.navbar li {
+    float: left;
+    border-right: solid var(--foreground) 1px;
 }
 
-table.info-table tr td h1,
-table.info-table tr td h2,
-table.info-table tr td small {
-    margin: 0;
+.navbar li a {
+    display: block;
+    text-align: center;
+    color: var(--foreground);
+    text-decoration: none;
+    padding: 5px 7px 5px 5px;
 }
 
-table.info-table tr td small {
-    margin-bottom: 5px;
+.navbar li a:hover {
+    background-color: var(--foreground);
+    color: var(--background);
 }
 
-/* ── Footer ──────────────────────────────────────────────────────────────────────── */
-
-.footer p {
-    vertical-align: middle;
-    margin: 0;
-    line-height: 1.2;
+.pathbar {
+    border: 1px solid var(--foreground);
+    padding: 5px;
 }
 
-.footer button,
-.footer select{
-    padding: 5px 10px;
+.content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 0;
 }
 
-label[for="scheme-selector"] {
-    font-weight: bold;
+.section {
+    border: var(--foreground) 1px solid;
+    padding: 10px;
 }
 
-#scheme-selector {
-    border: var(--foreground) solid 1px;
-    background-color: var(--background-secondary);
-    color: var(--foreground)
+.sidebar {
+    flex-basis: var(--sidebar-width);
+    flex-grow: 1;
 }
 
-div.footer {
-    text-align: center;
-    margin-bottom: 5px;
+.main {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: 50%;
 }
 
-div.footer a.button {
-    text-decoration: none;
+.navbar,
+.content,
+.header,
+.footer {
+    margin: 10px 10px 0 0;
 }
 
-
-/* ── Navbar ──────────────────────────────────────────────────────────────────────── */
-
-a:hover img.navbar-icon {
-    opacity: 80%;
+.header,
+.footer,
+.navbar {
+    padding: 5px;
 }
 
-.nav-wrapper {
+.footer {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1fr;
@@ -228,236 +173,69 @@ a:hover img.navbar-icon {
     grid-row-gap: 0;
 }
 
-.nav-wrapper div:nth-child(2) {
+.footer div:last-child {
     text-align: right;
 }
 
-/* ── Header ──────────────────────────────────────────────────────────────────────── */
-
-.header a {
-    text-decoration: none;
-}
-
-.header .title {
-    color: var(--foreground);
-}
-
-.header {
-    font-size: 100%;
-    font-weight: normal;
-    padding-bottom: 0;
-    text-align: center;
-}
-
-/* ── Computers ───────────────────────────────────────────────────────────────────── */
-
-table.computers {
-    table-layout: auto;
-    width: 100%;
-}
-
-table.computers td ul {
-    margin: 0;
-    padding-left: 20px;
-}
-
-table.computers .section-title {
-    text-decoration: underline;
-    font-style: italic;
-    font-weight: bold;
-}
-
-table.computers p.description {
-    font-style: italic;
-    margin: 5px 0 2px 0;
-}
-
-table.computers th {
+select {
     background-color: var(--background-secondary);
+    border: 1px solid var(--foreground);
+    color: var(--foreground);
+    padding: 0.25em;
 }
 
-table.computers td:first-child {
-    white-space: nowrap;
-}
-
-table.computers td,
-table.computers th {
-    border: var(--foreground) solid 1px;
-    padding: 5px;
-}
-
-/* ── Forms ───────────────────────────────────────────────────────────────────────── */
-
-table.form tr td {
-    border: none;
-}
-
-table.form tr td label {
-    padding-right: 5px;
-}
-
-table.form tr td span.text-danger {
-    padding-left: 5px;
-    color: var(--warning);
-}
-
-table.form tr td textarea,
-table.form tr td input,
-table.form tr td button {
+button {
     background-color: var(--background);
-    border: var(--foreground) solid 1px;
-}
-
-table.form label {
-    margin: 5px 0;
-}
-
-table.form tr td button {
     color: var(--foreground);
-    background-color: var(--background-secondary);
+    border: 1px solid var(--foreground);
+    padding: 0.25em 0.5em;
 }
 
-table.form tr td button:hover {
-    color: var(--background);
+button:hover {
     background-color: var(--foreground);
+    color: var(--background);
 }
 
-table.form tbody tr td textarea {
-    width: 210px;
-}
-
-/* ── Guestbook ───────────────────────────────────────────────────────────────────── */
-
-table.gb-entry-form-container {
-    width: 100%;
-}
-
-table.gb-entry-form-container tr td {
-    border: none;
-    vertical-align: top;
-}
-
-table.gb-entry-form-container tr td p,
-table.gb-entry-form-container tr td ul {
-    margin: 0;
-}
-
-table.gb-entry tr td {
-    border: solid var(--foreground) 1px;
-    width: 500px;
-    vertical-align: top;
-    padding: 5px;
-}
-
-table.gb-entry {
-    margin-bottom: 5px;
-}
-
-table.gb-entry hr {
-    border: 1px dotted var(--foreground);
-    border-bottom: none;
-}
-
-table.gb-entry address {
-    font-size: 0.8pc;
-}
-
-.guestbook-message {
-    text-wrap: normal;
-    width: 100%;
-}
-
-
-/* ── Calculators ─────────────────────────────────────────────────────────────────── */
-
-.calculator-spec-table td {
-    padding: 5px 10px 5px 5px;
-}
-
-.calculator-spec-table tr td:first-child {
-    background-color: var(--background-secondary);
-}
-
-/* ── Music ───────────────────────────────────────────────────────────────────────── */
-
-.music-top10 td,
-.music-top10 th {
-    border: none;
-    border-left: 1px dotted var(--foreground);
-    padding: 2px 5px
-}
-
-.music-top10 tr:nth-child(1) th {
-    border-bottom: 1px dotted var(--foreground);
-}
-
-.music-top10 tr:nth-child(2) td {
-    padding-top: 5px;
-}
-
-.music-top10 td:first-child,
-.music-top10 th:first-child {
-    border: none;
-}
-
-.music-top10 tr th:first-child {
-    text-align: right;
-}
-
-.music-top10 td {
-    white-space: nowrap; text-overflow:ellipsis; overflow: hidden;
+img.pixel {
+    image-rendering: pixelated;
 }
 
-.music-top10 tr td:first-child {
-    text-align: right;
+a.button,
+a.button:hover {
+    text-decoration: none;
 }
 
-.music-top10 tr td:nth-child(2),
-.music-top10 tr td:nth-child(3) {
-    width: 50%;
+a.button:hover img {
+    opacity: 80%;
 }
 
-.current-track {
-    width: 100%;
+.main > .section,
+.sidebar > .section {
+    margin-bottom: 10px;
 }
 
-.current-track h2 {
-    margin: 0;
+.main > .section:last-child,
+.sidebar > .section:last-child {
+    margin-bottom: 0;
 }
 
-/* ── Misc ────────────────────────────────────────────────────────────────────────── */
-
-.red-banner {
-    border: 3px solid var(--foreground);
-    background-color: var(--background-secondary);
+.navbar-icon {
+    margin-right: 0.25em;
 }
 
-.banner {
-    padding: 5px;
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 0;
-    grid-row-gap: 0;
+.navlinks {
+    padding-left: 10px;
 }
 
-.banner div:nth-child(1) {
-    text-align: left;
+.online-status {
+    display: inline;
 }
 
-.banner div:nth-child(2) {
-    text-align: right;
+.centerbox {
+    text-align: center;
 }
 
-.error-box {
-    width: 500px;
-    border: 5px solid var(--warning-box-border);
-    background-color: var(--warning-box-bg);
-    padding: 5px;
-}
-.error-box a,
-.error-box p {
-    margin: 0;
-    color: var(--foreground)
+.quote {
+    padding-left: 10px;
+    border-left: solid 2px var(--foreground);
 }