fixup! restyle

static/scss/main.scss

@@ -1,13 +1,33 @@
+$base: #1e1e2e;
+$text: #cdd6f4;
+
+$mantle: #181825;
+$crust: #11111b;
+
+$overlay0: #6c7086;
+$overlay1: #7f849c;
+$overlay2: #9399b2;
+
+$surface0: #313244;
+$surface1: #45475a;
+$surface2: #585b70;
+
+$subtext0: #a6adc8;
+$subtext1: #bac2de;
+
+$blue: #89b4fa;
+
+
 body {
-  background-color: #1e1e2e;
+  background-color: $base;
   font-family: Pixeloid;
-  color: #cdd6f4;
+  color: $text;
 }
 
 a {
   color: unset;
   text-decoration: underline;
-  text-decoration-color: #89b4fa;
+  text-decoration-color: $blue;
   text-underline-offset: 1px;
   transition: text-underline-offset 0.3s ease;
 
@@ -23,7 +43,22 @@ a {
 
 .mono {
   font-family: "Monocraft", monospace;
-  color: #9399b2;
+  background-color: $mantle;
+  color: $subtext0;
+
+  &:hover {
+    background-color: $crust;
+  }
+}
+
+.services {
+  background-color: $surface0;
+  border-radius: 8px;
+  padding: 8px;
+
+  & + & {
+    margin-top: 16px;
+  }
 }
 
 @font-face {

static/sript/copy-mono.js

@@ -0,0 +1,7 @@
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.mono').forEach(element => {
+    element.addEventListener('click', async () => {
+      await navigator.clipboard.writeText(element.textContent);
+    });
+  });
+});