fixed yet some stuff, including titles

style/main.css

@@ -9,6 +9,7 @@ body {
     background-color: #3498db;
     margin: 0;
     padding: 0;
+    font-family: 'Fira Sans', serif;
 }
 
 a {
@@ -20,10 +21,15 @@ a {
     transition: color 0.2s, border-bottom-color 0.2s;
 }
 
+.card a {
+    color: #8e44ad;
+    border-bottom: 5px solid #8e44ad;
+}
+
 
 a:hover {
-    color: #8e44ad;
-    border-bottom-color: #8e44ad;
+    color: #9b59b6;
+    border-bottom-color: #9b59b6;
     transition: color 0.4s, border-bottom-color 0.4s;
 }
 
@@ -68,6 +74,7 @@ h2 {
     background-color: #7f8c8d;
     width: 100%;
     white-space: nowrap;
+    line-height: 2.5em;
 }
 
 .ribbon-links li {
@@ -75,12 +82,31 @@ h2 {
     float: left;
     padding: 5px 20px;
     background-color: #7f8c8d;
+    transition: background-color 0.2s;
+    position: relative;
+    z-position: 20;
 }
 
 .ribbon li:hover {
-    background-color: #34495e
+    background-color: #34495e;
+    transition: background-color 0.3s;
 }
 
+/* .ribbon li::before { */
+/*     top: 0; */
+/*     left: 0; */
+/*     width: 100%; */
+/*     height: 0%; */
+/*     content: ""; */
+/*     position: absolute; */
+/*     background: #000; */
+/*     transition: height 0.5s; */
+/* } */
+
+/* .ribbon li:hover::before { */
+/*     height: 100%; */
+/* } */
+
 /* sidebar *******************************************************************/
 
 .sidebar {
@@ -135,12 +161,13 @@ p.side-content {
 .card-lvl2 {
     margin: 10px 10px 20px 20px;
     padding-left: 0;
-    background-color: #bdc3c7;
+    background-color: #2c3e50;
+    color: #ecf0f1;
 }
 
 .list-lvl1,
 .list-lvl1 a {
-    background-color: #bdc3c7;
+    background-color: #2c3e50;
     list-style: none;
 }
 
@@ -181,7 +208,11 @@ h3 {
 }
 
 h4 {
-    font-size: 1.2em;
+    font-size: 1.4em;
+}
+
+h5 {
+    font-size: 1.4em;
 }
 
 .header-container {
@@ -217,7 +248,7 @@ h4 {
 .highlight-h4 {
     background-color: #e67e22 !important;
     height: 24px;
-    top: -26px;
+    top: -28px;
     left: 0;
     width: 110%;
 }
@@ -225,7 +256,7 @@ h4 {
 .list-lvl1 .highlight-h4 {
     background-color: #e67e22 !important;
     height: 24px;
-    top: -34px;
+    top: -42px;
     left: 0;
     left: -10px;
     width: 120%;
@@ -233,6 +264,10 @@ h4 {
 
 .highlight-h5 {
     background-color: #9b59b6 !important;
-    height: 12px;
-    top: -12px;
+    height: 18px;
+    top: -20px;
+}
+
+.list-no-style {
+    list-style: none;
 }