diff --git a/about/index.html b/about/index.html
index 6a37e6c..e70dcfa 100644
--- a/about/index.html
+++ b/about/index.html
@@ -24,7 +24,7 @@ $(document).ready(function(){
     <div style="margin-top: 10%;"></div><!-- Separator -->
 
     <main>
-      <div class="hero">
+      <div class="hero container">
          <h1>Colormatic: A non-profit project for creation.</h1>
          <p class="justify">Colormatic is a non-profit project for creating a curated collection of sub-projects that match a high-quality, high attention to detail standard.</p>
          <p class="justify">Colormatic Studios is a creative studio dedicated to giving life to maximum effort projects.</p>
diff --git a/css/colormaticstudios.css b/css/colormaticstudios.css
index 3f93b10..81c43b3 100644
--- a/css/colormaticstudios.css
+++ b/css/colormaticstudios.css
@@ -52,8 +52,8 @@ flex: 1;
   text-align: center;
   min-width: 40%;
   max-width: 50%;
-  background-color: #ffffff44;
-  backdrop-filter: blur(6px);
+  background-color: #ffffff22;
+  backdrop-filter: blur(3px);
 }
 
 div.project-grid-container div.project-grid-box h1 a {
diff --git a/css/style.css b/css/style.css
index 9e2c093..b030d0c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -101,6 +101,15 @@ nav div.inline {
   }
 }
 
+div.container {
+  color: var(--text-color);
+  border: solid 1px #00000033;
+  border-radius: 8px;
+  box-shadow: 1px 1px 8px #00000033;
+  background-color: #ffffff22;
+  backdrop-filter: blur(3px);
+}
+
 main div.heading {
   color: var(--text-color);
   font-size: 200%;
@@ -108,16 +117,10 @@ main div.heading {
 }
 
 main div.hero {
-  color: var(--text-color);
   width: 60%;
   margin: 16px auto 16px auto;
-  border: solid 1px #00000033;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
   padding: 16px;
   text-align: center;
-  background-color: #ffffff44;
-  backdrop-filter: blur(6px);
 }
 
 @media screen and (max-width: 800px) {
diff --git a/index.html b/index.html
index 1f68508..b821a3c 100644
--- a/index.html
+++ b/index.html
@@ -21,15 +21,15 @@ $(document).ready(function(){
     <div id="particle-container"></div>
     <script src="/js/bg.js"></script>
     <header id="navbar"></header>
-    <div style="margin-top: 10%;"></div><!-- Separator -->
+    <div style="margin-top: 8%;"></div><!-- Separator -->
 
     <main>
       <div class="heading">Featured Colormatic Studios Projects:</div>
-      <div class="hero">
+      <div class="hero container">
         <h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
         <p>An actually good first person controller for the Godot Engine.</p>
       </div>
-      <div class="hero">
+      <div class="hero container">
         <h1>ColorQuest</h1>
         <p>A simple MMORPG in your browser.</p>
         <p>Currently in <a href="https://en.wikipedia.org/wiki/Software_release_life_cycle#Pre-alpha" target="_blank" rel="noopener noreferrer">pre-alpha</a>.</p>
@@ -37,7 +37,7 @@ $(document).ready(function(){
       </div>
     </main>
 
-    <div style="margin-top: 10%;"></div><!-- Separator -->
+    <div style="margin-top: 8%;"></div><!-- Separator -->
     <footer id="footer"></footer>
   </body>
 </html>
diff --git a/js/bg.js b/js/bg.js
index d6fa60b..dcea6f0 100644
--- a/js/bg.js
+++ b/js/bg.js
@@ -22,7 +22,7 @@ class Particle {
         this.speedY = (Math.random() - 0.5) * 0.2;
         this.growthSpeed = (Math.random() * 0.02) + 0.01; // Growth speed for breathing effect
         this.shape = ['circle', 'square', 'triangle'][Math.floor(Math.random() * 3)]; // Randomly decide shape
-        this.angle = Math.random() * 360; // Initial rotation angle for squares
+        this.angle = Math.random() * 360; // Initial rotation angle for squares and triangles
         this.rotationSpeed = Math.random() * 2 - 1; // Random rotation speed
     }
 
@@ -53,7 +53,6 @@ class Particle {
     }
 
     draw() {
-        this.update();
         ctx.fillStyle = '#bbb';
         ctx.save();
         ctx.translate(this.x, this.y);
@@ -116,21 +115,6 @@ class Gradient {
         this.dAlpha = (Math.random() - 0.5) * 0.01;
     }
 
-    draw() {
-        this.update();
-        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
-        gradient.addColorStop(0, this.color);
-        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
-
-        ctx.globalAlpha = this.alpha;
-        ctx.fillStyle = gradient;
-        ctx.beginPath();
-        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-        ctx.closePath();
-        ctx.fill();
-        ctx.globalAlpha = 1.0;
-    }
-
     update() {
         this.x += this.speedX;
         this.y += this.speedY;
@@ -151,15 +135,29 @@ class Gradient {
         }
         this.y = clamp(0, this.y, canvas.height);
     }
+
+    draw() {
+        const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
+        gradient.addColorStop(0, this.color);
+        gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
+
+        ctx.globalAlpha = this.alpha;
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+        ctx.closePath();
+        ctx.fill();
+        ctx.globalAlpha = 1.0;
+    }
 }
 
-let gradients = [];
+let gradientsArray = [];
 
 function getRandomColor() {
     const r = Math.floor((Math.random() * 100) + 155);
     const g = Math.floor((Math.random() * 100) + 155);
     const b = Math.floor((Math.random() * 100) + 155);
-    return `rgba(${r}, ${g}, ${b}, 1)`;
+    return `rgb(${r}, ${g}, ${b})`;
 }
 
 function init() {
@@ -167,18 +165,24 @@ function init() {
     for (let i = 0; i < 100; i++) {
         particlesArray.push(new Particle());
     }
-    gradients = [];
-    for (let i = 0; i < 5; i++) {
-        gradients.push(new Gradient());
+    gradientsArray = [];
+    for (let i = 0; i < 10; i++) {
+        gradientsArray.push(new Gradient());
     }
 }
 
 function animate() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    gradients.forEach(gradient => gradient.draw());
+    gradientsArray.forEach((gradient) => {
+        gradient.update();
+        gradient.draw();
+    });
 
-    particlesArray.forEach(particle => particle.draw());
+    particlesArray.forEach((particle) => {
+        particle.update();
+        particle.draw();
+    });
 
     requestAnimationFrame(animate);
 }
diff --git a/studios/index.html b/studios/index.html
index 5f13e99..86e5c7c 100644
--- a/studios/index.html
+++ b/studios/index.html
@@ -27,21 +27,21 @@ $(document).ready(function(){
       <div class="heading"><h1>Colormatic Studios</h1></div>
 
       <div class="project-grid-container">
-        <div class="project-grid-box">
+        <div class="project-grid-box container">
           <h1><a href="https://github.com/ColormaticStudios/quality-godot-first-person-2" target="_blank" rel="noopener noreferrer">Quality First Person Controller</a></h1>
           <div class="project-grid-box-contents">
             <img src="https://raw.githubusercontent.com/ColormaticStudios/quality-godot-first-person-2/refs/heads/main/icon.svg">
             <p>An actually good first person controller for the Godot Engine.</p>
           </div>
         </div>
-        <div class="project-grid-box">
+        <div class="project-grid-box container">
           <h1>A Silly Game</h1>
           <div class="project-grid-box-contents">
             <img src="/studios/img/hatcat.webp">
             <p>This is a silly little game project to get us started.</p>
           </div>
         </div>
-        <div class="project-grid-box">
+        <div class="project-grid-box container">
           <h1>ColorQuest</h1>
           <div class="project-grid-box-contents">
             <img src="/studios/img/colorquest.png" class="pixelart">
@@ -50,7 +50,7 @@ $(document).ready(function(){
         </div>
       </div>
 
-      <div class="hero">
+      <div class="hero container">
         <h1>Links:</h1>
         <div class="double-linktree">
           <ul class="linktree">
diff --git a/video/css/style.css b/video/css/style.css
index bce7b7e..f7329aa 100644
--- a/video/css/style.css
+++ b/video/css/style.css
@@ -1,4 +1,4 @@
-div.videocontainer {
+div.video.container {
   display: flex;
   color: var(--text-color);
   width: 90%;
@@ -7,23 +7,23 @@ div.videocontainer {
   border-radius: 8px;
   box-shadow: 1px 1px 8px #00000033;
   padding: 16px;
-  background-color: #ffffff44;
-  backdrop-filter: blur(6px);
+  background-color: #ffffff22;
+  backdrop-filter: blur(3px);
 }
 
-div.videocontainer video#videoplayer {
+div.video.container video#videoplayer {
   flex-grow: 1;
   border-radius: 12px;
   height: auto;
   max-width: 55%;
 }
 
-div.videocontainer div.videoobjects {
+div.video.container div.videoobjects {
   display: grid;
   padding: 24px;
 }
 
-div.videocontainer div.videodetails h1#videotitle {
+div.video.container div.videodetails h1#videotitle {
   padding: 0 12px;
 }
 
@@ -32,7 +32,7 @@ div.dropdown-container {
   flex-direction: column-reverse;
 }
 
-div.videocontainer div.download-dropdown {
+div.video.container div.download-dropdown {
   position: relative;
   display: inline-block;
   padding: 12px;
@@ -44,16 +44,16 @@ div.videocontainer div.download-dropdown {
   transition-duration: 0.35s;
 }
 
-div.videocontainer div.download-dropdown:hover {
+div.video.container div.download-dropdown:hover {
   box-shadow: 1px 1px 8px #00000088;
 }
 
-div.videocontainer div.download-dropdown img {
+div.video.container div.download-dropdown img {
   width: 25px;
   height: 25px;
 }
 
-div.videocontainer div.download-dropdown div.dropdown-content {
+div.video.container div.download-dropdown div.dropdown-content {
   display: none;
   position: absolute;
   font-size: 80%;
@@ -64,37 +64,37 @@ div.videocontainer div.download-dropdown div.dropdown-content {
   text-align: center;
 }
 
-div.videocontainer div.download-dropdown:hover div.dropdown-content {
+div.video.container div.download-dropdown:hover div.dropdown-content {
   display: block;
 }
 
-div.videocontainer div.download-dropdown div.dropdown-content ul {
+div.video.container div.download-dropdown div.dropdown-content ul {
   list-style-type: none;
   padding-left: 0;
 }
 
-div.videocontainer div.download-dropdown div.dropdown-content ul li {
+div.video.container div.download-dropdown div.dropdown-content ul li {
   padding: 4px;
 }
 
-div.videocontainer div.download-dropdown div.dropdown-content ul li:hover {
+div.video.container div.download-dropdown div.dropdown-content ul li:hover {
   background-color: #dcdfdf;
 }
 
-div.videocontainer div.download-dropdown div.dropdown-content ul li a {
+div.video.container div.download-dropdown div.dropdown-content ul li a {
   text-decoration: none;
   color: var(--text-color);
 }
 
 @media screen and (max-width: 800px) {
-  div.videocontainer {
+  div.video.container {
     display: block;
   }
-  div.videocontainer video#videoplayer {
+  div.video.container video#videoplayer {
     width: 100%;
     max-width: none;
   }
-  div.videocontainer div.download-dropdown {
+  div.video.container div.download-dropdown {
     display: block;
     margin-left: auto;
     margin-right: auto;
diff --git a/video/index.html b/video/index.html
index 0a19e3c..89ab406 100644
--- a/video/index.html
+++ b/video/index.html
@@ -23,7 +23,7 @@ $(document).ready(function(){
     <script src="/js/bg.js"></script>
     <header class="container" id="navbar"></header>
 
-    <div class="videocontainer">
+    <div class="video container">
       <video id="videoplayer" controls></video>
       <div class="videoobjects">
         <div class="videodetails">
diff --git a/zakarya/index.html b/zakarya/index.html
index 0e9ddde..d3c1391 100644
--- a/zakarya/index.html
+++ b/zakarya/index.html
@@ -26,7 +26,7 @@ $(document).ready(function(){
     <main>
       <img class="banner" src="/img/zakarya-banner.png">
 
-      <div class="hero">
+      <div class="hero container">
         <h1>Links:</h1>
         <ul class="linktree">
           <li><a href="https://mstdn.party/@zakarya" target="_blank" rel="noopener noreferrer">Mastodon</a></li>
@@ -37,7 +37,7 @@ $(document).ready(function(){
         </ul>
       </div>
 
-      <div class="hero">
+      <div class="hero container">
         <h1>Featured Videos:</h1>
         <ul class="videolist">
           <li><a href="/video?c=zakarya&v=the-way-forward">