color improvements

sass/main.scss

@@ -1,15 +1,16 @@
 $font-stack: Helvetica, sans-serif;
 $primary-color: #333;
 $background-color: #222;
-$window-chrome: #285a71;
-$window-chrome-active: #00AEC1;
+$window-chrome: #498584;
+$footer-chrome: #2f6564;
+$window-chrome-active: black;
 $window-text: white;
 
 @mixin window-chrome {
   border: 4px solid $window-chrome;
   border-top-width: 2.6rem;
   background-color: white;
-  box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
+  box-shadow: 0px 4px 0px rgba(0,0,0,0.3);
 }
 
 [x-cloak] {
@@ -31,6 +32,16 @@ body {
   background-image: url(../images/wood.png);
 }
 
+footer {
+  height: 60px;
+  width: 100%;
+  bottom: 0px;
+  right: 0px;
+  position: absolute;
+  background-color: $footer-chrome;
+  z-index: 10;
+}
+
 h1, logo span {
   font-family: 'Langar', sans-serif;
   position: absolute;
@@ -45,6 +56,7 @@ h1, logo span {
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
+  text-shadow: 0px 2px rgba(0,0,0,0.5);
 }
 logo span {
   margin-top: 2px;
@@ -131,7 +143,7 @@ logo {
   }
   z-index: 50;
   @include window-chrome();
-  border-color: $window-chrome-active;
+  border-color: black;
   transition: all 0.3s ease-in-out;
   position: absolute;
   background-position: calc( 50% - 30px ) 50%;