design changes for popup

text_analysis.css

@@ -13,6 +13,7 @@
     --right-color: #61ce61;
     --font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     --font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --popup-bg: rgba(255,255,255,0.6);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,6 +25,7 @@
         --spacer-color-2: rgba(255, 255, 255, 0.2);
         --left-color: rgb(38,37,40);
         --right-color: #61ce61;
+        --popup-bg: rgba(30,30,30,0.6);
     }
 }
 
@@ -174,7 +176,9 @@ main {
 
 #popup {
     width: 300px;
-    background-color: var(--left-color);
+    background-color: var(--popup-bg);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
     border-radius: 8px;
     padding: 8px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -183,7 +187,9 @@ main {
 
 #smol-popup {
     width: 200px;
-    background-color: var(--left-color);
+    background-color: var(--popup-bg);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
     border-radius: 8px;
     padding: 8px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -192,24 +198,41 @@ main {
     left: 0;
     transition: opacity 0.3s;
     text-align: center;
+    /* padding-top: 0px; account for Funny */
 }
 
-#popup h1 {
+#popup h1, #smol-popup h1 {
     text-align: center;
+    margin: 0;
 }
 
-#smol-popup h1 {
+#smol-popup p {
     margin: 0;
 }
 
+#smol-popup p:last-child {
+    font-size: 0.75rem;
+    color: var(--spacer-color);
+    margin-top: 4px;
+}
+
 #popup-heo, #smol-heo {
     font-family: "heonian";
+    text-align: center;
+    margin: 4px;
+    margin-bottom: 8px;
+}
+
+#popup-middle, #popup-meaning {
+    padding: 8px;
+    margin: 0;
 }
 
 #popup-quirks {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
+    margin-top: 8px;
 }
 
 #popup-quirks * {