added 404 page, configured jekyll a little more

404.html

@@ -17,9 +17,18 @@ layout: default
   }
 </style>
 
-<div class="container">
-  <h1>404</h1>
+<div class="container error-404">
+  <div class="fourohfour">
+    <h1>4</h1>
+    <h1>0</h1>
+    <h1>4</h1>
+  </div>
+  <p><strong>Page not found</strong></p>
+  <p>¯\_(ツ)_/¯</p>
+  <a href="/">return home</a>
+  <script>
+    const f404 = document.querySelectorAll('h1, strong, p')
+    f404.forEach(elem => elem.addEventListener('mouseover', () => elem.parentNode.removeChild(elem)))
 
-  <p><strong>Page not found :(</strong></p>
-  <p>The requested page could not be found.</p>
+</script>
 </div>

_config.yml

@@ -18,7 +18,7 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: Your awesome title
+title: ReclaimFutures
 email: your-email@example.com
 description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this

_sass/layouts/404.scss

@@ -0,0 +1,65 @@
+.error-404 {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  .fourohfour {
+    display: flex;
+    flex-direction: row;
+    h1 {
+      animation: grain 1s steps(10) infinite;
+
+      &:first-of-type {
+        animation-duration: 2s;
+      }
+      &:last-of-type {
+        animation-duration: 3s;
+      }
+    }
+  }
+
+  a {
+    transition: transform 5s ease-in-out;
+
+    &:hover {
+      transform: scale(20) rotate(360deg);
+    }
+  }
+}
+
+@keyframes grain {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(-5%, -10%);
+  }
+  20% {
+    transform: translate(-15%, 5%);
+  }
+  30% {
+    transform: translate(7%, -25%);
+  }
+  40% {
+    transform: translate(-5%, 25%);
+  }
+  50% {
+    transform: translate(-15%, 10%);
+  }
+  60% {
+    transform: translate(15%, 0%);
+  }
+  70% {
+    transform: translate(0%, 15%);
+  }
+  80% {
+    transform: translate(3%, 35%);
+  }
+  90% {
+    transform: translate(-10%, 10%);
+  }
+}