gradient title and slight modifications

css/style.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Trispace:wght@100&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
 
 /*i titled these poorly, without trying how any of it looks*/
 :root {
@@ -8,7 +8,7 @@
     --button-color: #373737;
     --hover-color: #3c3c3c;
     --font-color: #dcddde;
-    --font-family: 'Lato', sans-serif;
+    --font-family: 'Work Sans', sans-serif;
 }
 
 html {
@@ -73,15 +73,21 @@ body.noscript {
 h1 {
     z-index: 50;
     position: relative;
-    display: flex;
+    display: inline-block;
     justify-self: center;
     text-align: center;
+    width: fit-content;
+    height: fit-content;
     margin-top: 3.5rem; 
     font-size: 128px;
     font-weight: 100;
     font-family: 'Trispace', sans-serif;
     letter-spacing: 5px;
-    color: -webkit-linear-gradient(white, #38495a)
+    color: transparent;
+    background-image: linear-gradient(white, #38495a);
+    -webkit-background-clip: text;
+    background-clip: text;
+    pointer-events: none;
 }
 
 logo img {
@@ -125,4 +131,9 @@ logo img {
     color: var(--font-color);
     font-family: var(--font-family);
     transition: all 0.2s ease-in;
+    cursor: pointer;
+}
+
+.card:hover {
+    background-color: var(--hover-color);
 }

js/bg.js

@@ -16,6 +16,8 @@ const opt = {
   strokeWeight: 2,
   tail: 82 };
 
+changeTitleColor();
+
 const Particles = [];
 let time = 0;
 document.body.addEventListener("click", () => {
@@ -26,6 +28,7 @@ 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();
 
   for (let p of Particles) {
     p.randomize();
@@ -158,3 +161,7 @@ Resize
 function windowResized() {
   resizeCanvas(windowWidth, windowHeight);
 }
+
+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}));`;
+}

jsconfig.json

@@ -0,0 +1,7 @@
+{
+    "typeAcquisition": {
+        "include": [
+            "jquery"
+        ]
+    }
+}