Css + fonts..

css/src/button.pcss

@@ -1,9 +1,14 @@
 .btn {
-    @apply font-bold py-2 px-4 rounded;
+    @apply font-semibold py-2 px-4 rounded;
 
     &:focus {
         @apply outline-none shadow-outline;
     }
+
+    &:hover {
+        --CASL: 1;
+        @apply font-extrabold;
+    }
 }
 
 .btn-teal {

css/src/fonts.pcss

@@ -0,0 +1,19 @@
+@font-face {
+    font-family: 'Recursive';
+    font-weight: 300 800;
+    font-display: swap;
+    src: url(/recursive-0.0.1.woff2) format('woff2');
+}
+
+:root {
+    --MONO: 0;
+    --CASL: 0;
+    --slnt: 0;
+    --CRSV: 0.5;
+}
+
+*,
+*:before,
+*:after {
+    font-variation-settings: "MONO" var(--MONO), "CASL" var(--CASL), "slnt" var(--slnt), "CRSV" var(--CRSV);
+}

css/src/navbar.pcss

@@ -6,7 +6,8 @@
         @apply text-2xl text-gray-100 font-bold;
 
         &:hover {
-            @apply text-blue-300;
+            @apply text-blue-300 underline font-extrabold;
+            --CASL: 1;
         }
     }
 
@@ -25,7 +26,8 @@
             @apply text-gray-100 font-semibold;
 
             &:hover {
-                @apply underline text-blue-300;
+                @apply underline text-blue-300 font-bold;
+                --CASL: 1;
             }
         }
     }

css/src/note.pcss

@@ -51,7 +51,7 @@
     ul,
     ol {
         ul {
-            list-style-type: circle;
+            @apply list-disc;
         }
 
         ul,
@@ -76,17 +76,23 @@
         ul,
         ol,
         dl {
-            margin: 0;
+            @apply m-0;
         }
     }
 
     b,
     strong {
-        font-weight: bold;
+        @apply font-bold;
     }
 
     pre {
         @apply my-4 rounded-md overflow-x-auto p-2 block font-mono bg-gray-800;
+        --MONO: 1;
     }
 
 }
+
+#markdown {
+    @apply w-full bg-gray-800 p-5 outline-none font-mono;
+    --MONO: 1;
+}

css/src/other.pcss

@@ -7,6 +7,7 @@
 
     &:hover {
         @apply bg-teal-800 text-white;
+        --CASL: 1;
     }
 
     &.disabled {

css/src/search.pcss

@@ -13,11 +13,11 @@
         @apply flex flex-1 justify-between mb-2;
 
         button {
-            @apply flex-1 btn btn-green;
+            @apply flex-1;
         }
 
         a, span {
-            @apply ml-2 flex-1 btn btn-red inline-block text-center;
+            @apply ml-2 flex-1 inline-block text-center;
         }
     }
 }

css/src/styles.pcss

@@ -1,3 +1,5 @@
+@import "fonts.pcss";
+
 /*noinspection CssUnknownTarget*/
 @import "tailwindcss/base";