diff --git a/static/style.css b/static/style.css
index f27374d..5d3a254 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,10 +1,56 @@
-/* make footer image display correctly */
+:root {
+    /* gruvbox material medium dark https://github.com/sainnhe/gruvbox-material */
+    --bg_dim: #1b1b1b;
+    --bg0: #282828;
+    --bg1: #32302f;
+    --bg2: #32302f;
+    --bg3: #45403d;
+    --bg4: #45403d;
+    --bg5: #5a524c;
+    --bg_statusline1: #32302f;
+    --bg_statusline2: #313735;
+    --bg_statusline3: #504945;
+    --bg_diff_green: #34381b;
+    --bg_visual_green: #3b4439;
+    --bg_diff_red: #402120;
+    --bg_visual_red: #4c3432;
+    --bg_diff_blue: #0e363e;
+    --bg_visual_blue: #373131;
+    --bg_visual_yellow: #4f422e;
+    --bg_current_word: #3c3836;
+    --fg0: #d4be98;
+    --fg1: #ddc7a1;
+    --red: #ea6962;
+    --orange: #e78a4e;
+    --yellow: #d8a657;
+    --green: #a9b665;
+    --aqua: #89b482;
+    --blue: #7daea3;
+    --purple: #d3869b;
+    --bg_red: #ea6962;
+    --bg_green: #a9b665;
+    --bg_yellow: #d8a657;
+    --grey0: #7c6f64;
+    --grey1: #928374;
+    --grey2: #a89984;
 
-#cc-badge-div {
-    width: 88px;
-    height: 31px;
-    padding-top: 20px;
-    padding-right: 10px;
-    float: left !important;
+    --background: var(--bg0);
+    --foreground: var(--fg0);
+    --accent: var(--green);
+    --faint_foreground: var(--grey0);
+}
+
+/* note: grey0 is actually fg0 with 0.5 opacity over bg0, so the below footer css has no effect. however, i've decided
+ * to write it this way because i prefer to not use opacity to create colours when possible, instead setting
+ * full-opacity explicit/unmodified colours. opacity is still used to create the dimmer hr in the footer.
+ * I would set the hr full opacity but there isn't really a "dim green" I can use. */
+
+.footer {
+    opacity: 1 !important;
+    color: var(--faint_foreground);
+}
+
+.footer hr {
+    opacity: 0.5;
 }