Finished dark mode! This means re-doing all sass variables in the

variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.

src/components/404.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="not-found">
     <div class="not-found__content">
-      <h2 class="not-found__title">Page Not Found</h2>
+      <h1 class="not-found__title">Page Not Found</h1>
     </div>
   </section>
 </template>
@@ -15,58 +15,36 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.not-found{
+.not-found {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - var(--header-size));
   background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
   background-size: cover;
   display: flex;
-  align-items: center;
   justify-content: center;
-  @include tablet-min{
-    height: calc(100vh - 75px);
-  }
-  &:before{
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba($c-light, 0.7);
-  }
-  &-shortList{
-    width: 100%;
-  }
-  &__content{
-    width: 100%;
-    padding: 0 20px;
-    text-align: center;
-    @include tablet-min{
-      padding: 20px 0 0 0;
-    }
-    &-shortList {
-      width: 100%;
 
-    }
+  &:before {
+    background: $background-40;
+    height: 100%;
+    width: 100%;
+    content: "";
+    position: absolute;
+  }
+  &__content {
+    padding-top: 30%;
   }
     &__title{
-      font-size: 24px;
+      font-size: 2rem;
       font-weight: 500;
-      color: $c-dark;
+      color: $text-color;
       position: relative;
       margin: 0;
       @include tablet-min{
-        font-size: 28px;
+        font-size: 2.3rem;
       }
     }
-    &__button{
-      position: relative;
-      margin-top: 20px;
-    }
 }
 </style>