lexend font, footer optical alignment

web/base.html

@@ -10,7 +10,6 @@
             sizes="64x64"
             href="/favicon-x64.png"
         />
-
         <script>
             const themes = ["system", "dark", "light"];
             let theme = window.localStorage.getItem("gractwopl-theme");

web/footer.html

@@ -3,10 +3,10 @@
 >
     <div class="flex flex-col sm:grid sm:grid-cols-3 gap-8 mx-auto">
         <section class="max-w-sm w-full">
-            <div class="flex gap-2 pb-4">
+            <div class="flex gap-2 pb-4 items-center">
                 <div class="[&>svg]:size-8">{% include "gractwo.svg" %}</div>
                 <h1
-                    class="font-semibold text-xl px-2 bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% bg-clip-text text-transparent"
+                    class="font-medium pb-0.5 font-lexend text-xl px-2 bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% bg-clip-text text-transparent"
                 >
                     Gractwo
                 </h1>

web/index.html

@@ -9,7 +9,7 @@
         {% include "gractwo.svg" %}
     </div>
     <h1
-        class="text-7xl font-semibold bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text"
+        class="text-7xl font-medium font-lexend bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text"
     >
         Gractwo
     </h1>

web/input.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");
 @import "tailwindcss";
 
 @theme {
@@ -7,6 +8,8 @@
     --color-gractwo-blu: #00d3f2;
     --color-gractwo-blu-semidark: #41aaba;
     --color-gractwo-blu-dark: #3e8f9b;
+
+    --font-lexend: "Lexend", sans-serif;
 }
 
 @custom-variant dark (&:where(.dark, .dark *));