fix json + work on search page

main.css

@@ -21,9 +21,11 @@
 @keyframes not-cheating {
     0% {
         opacity: 0;
+        transform: translateY(-20px);
     }
     100% {
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -60,8 +62,10 @@ header {
     justify-content: space-around;
     align-items: center;
     flex-flow: row wrap;
-    padding-bottom: 8px;
+    padding-bottom: 4px; padding-top: 4px;
     border-bottom: 1px solid var(--grey);
+    max-width: 1000px;
+    margin: auto;
 }
 
 header * {
@@ -115,8 +119,9 @@ header.fullscreen {
     height: 100%;
     flex-flow: column;
     justify-content: center;
-    padding-bottom: 0px;
+    padding-bottom: 0px; padding-top: 0px;
     border-bottom: none;
+    max-width: unset;
 }
 
 header.fullscreen span.heonian {
@@ -138,6 +143,9 @@ header.fullscreen #search {
 
 main {
     opacity: 0;
+    max-width: 600px;
+    margin: auto;
+    margin-top: 1rem;
 }
 
 .main-animation {
@@ -148,9 +156,49 @@ main {
     animation: not-cheating 0.5s ease-in-out reverse;
 }
 
+.capitalize {
+    text-transform: capitalize;
+}
+
+.result {
+    padding-bottom: 8px;
+    padding-top: 24px;
+    border-bottom: 1px solid var(--darkgrey);
+}
+
+.result-meaning {
+    padding-bottom: 8px;
+}
+
+.result .result-meaning:last-child {
+    padding-bottom: 0px;
+}
+
 .result-header {
     font-family: var(--font-h);
-    font-size: 2rem;
+    font-size: 2.5rem;
+}
+
+.result-number {
+    color: var(--darkgrey);
+    font-size: 1.25rem;
+}
+
+.result-big {
+    font-size: 1.25rem;
+}
+
+.result-number::after {
+    content: ". ";
+}
+
+.result summary {
+    color: grey;
+}
+
+.result details p {
+    margin-top: 4px;
+    margin-bottom: 4px;
 }
 
 /* todo. organize this file better. this is a fucking mess */