fixed title color change function

css/style.css

@@ -70,7 +70,7 @@ body.noscript {
     z-index: 10;
 }
 
-h1 {
+#title {
     z-index: 50;
     position: relative;
     display: inline-block;
@@ -84,7 +84,6 @@ h1 {
     font-family: 'Trispace', sans-serif;
     letter-spacing: 5px;
     color: transparent;
-    background-image: linear-gradient(white, #38495a);
     -webkit-background-clip: text;
     background-clip: text;
     pointer-events: none;
@@ -128,6 +127,7 @@ logo img {
     background-color: var(--button-color);
     border-radius: 50px;
     font-size: 150%;
+    text-decoration: none;
     color: var(--font-color);
     font-family: var(--font-family);
     transition: all 0.2s ease-in;

index.html

@@ -61,7 +61,7 @@
         </div>
     </div>
     <section id="everything-else">
-        <h1>MonkeyGG2</h1>
+        <h1 id="title">MonkeyGG2</h1>
         <logo>
             <img src="imgs/icon.png" alt="MonkeyGG2 Icon" onclick="this.src = 'imgs/secret-icon.png'">
         </logo>

js/bg.js

@@ -28,7 +28,9 @@ document.body.addEventListener("click", () => {
   opt.l1 = rand(30, 80);
   opt.l2 = rand(30, 80);
   opt.angle += deg(random(60, 60)) * (Math.random() > 0.5 ? 1 : -1);
-  changeTitleColor();
+  setTimeout(() => {
+    changeTitleColor();
+  }, 100);
 
   for (let p of Particles) {
     p.randomize();
@@ -140,6 +142,7 @@ function setup() {
     Particles.push(new Particle(Math.random() * width, Math.random() * height));
   }
   strokeWeight(opt.strokeWeight);
+  console.log(document.getElementById("title").style);
 }
 
 /*--------------------
@@ -163,5 +166,5 @@ function windowResized() {
 }
 
 function changeTitleColor() {
-  document.querySelector("#everything-else h1").style.background = `text linear-gradient(hsl(${opt.h1}, ${opt.s1}, ${opt.l1}), hsl(${opt.h2}, ${opt.s2}, ${opt.l2}));`;
+  document.getElementById("title").style.backgroundImage = `linear-gradient(hsl(${opt.h1 + 20}, ${opt.s1}%, ${opt.l1}%), hsl(${opt.h2}, ${opt.s2}%, ${opt.l2}%))`;
 }