asfdjksdjfk

base.html

@@ -5,163 +5,7 @@
     <meta charset="utf-8">
     <title>avg convo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        :root {
-            --notes-color: rgb(255, 235, 181);
-            --spacer-color: rgba(0,0,0,0.4);
-            --spacer-color-2: rgba(0,0,0,0.2);
-            --left-color: rgb(167, 179, 167);
-            --right-color: rgb(97, 206, 97);
-        }
-
-        @font-face {
-            font-family: "heonian";
-            src: url('https://cronut.cafe/~lustlion/myrheon/HeonianAlone.otf');
-        }
-
-        body {
-            margin: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
-        }
-
-        main {
-            max-width: 600px;
-            margin: auto;
-        }
-
-        .convo-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin: 8px;
-        }
-
-        .right {
-            flex-direction: row-reverse;
-        }
-
-        .convo {
-            width: 400px;
-            border: 1px solid var(--left-color);
-            border-radius: 8px;
-            padding: 8px;
-        }
-
-        .right .convo {
-            border: 1px solid var(--right-color);
-        }
-
-        .convo p {
-            margin: 0;
-            margin-top: 8px;
-        }
-
-        .convo-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            font-size: 1.5rem;
-        }
-
-        .convo-header img {
-            border-radius: 42069px;
-            width: 48px;
-            margin-right: 8px;
-        }
-
-        .convo-date {
-            font-size: 0.75rem;
-            color: var(--spacer-color);
-            flex-grow: 1;
-            text-align: right;
-        }
-
-        .notes {
-            width: 300px;
-            margin: 8px;
-            border-top: 1px solid var(--notes-color);
-            border-bottom: 1px solid var(--notes-color);
-            text-align: center;
-        }
-
-        .spacer {
-            width: calc(100% - 16px);
-            height: 1px;
-            margin-top: 8px; margin-bottom: 8px;
-            margin: auto;
-            background-color: var(--spacer-color);
-        }
-
-        .words {
-            text-align: center;
-        }
-
-        .words table {
-            margin: auto;
-            border-collapse: collapse;
-            text-align: left;
-        }
-
-        .words table td, .words table th {
-            padding: 8px;
-            border-right: 1px solid var(--spacer-color-2);
-        }
-
-        .words table td:last-child, .words table th:last-child {
-            border-right: none;
-        }
-
-        .words table th {
-            border-top: 1px solid var(--spacer-color);
-            border-bottom: 1px solid var(--spacer-color);
-        }
-
-        .words table td:first-of-type {
-            font-family: "heonian";
-        }
-
-        .clickable {
-            cursor: pointer;
-        }
-
-        #popup-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            /* backdrop-filter: blur(20px); */
-            /* -webkit-backdrop-filter: blur(20px); */
-            /* above is completely unnecessary, but looks pretty */
-            transition: opacity 0.3s;
-            cursor: pointer;
-        }
-
-        #popup {
-            width: 300px;
-            background-color: white;
-            border-radius: 8px;
-            padding: 8px;
-            box-shadow: 0 0 8px rgba(0,0,0,0.2);
-            cursor: default;
-        }
-
-        #popup h1 {
-            text-align: center;
-        }
-
-        #popup-heo {
-            font-family: "heonian";
-        }
-
-        data-swap {
-            display: none;
-        }
-    </style>
+    <link rel="stylesheet" href="text_analysis.css">
 </head>
 
 <body>
@@ -239,6 +83,14 @@
                 <p id="popup-meaning"></p>
             </div>
         </div>
+        <div id="smol-popup" style="opacity: 0; pointer-events: none;">
+            <h1>um</h1>
+            <div>
+                heonian: <span id="smol-heo"></span><br>
+                type: <span id="smol-type"></span>
+            </div>
+            <p id="smol-meaning"></p>
+        </div>
     </main>
     <data-swap>
         <p></p>