Add random colors to listing

Author: Tenchi2xh

listing/index.html

@@ -24,5 +24,11 @@ <h1><span>C</span><span class="star">*</span><span>destar Slide Decks</span></h1
             </div>
             <div class="attribution">Background by <a href="www.freepik.com">Freepik</a></div>
         </div>
+        <div class="overlay"></div>
+        <script>
+            document
+                .querySelector(".overlay")
+                .classList.add(`c${Math.floor((Math.random() * 7) + 1)}`);
+        </script>
 	</body>
-</html>
+</html>

listing/listing.css

@@ -18,6 +18,21 @@
     color: white;
 }
 
+.overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    mix-blend-mode: multiply;
+}
+
+.c1 { background-color: #b03a48; }
+.c2 { background-color: #d4804d; }
+.c3 { background-color: #d6b74b; }
+.c4 { background-color: #3e7a4c; }
+.c5 { background-color: #3266A3; }
+.c6 { background-color: #915394; }
+.c7 { background-color: #d980a0; }
+
 html, body {
     margin: 0;
     padding: 0;
@@ -35,7 +50,7 @@ h1 {
 }
 
 .star {
-    color: #ddd;
+    color: #ffffff;
     margin-top: 0.06em;
     font-size: 1.45em;
     font-family: Montserrat;
@@ -44,6 +59,10 @@ h1 {
     transform: scaleX(0.94);
 }
 
+h1 span:not(.star) {
+    z-index: 1;
+}
+
 button, input, ul, li {
     all: unset;
 }
@@ -59,7 +78,6 @@ button, input, ul, li {
     background-image: url("bg.jpg");
     background-size: cover;
     background-position: center;
-    filter: sepia(0.4) hue-rotate(-6deg) saturate(0.94);
 }
 
 .attribution {
@@ -87,7 +105,6 @@ button, input, ul, li {
 
     font-size: 2em;
     max-height: 100%;
-    z-index: 1;
 }
 
 .list {
@@ -97,6 +114,7 @@ button, input, ul, li {
     display: flex;
     flex-direction: column;
     align-items: center;
+    z-index: 1;
 }
 
 .link {