change hero height to 55vh

src/app.css

@@ -1,9 +1,12 @@
 @import "tailwindcss";
+@import url("./kanit.css");
+@import url("./hero.css");
 
 @plugin "flowbite/plugin";
 @plugin "flowbite-typography";
 
 @source "../node_modules/flowbite";
+@source "../node_modules/bad-words";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -18,8 +21,10 @@
     --color-primary-700: #1d4ed8;
     --color-primary-800: #1e40af;
     --color-primary-900: #1e3a8a;
-    
+    --color-nav-light: rgba(255,255,255,1);
+    --color-nav-dark: rgba(31,41,55,1);
+
     --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
-}
+}

src/app.js

@@ -3,4 +3,5 @@ import './app.css';
 import 'flowbite';
 import './dark-mode';
 import './navbar';
-import './current-year';
+import './current-year';
+import './contact-form';

src/contact-form.js

@@ -0,0 +1,37 @@
+/*
+This grabs a querystring named topic and puts it in the subject of an email via the web form.
+
+It goes through a few checks prior to inserting it.
+    - Filters out bad words
+    - Truncates to a maximum of 30 characters
+
+TODO: Optionally check for allowed topics.
+*/
+
+window.addEventListener('DOMContentLoaded', async function () {
+  const FilterModule = await import('bad-words');
+  const voca = await import('voca');
+  const Filter = FilterModule.Filter;
+
+  if (typeof Filter !== 'function') {
+    console.error("bad-words: named export 'Filter' is not a constructor:", FilterModule);
+    return;
+  }
+
+  const filter = new Filter();
+
+  const subjectEl = document.querySelector("form[name='contact'] input[name='subject']");
+  if (!subjectEl) return;
+
+  const topicParam = new URLSearchParams(window.location.search).get('topic') || 'none';
+  if (topicParam === 'none') return;
+
+  // Clean and truncate
+  const cleanedTopic = filter.clean(topicParam).substring(0, 30);
+
+  // Title case the cleaned topic
+  const titledTopic = voca.default.titleCase(cleanedTopic);
+
+  const currentSubject = subjectEl.value || 'none';
+  subjectEl.value = currentSubject.concat(" - ", titledTopic);
+});

src/kanit.css

@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit: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');
+.kanit-thin {
+    font-family: "Kanit", sans-serif;
+    font-weight: 100;
+    font-style: normal;
+  }
+  
+  .kanit-extralight {
+    font-family: "Kanit", sans-serif;
+    font-weight: 200;
+    font-style: normal;
+  }
+  
+  .kanit-light {
+    font-family: "Kanit", sans-serif;
+    font-weight: 300;
+    font-style: normal;
+  }
+  
+  .kanit-regular {
+    font-family: "Kanit", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+  
+  .kanit-medium {
+    font-family: "Kanit", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+  }
+  
+  .kanit-semibold {
+    font-family: "Kanit", sans-serif;
+    font-weight: 600;
+    font-style: normal;
+  }
+  
+  .kanit-bold {
+    font-family: "Kanit", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+  
+  .kanit-extrabold {
+    font-family: "Kanit", sans-serif;
+    font-weight: 800;
+    font-style: normal;
+  }
+  
+  .kanit-black {
+    font-family: "Kanit", sans-serif;
+    font-weight: 900;
+    font-style: normal;
+  }
+  
+  .kanit-thin-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 100;
+    font-style: italic;
+  }
+  
+  .kanit-extralight-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 200;
+    font-style: italic;
+  }
+  
+  .kanit-light-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 300;
+    font-style: italic;
+  }
+  
+  .kanit-regular-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 400;
+    font-style: italic;
+  }
+  
+  .kanit-medium-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 500;
+    font-style: italic;
+  }
+  
+  .kanit-semibold-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 600;
+    font-style: italic;
+  }
+  
+  .kanit-bold-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 700;
+    font-style: italic;
+  }
+  
+  .kanit-extrabold-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 800;
+    font-style: italic;
+  }
+  
+  .kanit-black-italic {
+    font-family: "Kanit", sans-serif;
+    font-weight: 900;
+    font-style: italic;
+  }
+