styling updates

serve/assets/css/style.css

@@ -1,3 +1,25 @@
+@font-face {
+    font-family: OverpassNerd;
+    src: url("/assets/fonts/overpass/OverpassNerdFont-Regular.otf") format("opentype");
+}
+:root {
+  --main-bg-color: #111317;
+  --main-fg-color: #d7afaf;
+  --theme-white: #e4e4e4;
+  --secondary-bg-color: color-mix(in srgb, var(--main-bg-color) 35%, var(--main-fg-color) 65%);
+}
+
+body {
+  background-color: rgba(from var(--main-bg-color) r g b / 1);
+}
+
+h1,h2,h3 {
+  text-align: center;
+}
+h1,h2,h3,p,a {
+  font-family: 'OverpassNerd', sans-serif;
+  color: rgba(from var(--main-fg-color) r g b / 1);
+}
 
 .body {
   display: flex;
@@ -12,10 +34,10 @@
   min-width: 30%;
   max-width: 400px;
   flex-grow: 1;
-  background-color: rgba(255,0,0,0.3);
+/*  background-color: rgba(255,0,0,0.3);*/
 }
 .content {
-  background-color: rgba(0,255,0,0.3);
+/*  background-color: rgba(0,255,0,0.3);*/
   max-width: 60vmax;
 }
 
@@ -23,9 +45,30 @@
   img {
     display: block;
     margin: auto;
-    width: 60%;
+/*    width: 60%;*/
+    width: 12em;
     aspect-ratio: 88 / 31;
   }
+  h1 {
+    border-top: 1px dashed;
+    padding-top: 1vh;
+  }
+  h2 {
+/*    line-height: 0.25;*/
+    border-top: 1px dotted;
+    padding-top: 1vh;
+  }
+  p {
+    text-align: center;
+    font-size: 1.1em;
+  }
+}
+#rats {
+  img {
+    display: block;
+    margin: auto;
+    width: 90%;
+  }
 }
 
 img {
@@ -34,5 +77,6 @@ img {
 .markdown-module {
   padding: 1vmax 2vmax;
   margin: 1vmax 0;
-  background-color: #f0f0f044;
+  background-color: rgba(from var(--secondary-bg-color) r g b / 0.2);
+  border-radius: 8px;
 }