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/App.vue

@@ -72,7 +72,7 @@ export default {
 .content {
     @include tablet-min{
     width: calc(100% - 95px);
-    padding-top: $header-size;
+    margin-top: $header-size;
     margin-left: 95px;
     position: relative;
   }
@@ -80,24 +80,30 @@ export default {
 </style>
 
 <style lang="scss">
-@import "./src/scss/main";
+// @import "./src/scss/main";
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 *{
   box-sizing: border-box;
 }
-html, body{
+html {
   height: 100%;
 }
 body{
+  margin: 0;
+  padding: 0;
   font-family: 'Roboto', sans-serif;
   line-height: 1.6;
-  background: $c-light;
-  color: $c-dark;
+  background: $background-color;
+  color: $text-color;
   &.hidden{
     overflow: hidden;
   }
 }
+a:any-link {
+  color: inherit;
+}
 input, textarea, button{
   font-family: 'Roboto', sans-serif;
 }
@@ -116,7 +122,6 @@ img{
 }
 .header{
   position: fixed;
-  background: $c-white;
   z-index: 15;
   display: flex;
   flex-direction: column;
@@ -128,61 +133,6 @@ img{
     border-bottom: 0;
     top: 0;
   }
-  &__search{
-    display: flex;
-    position: relative;
-    z-index: 5;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    right: 55px;
-    @include tablet-min{
-      position: relative;
-      height: 75px;
-      right: 0;
-    }
-    &-input{
-      display: block;
-      width: 100%;
-      padding: 15px 20px 15px 45px;
-      outline: none;
-      border: 0;
-      background-color: transparent;
-      color: $c-dark;
-      font-weight: 300;
-      font-size: 16px;
-      @include tablet-min{
-        padding: 15px 30px 15px 60px;
-      }
-      @include tablet-landscape-min{
-        padding: 15px 30px 15px 80px;
-      }
-      @include desktop-min{
-        padding: 15px 30px 15px 90px;
-      }
-    }
-    &-arrow {
-      height: 19px;
-      width: 30px;
-      display: flex;
-      align-self: center;
-      margin-right: 30px;
-
-      -moz-transition: all 0.5s ease;
-      -webkit-transition: all 0.5s ease;
-      transition: all 0.5s ease;
-
-      &.down {
-        -ms-transform: rotate(180deg);
-        -moz-transform: rotate(180deg);
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-    }
-    &-input:focus + &-icon{
-      fill: $c-dark;
-    }
-  }
 }
 
 // router view transition