time to push to . git apparently =w=

main.css

@@ -18,6 +18,15 @@
     }
 }
 
+@keyframes not-cheating {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
 :root {
     --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
     --font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
@@ -125,4 +134,16 @@ header.fullscreen #search {
 
 .header-animation-reverse {
     animation: clearly-cheating 1s ease-in-out reverse;
+}
+
+main {
+    opacity: 0;
+}
+
+.main-animation {
+    animation: not-cheating 0.5s ease-in-out;
+}
+
+.main-animation-reverse {
+    animation: not-cheating 0.5s ease-in-out reverse;
 }

main.js

@@ -10,8 +10,11 @@ function animateHeader(inout = false) {
     if (inout) {
         header.classList.add("header-animation-reverse");
         header.classList.remove("header-animation");
+        main.classList.add("main-animation-reverse");
         setTimeout(() => {
             header.classList.add("fullscreen");
+            main.style.opacity = "0";
+            main.classList.remove("main-animation-reverse");
         },500);
         setTimeout(() => {
             header.classList.remove("header-animation-reverse");
@@ -21,9 +24,12 @@ function animateHeader(inout = false) {
         header.classList.remove("header-animation-reverse");
         setTimeout(() => {
             header.classList.remove("fullscreen");
+            main.classList.add("main-animation");
         },500);
         setTimeout(() => {
             header.classList.remove("header-animation");
+            main.style.opacity = "1";
+            main.classList.remove("main-animation");
         },1000);
     }
     //somewhere here we animate in the actual page too, but it.. doesnt exist yet
@@ -58,7 +64,7 @@ function stripWord(word) {
 }
 
 function loadDictionary() {
-    fetch("/wordlist.json").then((e) => {
+    fetch("./wordlist.json").then((e) => {
         if (e.status === 200) {
             //convert to json lmao
             e.json().then((e) => {