diff --git a/docs/scss/style.scss b/docs/scss/style.scss
index a71c6495c..b8471f1cd 100644
--- a/docs/scss/style.scss
+++ b/docs/scss/style.scss
@@ -48,12 +48,36 @@ $copy-button-color-var: '--copy-button-color';
 $copy-button-color: #1e88e5;
 $copy-button-hover-color-var: '--copy-button-hover-color';
 $copy-button-hover-color: #2196f3;
+$scrolltop-button-color-var: '--scrolltop-button-color';
+$scrolltop-button-color: #26a69a;
+$scrolltop-button-hover-color-var: '--scrolltop-button-hover-color';
+$scrolltop-button-hover-color: #4db6ac;
 $beginner-color-var: '--beginner-color';
 $beginner-color: #7cb342;
 $intermediate-color-var: '--intermediate-color';
 $intermediate-color: #ffb300;
 $advanced-color-var: '--advanced-color';
 $advanced-color: #e53935;
+$header-fore-color-var: '--header-fore-color';
+$header-fore-color: #fff;
+$header-back-color-var: '--header-back-color';
+$header-back-color: #202124;
+$nav-border-color-var: '--nav-border-color';
+$nav-border-color: #e0e0e0;
+$nav-back-color-var: '--nav-back-color';
+$nav-back-color: #fafafa;
+$nav-link-border-color-var: '--nav-link-border-color';
+$nav-link-border-color: #e5e5e5;
+$nav-link-hover-color-var: '--nav-link-hover-color';
+$nav-link-hover-color: #f0f0f0;
+$search-border-color-var: '--search-border-color';
+$search-border-color: #9e9e9e;
+$search-hover-border-color-var: '--search-hover-border-color';
+$search-hover-border-color: #26a69a;
+$footer-fore-color-var: '--footer-fore-color';
+$footer-fore-color: #616161;
+$footer-back-color-var: '--footer-back-color';
+$footer-back-color: #e0e0e0;
 $universal-margin-var: '--universal-margin';
 $universal-margin: 0.5rem;
 $universal-padding-var: '--universal-padding';
@@ -146,9 +170,21 @@ $tertiary-fore-color: #222;
   #{$collapse-color-var}: $collapse-color;
   #{$copy-button-color-var}: $copy-button-color;
   #{$copy-button-hover-color-var}: $copy-button-hover-color;
+  #{$scrolltop-button-color-var}: $scrolltop-button-color;
+  #{$scrolltop-button-hover-color-var}: $scrolltop-button-hover-color;
   #{$beginner-color-var}: $beginner-color;
   #{$intermediate-color-var}: $intermediate-color;
   #{$advanced-color-var}: $advanced-color;
+  #{$header-fore-color-var}: $header-fore-color;
+  #{$header-back-color-var}: $header-back-color;
+  #{$nav-border-color-var}: $nav-border-color;
+  #{$nav-back-color-var}: $nav-back-color;
+  #{$footer-fore-color-var}: $footer-fore-color;
+  #{$footer-back-color-var}: $footer-back-color;
+  #{$nav-link-border-color-var}: $nav-link-border-color;
+  #{$nav-link-hover-color-var}: $nav-link-hover-color;
+  #{$search-border-color-var}: $search-border-color;
+  #{$search-hover-border-color-var}: $search-hover-border-color;
 }
 // Set up some basic styling for everything
 html {
@@ -408,6 +444,10 @@ $grid-large-breakpoint: 1280px;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-column-gap: calc(0.5 * var(#{$universal-margin-var}));
+  &.card-container {
+    padding-top: 3.5rem; 
+    height: calc(100vh - 3.5rem);
+  }
 }
 // Generic centered column
 .col-centered {
@@ -599,18 +639,59 @@ $grid-large-breakpoint: 1280px;
   border-radius: calc(var(#{$universal-border-radius-var}) * 16);
   padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 2);
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
+  transition: all 0.3s ease;
 }
 // ===================================================
 // Navigation
 // ===================================================
-
+header {
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 3.5rem;
+  position: fixed;
+  width: 110%;
+  top: 0;
+  left: -5%;
+  box-shadow: 0 2px 4px rgba(0,0,0,.5);
+  z-index: 5;
+  background: var(#{$header-back-color-var});
+  transition: top 0.3s ease;
+  h1 {
+    &.logo {
+      position: relative;
+      top: 0;
+      margin-top: 0;
+      font-size: 1.625rem;
+      text-align: center;
+      // transition: top 0.3s ease;
+    }
+    a, a:link, a:visited {
+      color: var(#{$header-fore-color-var});
+      &:hover, &:focus {
+        text-decoration: none;
+      }
+    }
+    small {
+      display: block;
+      font-size: 0.875rem;
+      color: var(#{$header-back-color-var});
+      margin-top: 0.75rem;
+    }
+  }
+  img {
+    height: 3.5rem; 
+    padding: 0.375rem; 
+    box-sizing: border-box;
+  }
+  #title {
+    position: relative;
+    top: -1.125rem;
+    @media screen and (max-width: 768px) { display: none; }
+  }
+}
 
 nav {
-  display: block;
   position: fixed;
-  background: #fafafa;
-  border-right: $__1px solid #e0e0e0;
-  
   top: 0;
   left: -320px;
   width: 320px;
@@ -618,6 +699,10 @@ nav {
   z-index: 1100;
   height: 100vh;
   box-sizing: border-box;
+  display: block;
+  background: var(#{$nav-back-color-var});
+  border-right: $__1px solid var(#{$nav-border-color-var});
+  overflow-y: auto;
   @media screen and (max-width: 320px) {
     width: 100%;
   }
@@ -631,103 +716,70 @@ nav {
     width: 25vw;
     left: -25vw;
   }
-}
-
-nav.col-nav {
-  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
-  left: 0;
-  // Also apply the main content style to the footer
-  @media screen and (min-width: #{$grid-medium-breakpoint}) {
-    + main.col-centered, + main.col-centered + footer.col-full-width {
-      grid-column: 5/13;
+  &.col-nav {
+    box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
+    left: 0;
+    // Also apply the main content style to the footer
+    @media screen and (min-width: #{$grid-medium-breakpoint}) {
+      + main.col-centered, + main.col-centered + footer.col-full-width {
+        grid-column: 5/13;
+      }
+    }
+    @media screen and (min-width: #{$grid-large-breakpoint}) {
+      + main.col-centered  {
+        grid-column: 4/12;
+        padding-left: 8vw;
+      }
+      + main.col-centered + footer.col-full-width {
+        grid-column: 4/13;
+      }
     }
   }
-  @media screen and (min-width: #{$grid-large-breakpoint}) {
-    + main.col-centered  {
-      grid-column: 4/12;
-      padding-left: 8vw;
+  h4 {
+    margin: var(#{$universal-margin-var});
+    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+    padding-left: 0;
+  }
+  a {
+    display: block;
+    margin: calc(0.5 * var(#{$universal-margin-var}));
+    margin-left: var(#{$universal-margin-var});
+    margin-bottom: 0;
+    padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var}));
+    border-left: $__1px solid var(#{$nav-link-border-color-var});
+    &:hover {
+      text-decoration: none;
+      background: var(#{$nav-link-hover-color-var});
     }
-    + main.col-centered + footer.col-full-width {
-      grid-column: 4/13;
+    + a {
+      margin-top: 0;
     }
   }
 }
 
-
-header h1.logo {
-  margin-top: 0rem;
-  font-size: 1.625rem;
-  text-align: center;
-  position: relative;
-  top: 0;
-  transition: top 0.3s;
-  color: #111;
-}
-
-h1 a, h1 a:link, h1 a:visited {
-  text-decoration:none;
-  color: #111;
+[type="search"] {
+  outline: none;
+  box-sizing: border-box;
+  background: transparent;
+  border: none;
+  border-bottom: $__1px solid var(#{$search-border-color-var});
+  width: calc(100% - 1rem);
+  margin: var(#{$universal-margin-var});
+  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  transition: all 0.3s ease;
   &:hover, &:focus {
-    text-decoration:none;
-    color: #111;
+    border-bottom: $__1px solid var(#{$search-hover-border-color-var});
   }
-}
-
-header #title {
-  position:relative;
-  top: -1.125rem;
-  @media screen and (max-width: 768px) { display: none; }
-}
-
-header {
-  z-index: 5;
-  position: fixed;
-  width: 110%;
-  left: -5%;
-  top: 0;
-  background: linear-gradient(
-    135deg,
-    #ffb300 0%,
-    #ec407a 100%
-  );
-  box-shadow: 0 2px 4px rgba(0,0,0,.5);
-}
-
-header h1 small {
-  display:block;
-  font-size: 0.875rem;
-  color: #888;
-  margin-top: 0.75rem;
-}
-
-
-
-header {
-  background: #202124;
-  transition: top 0.3s ease;
-  h1 a, h1 a:link, h1 a:visited {
-    color: #fff;
-    &:hover, &:focus {
-      color: #fff;
-    }
+  &:focus {
+    box-shadow: 0 $__1px 0 0 var(#{$search-hover-border-color-var});
   }
 }
-footer {
-  color: #616161;
-  * {
-    font-size: 0.875rem;
-  }
-  padding-top: calc(2 * var(#{$universal-padding-var}));
-  padding-bottom: calc(3 * var(#{$universal-padding-var}));
-  margin-top: calc(6 * var(#{$universal-margin-var}));
-  background: #e0e0e0;
-}
 
 .menu-button {
   position: fixed;
-  z-index: 1000;
   top: 0;
   left: 0;
+  z-index: 1000;
   box-sizing: border-box;
   height: 3.5rem;
   width: 3.5rem;
@@ -746,78 +798,45 @@ footer {
   }
 }
 
-
-
-[type="search"] {
-  outline: none;
-  box-sizing: border-box;
-  background: transparent;
-  border: none;
-  border-bottom: $__1px solid #9e9e9e;
-  width: calc(100% - 1rem);
-  margin: var(#{$universal-margin-var});
-  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
-  transition: all 0.3s ease;
-  &:hover, &:focus {
-    border-bottom: $__1px solid #26a69a;
+footer {
+  color: var(#{$footer-fore-color-var});
+  background: var(#{$footer-back-color-var});
+  padding-top: calc(2 * var(#{$universal-padding-var}));
+  padding-bottom: calc(3 * var(#{$universal-padding-var}));
+  margin-top: calc(6 * var(#{$universal-margin-var}));
+  * {
+    font-size: 0.875rem;
   }
-  &:focus {
-    box-shadow: 0 1px 0 0 #26a69a;
-  }
-}
-
-nav {
-  overflow-y: auto;
-  h4 {
-    margin: var(#{$universal-margin-var});
-    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
-    padding-left: 0;
-  }
-  a {
-    display: block;
-    margin: calc(0.5 * var(#{$universal-margin-var}));
-    margin-left: var(#{$universal-margin-var});
-    margin-bottom: 0;
-    padding: calc(2 * var(#{$universal-padding-var})) calc(1.5 * var(#{$universal-padding-var}));
-    border-left: $__1px solid #e5e5e5;
-    &:hover {
-      text-decoration: none;
-      background: #f0f0f0;
-    }
-    + a {
-      margin-top: 0;
-    }
+  a, a:link, a:visited {
+    color: var(#{$fore-color-var});
   }
 }
 
 .scroll-to-top {
-  box-sizing: border-box;
-  z-index: 1100;
-  height: 3.5rem;
-  width: 3.5rem;
-  border: 0;
-  background: #B3E5FC;
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23607D8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center center;
-  cursor: pointer;
-  border-radius: 100%;
-  font-size: 1.5rem;
-  line-height: 1;
-  box-sizing: border-box;
-  width: 2.75rem;
-  height: 2.75rem;
   position: fixed;
   bottom: 1rem;
   right: 1.3125rem;
+  box-sizing: border-box;
+  z-index: 1100;
+  height: 2.75rem;
+  width: 2.75rem;
+  border: 0;
+  border-radius: 100%;
+  background: var(#{$scrolltop-button-color-var});
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f0f0f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up'%3E%3Cline x1='12' y1='19' x2='12' y2='5'%3E%3C/line%3E%3Cpolyline points='5 12 12 5 19 12'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center center;
+  cursor: pointer;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
   transition: all 0.3s ease;
-  &:hover {
+  &:hover, &:focus {
+    background-color: var(#{$scrolltop-button-hover-color-var});
     box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2);
   }
 }
 
-// Landing page
+/*
+// Old Landing page
 
 #splash {
   height: auto;
@@ -1057,4 +1076,6 @@ h2.index-section {
   border-radius: 100%;
   font-weight: 700;
   color: #fff;
-}
\ No newline at end of file
+}
+
+*/
\ No newline at end of file