diff --git a/html/pop_up.html b/html/pop_up.html
index eb24c0e..e991632 100644
--- a/html/pop_up.html
+++ b/html/pop_up.html
@@ -2,7 +2,7 @@
             <div id="popup">
                 <h1>um</h1>
                 <p id="popup-heo"></p>
-                <div class="spacer"></div>
+                <div id="spacerhide" class="spacer"></div>
                 <div id="popup-middle">
                     <div id="popup-quirks-container"><span id="popup-quirks"></span></div>
                 </div>
diff --git a/main.js b/main.js
index d29e0f6..99a73ee 100644
--- a/main.js
+++ b/main.js
@@ -282,7 +282,7 @@ function showPopup(ogword, word, quirks = "") {
     p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
     p.querySelector("#popup-quirks").innerHTML = "";
     if (quirks.trim() != "") {
-        p.querySelector("#popup-quirks-container").style.display = "block";
+        p.querySelector("#popup-middle").style.display = "block";
         let qyuirks = quirks.split(" ");
         qyuirks.forEach(quirk => {
             let badge = document.createElement("div");
@@ -292,10 +292,11 @@ function showPopup(ogword, word, quirks = "") {
                 badge.style.boxShadow = "0px 0px 4px " + quirkBadges[quirk]["color"] + "cc";
                 badge.innerText = quirkBadges[quirk]["name"];
                 badge.onclick = () => {
+                    p.querySelector("#spacerhide").style.display = "none";
+                    p.querySelector("#popup-middle").style.display = "none";
                     p.querySelector("h1").innerText = quirkBadges[quirk]["name"];
                     p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
                     //p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
-                    p.querySelector("#popup-quirks-container").style.display = "none";
                     p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
                 }
             } catch (e) {
@@ -304,9 +305,11 @@ function showPopup(ogword, word, quirks = "") {
                 badge.innerText = quirkBadges["unknown-tag"]["name"];                    
             }
             p.querySelector("#popup-quirks").appendChild(badge);
+            p.querySelector("#spacerhide").style.display = "block";
         });
     } else {
-        p.querySelector("#popup-quirks-container").style.display = "none";
+        p.querySelector("#spacerhide").style.display = "none";
+        p.querySelector("#popup-middle").style.display = "none";
     }
     c.style.opacity = 1;
     c.style.pointerEvents = "all";
diff --git a/text_analysis.css b/text_analysis.css
index 23c67bf..71729ce 100644
--- a/text_analysis.css
+++ b/text_analysis.css
@@ -223,7 +223,7 @@ main {
 }
 
 #popup-heo, #smol-heo {
-    font-family: "heonian";
+    font-family: var(--font-heonian);
     text-align: center;
     margin: 4px;
     margin-bottom: 8px;