fin

src/app.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
@@ -67,6 +68,10 @@
   --color-base: #fbf1c7;
   --color-mantle: #f3eac1;
   --color-crust: #e7deb7;
+
+  --font-mono:
+    "Source Code Pro", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -125,6 +130,10 @@
     --color-base: #1e1e2e;
     --color-mantle: #141620;
     --color-crust: #0e0f16;
+
+    --font-mono:
+      "Source Code Pro", ui-monospace, "Cascadia Code", "Source Code Pro",
+      Menlo, Consolas, "DejaVu Sans Mono", monospace;
   }
 }
 
@@ -498,6 +507,9 @@ input[type="checkbox"]:checked::before {
   transform-origin: bottom left;
   background-color: var(--color-surface2);
 }
+a.hover-underline-animation:hover::after {
+  background-color: var(--color-blue) !important;
+}
 .image-overlay::before {
   content: "";
   position: absolute;