Merge pull request #458 from EthanThatOneKid/Fix/Issue417

Replaced old 404 image with blank frank picture and text
The image had problems with Frank and his content in the 404 page with the new light/dark mode feature. We fixed this by using a blank frank image that was light/dark mode friendly and then editing the 404 error message to work with the light/dark mode while leaving out elements in the image that were giving us problems. We also did some little fixes like adding padding and getting rid of obsolete code. Well documented conversation of the changes are in the issue if there are any questions. First issue done :)

src/routes/__error.svelte

@@ -8,36 +8,42 @@
 </svelte:head>
 
 <section>
-  <img src="/assets/png/404-h.png" class="wide" alt="404 - Page Not Found" />
-  <img src="/assets/png/404-v.png" class="mobile" alt="404 - Page Not Found" />
+  <em>404</em>
+  <h1>Frank can't find where you're going!</h1>
+  <img src="/assets/png/lost-frank.png" alt="404 - Page Not Found" />
 </section>
 
 <style>
   section {
     min-height: 100vh;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     margin: 0 24px;
+    color: var(--acm-light);
   }
 
-  section .mobile {
-    display: none;
+  section h1 {
+    margin-bottom: 2em;
+    align-items: center;
+    text-align: center;
+  }
+
+  section em {
+    align-items: center;
+    text-align: center;
+    font-size: 50px;
+    margin-bottom: 0.5em;
+    margin-top: 2em;
+    text-shadow: 2px 2px #92c4df;
+    font-weight: 600;
   }
 
   section img {
     width: 100%;
     max-width: 1000px;
     height: auto;
-  }
-
-  @media (max-width: 900px) {
-    section .wide {
-      display: none;
-    }
-
-    section .mobile {
-      display: unset;
-    }
+    margin-bottom: 3em;
   }
 </style>