closer to MS design guidelines

css/footer.css

@@ -7,7 +7,7 @@ footer {
     right: 0;
     text-align: center;
     color: #fff;
-    background-color: #212121;
+    background-color: #393939;
     z-index: 2;
 }
 

css/header.css

@@ -36,7 +36,10 @@ header {
     width: 48px;
     height: 48px;
     display: block;
-    background-image: url('../icons/menu.svg');
+    background-image: url('../icons/menu.png');
+    background-size: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 nav#menu {
@@ -46,7 +49,7 @@ nav#menu {
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;
-    background-color: #b71c1c;
+    background-color: rgb(164, 38, 44);
     box-shadow: 0 28px 79px 0 rgba(66, 129, 121, .27);
 }
 

css/main.css

@@ -57,7 +57,7 @@ hr {
 }
 
 a {
-    color: #2196F3;
+    color: #3A96DD;
     text-decoration: none;
 }
 
@@ -123,11 +123,11 @@ button.expand {
 }
 
 span>a:hover {
-    color: #616161;
+    color: #767676;
 }
 
 span>a:active {
-    color: #212121;
+    color: #393939;
 }
 
 #wrapper {
@@ -135,7 +135,7 @@ span>a:active {
     width: 100%;
     min-height: calc(60vh - 42px - 2.75em);
     z-index: 1;
-    background-color: #424242;
+    background-color: #4C4A48;
     display: flex;
     flex-direction: column;
     align-items: center;

css/responsive.css

@@ -65,7 +65,7 @@
     }
     button.menu-item:hover {
         color: #fff;
-        background-color: #7f0000;
+        background-color: rgb(118, 23, 33);
     }
     button.menu-item:active {
         font-size: 1.1em;