some more styling

style/main.css

@@ -3,14 +3,19 @@ body {
     grid-template-areas:
         'ribbon ribbon'
         'sidebar content';
+    background-color: #3498db;
 }
 
 a {
     text-decoration: none;
 }
 
+a:hover {
+    text-decoration: underline;
+}
+
 .sidebar, .content {
-    margin: 10px;
+    /* margin: 10px; */
     padding: 10px;
     background-color: #bdc3c7;
     color: black;
@@ -22,16 +27,19 @@ a {
     margin-right: auto;
 }
 
+.list-lvl1, .list-lvl1 a {
+    background-color: #34495e;
+    color: #ecf0f1;
+}
+
 /* ribbon ********************************************************************/
 
 .ribbon {
+    grid-area: ribbon;
     padding: 0;
     margin: 0;
-}
-
-.ribbon {
-    grid-area: ribbon;
-    background: #2c3e50;
+    /* background: #2c3e50; */
+    background-color: #2c3e50;
 }
 
 .ribbon, .ribbon a {
@@ -67,6 +75,7 @@ h1, h2 {
 
 .sidebar {
     grid-area: sidebar;
+    margin: 10px 5px 10px 0;
     width: 300px;
 }
 
@@ -92,4 +101,11 @@ p.side-content {
 
 .content {
     grid-area: content;
+    margin: 10px 0 10px 5px;
+}
+
+.content div {
+    background-color: #ecf0f1;
+    padding: 10px;
+    margin: 10px;
 }