mobile version improvements

css/index.css

@@ -8,15 +8,14 @@
 @import "tailwindcss/components";
 @import "admonition.css";
 @import "tailwindcss/utilities";
-@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
 * {
-  font-family: "Exo", sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
 
 a {
@@ -33,7 +32,7 @@ img[src*="#mx-auto"] {
 }
 
 img[src*="#small"] {
-  width: 68px;
+  width: 60px;
 }
 
 
@@ -47,6 +46,22 @@ img[src*="#medium"] {
   margin: auto;
 }
 
+img[src*="#mobile"] {
+    display: none;
+}
+
+@media (max-width: 440px) {
+    img[src*="#mobile"] {
+        display: block;
+    }
+}
+
+@media (max-width: 440px) {
+    img[src*="#desktop"] {
+        display: none;
+    }
+}
+
 img[src*="#logo"] {
   max-width: min(250px, 100%);
   margin: auto;
@@ -74,7 +89,7 @@ img[src*="#tft_img"] {
     @apply font-semibold;
   }
   h2 {
-    @apply text-4xl md:text-4xl lg:text-5xl xl:text-6xl font-semibold leading-none;
+    @apply text-2xl md:text-4xl lg:text-5xl font-semibold leading-none;
   }
   h2 strong {
     @apply font-medium;
@@ -95,7 +110,7 @@ img[src*="#tft_img"] {
     @apply text-md not-italic font-normal my-1;
   }
   p {
-    @apply text-md lg:text-md font-normal tracking-wide leading-normal;
+    @apply text-sm lg:text-md font-normal tracking-wide leading-normal;
     font-family: "Lato", sans-serif;
   }
   blockquote {
@@ -109,17 +124,27 @@ img[src*="#tft_img"] {
   }
   button {
     @apply inline-block
-    lg:text-lg
-    px-12
+    font-sans
+    text-sm
+    lg:text-xl
+    px-6
+    lg:px-16
     py-1
     mr-5
     my-10
     border-2
+    rounded-3xl
     shadow
+    font-bold
     capitalize;
   }
 }
 
+button.dark {
+  background-color: #1a1a1a;
+}
+
+
 button:hover :is(:where(a)) {
   color: #c6f8ff;
 }
@@ -129,6 +154,7 @@ button :is(:where(p)) {
   font-weight: 400;
 }
 
+/*
 button {
   background-color: #1a1a1a;
   border-radius: 20px;
@@ -136,6 +162,7 @@ button {
   box-shadow: none;
   font-size: 20px;
 }
+*/
 
 button a {
   color: white;

css/layout.css

@@ -128,19 +128,13 @@ h1,
 h2,
 .h2,
 h3,
-.h3 {
-  font-family: "Exo", sans-serif;
-}
-
+.h3, 
 h4,
 .h4,
 h5,
 .h5,
 h6,
-.h6 {
-  @apply font-sans leading-none tracking-tight;
-  font-family: "Lato", sans-serif;
-}
+.h6,
 
 h1,
 .h1 {