reducing css just because

build.sh

@@ -22,7 +22,7 @@
 
 
 write_section_header(){
-  echo "<h2 class='s s$1' onclick='activeSection(\"$2\")' >" >> $3
+  echo "<h2 class='s$1 clickable' onclick='activeSection(\"$2\")' >" >> $3
   echo "$2" | tr a-z A-Z  >> $3
   echo "</h2>" >> $3
 }

layout.css

@@ -1,8 +1,7 @@
 main {
     display: flex;
     flex-direction: column;
-    padding-left: 1rem;
-    padding-right: 1rem;
+    padding: 0 1rem;
     flex-grow: 1;
 }
 
@@ -10,45 +9,37 @@ footer {
     position: sticky;
     bottom: 0;
     margin-top: 2rem;
-    flex-shrink: 0;
-
     display: flex;
     flex-direction: row;
     justify-content: end;
-    align-content: centers;
 }
 
 @container (min-width: 640px) {
     main {
-        padding-left: 4rem;
-        padding-right: 4rem;
+        padding: 0 4rem;
     }
 }
 
 @container (min-width: 768px) {
     main {
-        padding-left: 8rem;
-        padding-right: 8rem;
+        padding: 0 8rem;
     }
 }
 
 @container (min-width: 1024px) {
     main {
-        padding-left: 12rem;
-        padding-right: 12rem;
+        padding: 0 12rem;
     }
 }
 
 @container (min-width: 1280px) {
     main {
-        padding-left: 14rem;
-        padding-right: 14rem;
+        padding: 0 14rem;
     }
 }
 
 @container (min-width: 1536px) {
     main {
-        padding-left: 18rem;
-        padding-right: 18rem;
+        padding: 0 18rem;
     }
 }

style.css

@@ -36,8 +36,6 @@ body {
   font-family: "Curier New", monospace;
   margin: 0;
   min-height: 100svh;
-
-  /* display: flex; */
   flex-direction: column;
   justify-content: space-evenly;
 }
@@ -56,76 +54,19 @@ h2 {
   text-decoration: none;
 }
 
-.showmore {
-  text-align: center;
-  background-color: var(--bg-color-reverse);
-  color: var(--fg-color-reverse);
-}
-
-h2 {
-  cursor: pointer;
-}
-
-.s {
+.s1, .s2, .s3, .s4, .s5, .s6, .s7 {
   transition: background 0.7s ease-in-out;
   margin-bottom: 0;
+  &:hover { background-color: var(--dim-color); }
 }
 
-.s1 {
-  background-color: var(--orange);
-
-  &:hover {
-    background-color: var(--orange-dim);
-  }
-}
-
-.s2 {
-  background-color: var(--red);
-
-  &:hover {
-    background-color: var(--red-dim);
-  }
-}
-
-.s3 {
-  background-color: var(--green);
-
-  &:hover {
-    background-color: var(--green-dim);
-  }
-}
-
-.s4 {
-  background-color: var(--yellow);
-
-  &:hover {
-    background-color: var(--yellow-dim);
-  }
-}
-
-.s5 {
-  background-color: var(--blue);
-
-  &:hover {
-    background-color: var(--blue-dim);
-  }
-}
-
-.s6 {
-  background-color: var(--purple);
-
-  &:hover {
-    background-color: var(--purple-dim);
-  }
-}
-
-.s7 {
-  background-color: var(--aqua);
-
-  &:hover {
-    background-color: var(--aqua-dim);
-  }
-}
+.s1 { background-color: var(--orange); --dim-color: var(--orange-dim); }
+.s2 { background-color: var(--red); --dim-color: var(--red-dim); }
+.s3 { background-color: var(--green); --dim-color: var(--green-dim); }
+.s4 { background-color: var(--yellow); --dim-color: var(--yellow-dim); }
+.s5 { background-color: var(--blue); --dim-color: var(--blue-dim); }
+.s6 { background-color: var(--purple); --dim-color: var(--purple-dim); }
+.s7 { background-color: var(--aqua); --dim-color: var(--aqua-dim); }
 
 .c {
   padding: 1em;
@@ -157,8 +98,6 @@ img:hover {
   cursor: pointer;
   background-color: var(--bg-color-reverse);
   color: var(--fg-color-reverse);
-
-  /* Horizontal and vertical center content */
   display: inline-flex;
   flex-direction: column;
   justify-content: center;