Simplified titles style and javascript

css/style.css

@@ -71,8 +71,8 @@ h2,
 h3,
 h4,
 h5,
-h6,
 legend {
+    display: inline-block;
     position: relative;
     font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
     font-weight: 700;
@@ -82,34 +82,67 @@ legend {
 
 h1 {
     font-size: 4em;
+    box-shadow: inset 0 -50px 0 #1abc9c;
 }
 
 h2 {
     font-size: 150%;
+    box-shadow: inset 0 -20px 0 #16a085;
 }
 
 h3 {
     font-size: 125%;
+    box-shadow: inset 0 -16px 0 #27ae60;
 }
 
 h4 {
     font-size: 115%;
+    box-shadow: inset 0 -15px 0 #e67e22;
 }
 
 h5 {
     font-size: 110%;
-}
-
-h6 {
-    font-size: 10%;
+    box-shadow: inset 0 -14px 0 #9b59b6;
 }
 
 h4,
-h5,
-h6 {
+h5 {
     font-weight: 300;
 }
 
+h2,
+h3,
+h4,
+h5 {
+    cursor: pointer;
+}
+
+h2::after,
+h3::after,
+h4::after,
+h5::after {
+    content: "➤";
+    margin-left: 20px;
+    display: inline-block;
+}
+
+.footnotes {
+    cursor: default !important;
+}
+
+.footnotes::after {
+    content: "" !important;
+    margin: 0 !important;
+}
+
+.rotated::after {
+    -webkit-transform: rotate(var(--after-rotation));
+    -moz-transform: rotate(var(--after-rotation));
+    -o-transform: rotate(var(--after-rotation));
+    -ms-transform: rotate(var(--after-rotation));
+    transform: rotate(var(--after-rotation));
+}
+
 .outline-2,
 .outline-3,
 .outline-4,
@@ -164,23 +197,6 @@ a.footref {
     margin: 0 2px;
 }
 
-h2::after,
-h3::after,
-h4::after,
-h5::after {
-    content: "➤";
-    margin-left: 20px;
-    display: inline-block;
-}
-
-.rotated::after {
-    -webkit-transform: rotate(var(--after-rotation));
-    -moz-transform: rotate(var(--after-rotation));
-    -o-transform: rotate(var(--after-rotation));
-    -ms-transform: rotate(var(--after-rotation));
-    transform: rotate(var(--after-rotation));
-}
-
 .themeBtn {
     position: fixed;
     bottom: 25px;
@@ -198,57 +214,3 @@ h5::after {
 .themeBtn .fas {
     font-size: 30px;
 }
-
-.h1-container, .header-container {
-    display: inline-block;
-}
-
-.header-container {
-    cursor: pointer;
-    /* margin-bottom: -20px; */
-}
-
-.highlight-h1,
-.highlight-h2,
-.highlight-h3,
-.highlight-h4,
-.highlight-h5 {
-    position: relative;
-    left: -10px;
-    width: 120%;
-    max-width: 90vw;
-    z-index: 0;
-    width: auto !important;
-    margin-bottom: -20px;
-}
-
-.highlight-h1 {
-    background-color: #1abc9c !important;
-    height: 50px;
-    top: -60px
-}
-
-.highlight-h2 {
-    background-color: #16a085 !important;
-    height: 20px;
-    top: -40px
-}
-
-.highlight-h3 {
-    background-color: #27ae60 !important;
-    height: 20px;
-    top: -38px
-}
-
-.highlight-h4 {
-    background-color: #e67e22 !important;
-    height: 16px;
-    top: -40px;
-    width: 110%
-}
-
-.highlight-h5 {
-    background-color: #9b59b6 !important;
-    height: 14px;
-    top: -44px
-}