diff --git a/public/fonts/AurebeshTypewriter-Light.otf b/public/fonts/AurebeshTypewriter-Light.otf
deleted file mode 100644
index 4325963..0000000
Binary files a/public/fonts/AurebeshTypewriter-Light.otf and /dev/null differ
diff --git a/public/fonts/Aurebesh_Rodian-Oblique.otf b/public/fonts/Aurebesh_Rodian-Oblique.otf
deleted file mode 100644
index 8a1d670..0000000
Binary files a/public/fonts/Aurebesh_Rodian-Oblique.otf and /dev/null differ
diff --git a/public/fonts/Aurebesh_Rodian-OblqOutline.otf b/public/fonts/Aurebesh_Rodian-OblqOutline.otf
deleted file mode 100644
index 7435c1f..0000000
Binary files a/public/fonts/Aurebesh_Rodian-OblqOutline.otf and /dev/null differ
diff --git a/public/fonts/Aurebesh_Rodian-Outline.otf b/public/fonts/Aurebesh_Rodian-Outline.otf
deleted file mode 100644
index b30354f..0000000
Binary files a/public/fonts/Aurebesh_Rodian-Outline.otf and /dev/null differ
diff --git a/src/components/DualText.tsx b/src/components/DualText.tsx
index a44161a..57f7cb6 100644
--- a/src/components/DualText.tsx
+++ b/src/components/DualText.tsx
@@ -1,6 +1,12 @@
 import { ligatures } from "./store";
 
-export default function DualText({ text }: { text: string }) {
+export default function DualText({
+  text,
+  hover = false,
+}: {
+  text: string;
+  hover?: boolean;
+}) {
   const words: string[] = [];
   text.split(/\n/).forEach((line, index, lines) => {
     line.split(/\b(?=\w)/).forEach((word) => {
@@ -31,7 +37,7 @@ export default function DualText({ text }: { text: string }) {
         return (
           <span class="dualtext-word aurebesh">
             {word}
-            <div className="dualtext-help">
+            <div class="dualtext-help" data-hover={hover}>
               {letters.map((character) => {
                 return <span data-character={character} />;
               })}
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index f9965ab..82f0e44 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -31,8 +31,10 @@ export default function Main() {
           <FontPicker />
           <ReadingBox />
         </div>
-        <Reference />
       </main>
+      <footer>
+        <Reference />
+      </footer>
     </>
   );
 }
diff --git a/src/components/ReadingBox.tsx b/src/components/ReadingBox.tsx
index d576235..75b1cbd 100644
--- a/src/components/ReadingBox.tsx
+++ b/src/components/ReadingBox.tsx
@@ -26,15 +26,17 @@ Pursued by the Empire's sinister agents, Princess Leia races home aboard her sta
   return (
     <div class="readingbox">
       <span>
-        <label htmlFor="edit-toggle">Edit</label>
-        <input
-          type="checkbox"
-          id="edit-toggle"
-          selected={isEditing}
-          onChange={(event) => {
-            isEditing.value = event.currentTarget.checked;
-          }}
-        />
+        <label>
+          Edit{" "}
+          <input
+            type="checkbox"
+            id="edit-toggle"
+            selected={isEditing}
+            onChange={(event) => {
+              isEditing.value = event.currentTarget.checked;
+            }}
+          />
+        </label>
       </span>
       {isEditing.value && (
         <textarea
@@ -50,7 +52,7 @@ Pursued by the Empire's sinister agents, Princess Leia races home aboard her sta
         />
       )}
       <div class="readingbox-text aurebesh">
-        <DualText text={contents.value} />
+        <DualText text={contents.value} hover />
       </div>
     </div>
   );
diff --git a/src/components/store.ts b/src/components/store.ts
index edbb307..68134f9 100644
--- a/src/components/store.ts
+++ b/src/components/store.ts
@@ -24,26 +24,10 @@ export const fonts: Record<
     ligatures: ["ch", "sh", "th", "ae", "eo", "kh", "ng", "oo"],
     lowercase: false,
   },
-  "Aurebesh_Rodian-Oblique": {
-    ligatures: [],
-    lowercase: false,
-  },
-  "Aurebesh_Rodian-OblqOutline": {
-    ligatures: [],
-    lowercase: false,
-  },
   Aurebesh_Rodian: {
     ligatures: [],
     lowercase: false,
   },
-  "Aurebesh_Rodian-Outline": {
-    ligatures: [],
-    lowercase: false,
-  },
-  "AurebeshTypewriter-Light": {
-    ligatures: [],
-    lowercase: true,
-  },
   "AurebeshTypewriter-Regular": {
     ligatures: [],
     lowercase: true,
diff --git a/src/style.css b/src/style.css
index 31672ec..04bf950 100644
--- a/src/style.css
+++ b/src/style.css
@@ -22,26 +22,10 @@
   src: url(/fonts/AurebeshAF-LegendsTech.otf) format("opentype");
   size-adjust: 80%;
 }
-@font-face {
-  font-family: "Aurebesh_Rodian-Oblique";
-  src: url(/fonts/Aurebesh_Rodian-Oblique.otf) format("opentype");
-}
-@font-face {
-  font-family: "Aurebesh_Rodian-OblqOutline";
-  src: url(/fonts/Aurebesh_Rodian-OblqOutline.otf) format("opentype");
-}
 @font-face {
   font-family: "Aurebesh_Rodian";
   src: url(/fonts/Aurebesh_Rodian.otf) format("opentype");
 }
-@font-face {
-  font-family: "Aurebesh_Rodian-Outline";
-  src: url(/fonts/Aurebesh_Rodian-Outline.otf) format("opentype");
-}
-@font-face {
-  font-family: "AurebeshTypewriter-Light";
-  src: url(/fonts/AurebeshTypewriter-Light.otf) format("opentype");
-}
 @font-face {
   font-family: "AurebeshTypewriter-Regular";
   src: url(/fonts/AurebeshTypewriter-Regular.otf) format("opentype");
@@ -90,7 +74,7 @@
   --font-aurebesh: Droidobesh;
   --font-standard: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
 
-  font-size: clamp(100%, 0.5rem + 1vw, 150%);
+  font-size: clamp(100%, 0.25rem + 1.5vw, 150%);
   box-sizing: border-box;
 }
 
@@ -123,6 +107,12 @@ textarea {
   margin: 0;
 }
 
+input[type="radio"],
+input[type="checkbox"] {
+  height: 0.75em;
+  width: 0.75em;
+}
+
 #app {
   flex-grow: 1;
   display: flex;
@@ -136,11 +126,11 @@ textarea {
 }
 
 h1 {
-  font-size: clamp(1rem, 1.75rem, 9vw);
+  font-size: clamp(1rem, 9vw, 1.75rem);
 }
 
 .aurebesh {
-  font-size: 1.5em;
+  font-size: clamp(1.2rem, 3vw, 1.5rem);
   font-family: var(--font-aurebesh);
 }
 
@@ -169,8 +159,9 @@ h1 {
 .dualtext-help > span {
   position: relative;
   min-width: 0;
-  transition: opacity 0.1s ease-in;
-  transition-delay: 0.15s;
+}
+.dualtext-help > [data-character=" "] {
+  pointer-events: none;
 }
 .dualtext-help > span::before {
   content: attr(data-character);
@@ -181,7 +172,7 @@ h1 {
   content: attr(data-character);
   pointer-events: none;
   position: absolute;
-  top: 70%;
+  top: 80%;
   left: 50%;
   transform: translateX(-50%);
   margin: auto;
@@ -192,6 +183,7 @@ h1 {
   line-height: 1;
   font-weight: 400;
   color: var(--color-text-light);
+  transition: all 0.2s ease-in;
 }
 
 .reference {
@@ -202,10 +194,11 @@ h1 {
 }
 
 main {
+  flex-grow: 1;
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 40rem;
+  max-width: 60rem;
   margin: 0 auto;
 }
 
@@ -213,6 +206,8 @@ main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
+  line-height: 1.1;
+  text-align: left;
 }
 
 .readingbox-text {
@@ -222,14 +217,14 @@ main {
   padding: 1em;
 }
 
-.readingbox .dualtext-help {
+.dualtext-help[data-hover="true"] {
   pointer-events: all;
 }
-.readingbox .dualtext-help > span {
+.dualtext-help[data-hover="true"] > span {
   opacity: 0;
   --color-text-light: var(--color-accent1);
 }
-.readingbox .dualtext-help > span::after {
+.dualtext-help[data-hover="true"] > span::after {
   top: auto;
   bottom: 70%;
   padding-bottom: 0.5em;
@@ -245,8 +240,16 @@ main {
   line-height: 1;
   text-align: center;
 }
-.readingbox .dualtext-help > span:hover {
+.dualtext-help[data-hover="true"] > span:hover {
   opacity: 1;
   box-shadow: 0 0 1em 0.2em var(--color-accent2);
   border-radius: 0.25em;
 }
+.dualtext-help[data-hover="true"] > span::after {
+  transform: translateX(-50%) translateY(10%);
+  opacity: 0;
+}
+.dualtext-help[data-hover="true"] > span:hover::after {
+  transform: translateX(-50%) translateY(0%);
+  opacity: 1;
+}