From b507a6b0eae3711d9577282e796e2c4a693ce012 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 25 Feb 2025 10:04:34 +0100
Subject: [PATCH] formatted like my Boss wants it (help!)

---
 dropdown.js                         |  65 +++---
 footer.js                           |  11 +-
 header.js                           |   2 +-
 secret/asteroidDestroyer/game.js    | 126 ++++++-----
 secret/asteroidDestroyer/style.css  |  60 +++---
 secret/asteroidDestroyer/styles.css |  96 +++++----
 secret/endlessRunner/script.js      | 136 ++++++------
 secret/game.js                      | 126 ++++++-----
 secret/guessMyNumber/game.js        |  87 ++++----
 secret/guessMyNumber/styles.css     | 226 ++++++++++----------
 secret/guessMyNumber/styles.js      | 174 +++++++++++----
 secret/mineSweeper/script.js        | 321 +++++++++++++++-------------
 secret/mineSweeper/styles.css       | 132 ++++++------
 secret/snake/game.js                | 204 +++++++++---------
 secret/snake/styles.css             | 272 +++++++++++------------
 secret/snake/styles.js              | 158 ++++++++++----
 secret/styles.css                   | 194 +++++++++--------
 styles.css                          |  29 ++-
 webGames/styles.css                 | 142 ++++++------
 19 files changed, 1425 insertions(+), 1136 deletions(-)

diff --git a/dropdown.js b/dropdown.js
index 5d28b26..fc97817 100644
--- a/dropdown.js
+++ b/dropdown.js
@@ -18,39 +18,44 @@
  *        along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 document.addEventListener("DOMContentLoaded", () => {
-    const menu = document.querySelector(".menu");
-    const burgerMenu = document.querySelector(".burger-menu");
+  const menu = document.querySelector(".menu");
+  const burgerMenu = document.querySelector(".burger-menu");
 
-    if (!menu || !burgerMenu) {
-        console.warn("Menu or burger menu element not found. Ensure they exist in the DOM.");
-        return;
+  if (!menu || !burgerMenu) {
+    console.warn(
+      "Menu or burger menu element not found. Ensure they exist in the DOM."
+    );
+    return;
+  }
+
+  // Toggle the menu visibility
+  function toggleMenu() {
+    menu.classList.toggle("active");
+
+    if (menu.classList.contains("active")) {
+      // Add click listener to close menu when clicking outside
+      document.addEventListener("click", closeMenu);
+    } else {
+      // Remove the click listener when menu is closed
+      document.removeEventListener("click", closeMenu);
     }
+  }
 
-    // Toggle the menu visibility
-    function toggleMenu() {
-        menu.classList.toggle("active");
-        
-        if (menu.classList.contains("active")) {
-            // Add click listener to close menu when clicking outside
-            document.addEventListener("click", closeMenu);
-        } else {
-            // Remove the click listener when menu is closed
-            document.removeEventListener("click", closeMenu);
-        }
+  // Close the menu if clicking outside of it
+  function closeMenu(event) {
+    if (
+      !menu.contains(event.target) &&
+      !event.target.classList.contains("burger-menu")
+    ) {
+      menu.classList.remove("active");
+      document.removeEventListener("click", closeMenu);
     }
+  }
 
-    // Close the menu if clicking outside of it
-    function closeMenu(event) {
-        if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) {
-            menu.classList.remove("active");
-            document.removeEventListener("click", closeMenu);
-        }
-    }
-
-    // Attach click event to the burger menu button
-    burgerMenu.addEventListener("click", (event) => {
-        event.stopPropagation(); // Prevent click from immediately triggering closeMenu
-        toggleMenu();
-    });
+  // Attach click event to the burger menu button
+  burgerMenu.addEventListener("click", (event) => {
+    event.stopPropagation(); // Prevent click from immediately triggering closeMenu
+    toggleMenu();
+  });
 });
-// @license-end
\ No newline at end of file
+// @license-end
diff --git a/footer.js b/footer.js
index 849c82d..3aed36c 100644
--- a/footer.js
+++ b/footer.js
@@ -37,17 +37,16 @@ class Footer extends HTMLElement {
     `;
 
     // Add event listener for button click
-    this.querySelector('.secret-button').addEventListener('click', () => {
-      window.open('secret/index.html', '_blank');
+    this.querySelector(".secret-button").addEventListener("click", () => {
+      window.open("secret/index.html", "_blank");
     });
   }
 }
 
-customElements.define('footer-component', Footer);
-
+customElements.define("footer-component", Footer);
 
 // CSS for the hidden button
-const style = document.createElement('style');
+const style = document.createElement("style");
 style.textContent = `
 .secret-button {
   display: none;
@@ -66,4 +65,4 @@ style.textContent = `
     `;
 document.head.appendChild(style);
 
-// @license-end
\ No newline at end of file
+// @license-end
diff --git a/header.js b/header.js
index 3bd9f3c..6cb9811 100644
--- a/header.js
+++ b/header.js
@@ -42,5 +42,5 @@ class Header extends HTMLElement {
   }
 }
 
-customElements.define('header-component', Header);
+customElements.define("header-component", Header);
 // @license-end
diff --git a/secret/asteroidDestroyer/game.js b/secret/asteroidDestroyer/game.js
index d792739..2ea6461 100644
--- a/secret/asteroidDestroyer/game.js
+++ b/secret/asteroidDestroyer/game.js
@@ -1,7 +1,7 @@
 "use strict";
 // Canvas setup
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
 const targetFPS = 60;
 const targetFrameTime = 1000 / targetFPS;
 canvas.width = window.innerWidth;
@@ -15,9 +15,9 @@ const player = {
   y: canvas.height - 60,
   width: 40,
   height: 40,
-  color: 'white',
+  color: "white",
   speed: 5,
-  dx: 0
+  dx: 0,
 };
 
 let bullets = [];
@@ -48,14 +48,14 @@ let greenSphereCooldown = 0;
 let rainbowSphereCooldown = 0;
 
 // Sphere types
-const sphereTypes = ['blue', 'yellow', 'green', 'rainbow'];
+const sphereTypes = ["blue", "yellow", "green", "rainbow"];
 
 /// Control for left button press and release
 function btnMoveLeft(isPressed) {
   if (isPressed) {
-    player.dx = -player.speed;  // Start moving left
+    player.dx = -player.speed; // Start moving left
   } else {
-    player.dx = 0;  // Stop moving when button is released
+    player.dx = 0; // Stop moving when button is released
   }
 }
 
@@ -70,37 +70,42 @@ function btnShoot() {
 // Control for right button press and release
 function btnMoveRight(isPressed) {
   if (isPressed) {
-    player.dx = player.speed;  // Start moving right
+    player.dx = player.speed; // Start moving right
   } else {
-    player.dx = 0;  // Stop moving when button is released
+    player.dx = 0; // Stop moving when button is released
   }
 }
 
-document.getElementById('shootBtn').addEventListener('mouseup', () => {
+document.getElementById("shootBtn").addEventListener("mouseup", () => {
   canShoot = true; // Allow shooting again when button is released
 });
 
-window.addEventListener('keydown', (e) => {
-  if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
-  if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
+window.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
+  if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed;
 
   // Shoot only if it's not a hold, and we can shoot
-  if (e.key === ' ' && canShoot && !isGameOver) {
+  if (e.key === " " && canShoot && !isGameOver) {
     shootBullet();
     canShoot = false; // Prevent shooting until the key is released
   }
 
-  if (e.key === 'r' && isGameOver) restartGame();
+  if (e.key === "r" && isGameOver) restartGame();
 });
 
-window.addEventListener('keyup', (e) => {
+window.addEventListener("keyup", (e) => {
   // Stop moving when either the arrow keys or the 'a'/'d' keys are released
-  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
+  if (
+    e.key === "ArrowLeft" ||
+    e.key === "ArrowRight" ||
+    e.key === "a" ||
+    e.key === "d"
+  ) {
     player.dx = 0;
   }
 
   // Allow shooting again when the space key is released
-  if (e.key === ' ') {
+  if (e.key === " ") {
     canShoot = true;
   }
 });
@@ -124,8 +129,8 @@ function shootBullet() {
           y: player.y,
           width: 5,
           height: 10,
-          color: 'yellow',
-          speed: 7
+          color: "yellow",
+          speed: 7,
         });
       }, i * 50); // Fire bullets with 50ms delay between shots
     }
@@ -137,9 +142,9 @@ function shootBullet() {
         y: player.y,
         width: 5,
         height: 10,
-        color: 'yellow',
+        color: "yellow",
         speed: 7,
-        angle: i * 10 // Spray the bullets at different angles
+        angle: i * 10, // Spray the bullets at different angles
       });
     }
   } else {
@@ -149,15 +154,15 @@ function shootBullet() {
       y: player.y,
       width: 5,
       height: 10,
-      color: 'yellow',
-      speed: 7
+      color: "yellow",
+      speed: 7,
     });
   }
 }
 
 // Generate random color
 function getRandomColor() {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink'];
+  const colors = ["red", "blue", "green", "orange", "purple", "pink"];
   return colors[Math.floor(Math.random() * colors.length)];
 }
 
@@ -170,13 +175,14 @@ function createAsteroid() {
     width: size,
     height: size,
     color: getRandomColor(),
-    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed
+    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
   });
 }
 
 // Item mechanics
 function createItem() {
-  const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
+  const randomType =
+    sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
   const size = 30;
   const x = Math.random() * canvas.width;
   items.push({
@@ -185,8 +191,15 @@ function createItem() {
     width: size,
     height: size,
     type: randomType,
-    color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow',
-    speed: 3
+    color:
+      randomType === "blue"
+        ? "blue"
+        : randomType === "yellow"
+        ? "yellow"
+        : randomType === "green"
+        ? "green"
+        : "rainbow",
+    speed: 3,
   });
 }
 
@@ -194,7 +207,8 @@ function createItem() {
 function updatePlayer() {
   player.x += player.dx;
   if (player.x < 0) player.x = 0;
-  if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
+  if (player.x + player.width > canvas.width)
+    player.x = canvas.width - player.width;
 }
 
 function updateBullets() {
@@ -230,15 +244,15 @@ function updateItems() {
 
 function applyItemEffect(type) {
   let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
-  if (type === 'blue') {
+  if (type === "blue") {
     rapidFireActive = true;
-    setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
-  } else if (type === 'yellow') {
+    setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
+  } else if (type === "yellow") {
     shotgunActive = true;
-    setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun
-  } else if (type === 'green') {
+    setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
+  } else if (type === "green") {
     ammo = 100; // Refill ammo
-  } else if (type === 'rainbow') {
+  } else if (type === "rainbow") {
     rapidFireActive = true;
     shotgunActive = true;
     setTimeout(() => {
@@ -282,7 +296,7 @@ function checkCollisions() {
 
 // Explosion effect
 function createExplosion(x, y) {
-  ctx.fillStyle = 'yellow';
+  ctx.fillStyle = "yellow";
   ctx.beginPath();
   ctx.arc(x, y, 20, 0, Math.PI * 2);
   ctx.fill();
@@ -313,33 +327,47 @@ function drawItems() {
   items.forEach((item) => {
     ctx.fillStyle = item.color;
     ctx.beginPath();
-    ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2);
+    ctx.arc(
+      item.x + item.width / 2,
+      item.y + item.height / 2,
+      item.width / 2,
+      0,
+      Math.PI * 2
+    );
     ctx.fill();
   });
 }
 
 function drawScore() {
-  ctx.fillStyle = 'white';
-  ctx.font = '24px Arial';
+  ctx.fillStyle = "white";
+  ctx.font = "24px Arial";
   ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
 }
 
 function drawAmmo() {
-  ctx.fillStyle = 'white';
-  ctx.font = '24px Arial';
+  ctx.fillStyle = "white";
+  ctx.font = "24px Arial";
   ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
 }
 
 function drawGameOver() {
   if (isGameOver) {
-    ctx.fillStyle = 'white';
-    ctx.font = '40px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
-    ctx.font = '24px Arial';
+    ctx.fillStyle = "white";
+    ctx.font = "40px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
+    ctx.font = "24px Arial";
     ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2);
-    ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40);
-    ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80);
+    ctx.fillText(
+      `Bullets Fired: ${totalBulletsFired}`,
+      canvas.width / 2,
+      canvas.height / 2 + 40
+    );
+    ctx.fillText(
+      'Press "R" to Restart',
+      canvas.width / 2,
+      canvas.height / 2 + 80
+    );
   }
 }
 
diff --git a/secret/asteroidDestroyer/style.css b/secret/asteroidDestroyer/style.css
index be1817f..e90a6ad 100644
--- a/secret/asteroidDestroyer/style.css
+++ b/secret/asteroidDestroyer/style.css
@@ -1,43 +1,43 @@
 body {
-    margin: 0;
-    overflow: hidden;
+  margin: 0;
+  overflow: hidden;
 }
 
 canvas {
-    display: block;
-    background: black;
-    width: 100%;
-    height: 100%;
+  display: block;
+  background: black;
+  width: 100%;
+  height: 100%;
 }
 
 .controls {
-    display: none;
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    display: flex;
-    justify-content: space-between;
-    width: 80%;
+  display: none;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
 }
 
 .control-btn {
-    display: none;
-    padding: 10px;
-    font-size: 18px;
-    background-color: rgba(0, 0, 0, 0.6);
-    color: white;
-    border: 1px solid #fff;
-    border-radius: 5px;
-    cursor: pointer;
-    flex-grow: 1;
-    margin: 0 5px;
+  display: none;
+  padding: 10px;
+  font-size: 18px;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  flex-grow: 1;
+  margin: 0 5px;
 }
 
-@media(max-width: 600px) {
-    .control-btn {
-        display: block;
-        font-size: 16px;
-        padding: 12px;
-    }
+@media (max-width: 600px) {
+  .control-btn {
+    display: block;
+    font-size: 16px;
+    padding: 12px;
+  }
 }
diff --git a/secret/asteroidDestroyer/styles.css b/secret/asteroidDestroyer/styles.css
index b72528c..7d92d64 100644
--- a/secret/asteroidDestroyer/styles.css
+++ b/secret/asteroidDestroyer/styles.css
@@ -1,74 +1,76 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body,
 html {
-    height: 100%;
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #000;
-    color: white;
-    overflow: hidden;
+  height: 100%;
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+  color: white;
+  overflow: hidden;
 }
 
 .landing-page {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .game-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
-    backdrop-filter: blur(8px); /* Apply blur effect to the background */
-    z-index: -1; /* Ensures it's in the background */
-    pointer-events: none; /* Prevent interaction with the blurred background */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
+  backdrop-filter: blur(8px); /* Apply blur effect to the background */
+  z-index: -1; /* Ensures it's in the background */
+  pointer-events: none; /* Prevent interaction with the blurred background */
 }
 
 .content {
-    text-align: center;
-    z-index: 1; /* Ensure content appears above the game background */
-    padding: 20px;
-    max-width: 600px; /* Limit the width of the content */
-    position: relative;
-    color: white;
-    backdrop-filter: blur(8px); /* Ensure content has some blur as well for contrast */
+  text-align: center;
+  z-index: 1; /* Ensure content appears above the game background */
+  padding: 20px;
+  max-width: 600px; /* Limit the width of the content */
+  position: relative;
+  color: white;
+  backdrop-filter: blur(
+    8px
+  ); /* Ensure content has some blur as well for contrast */
 }
 
 h1 {
-    font-size: 2rem;
-    margin-bottom: 20px;
+  font-size: 2rem;
+  margin-bottom: 20px;
 }
 
 p {
-    font-size: 1.2rem;
-    margin-bottom: 30px;
+  font-size: 1.2rem;
+  margin-bottom: 30px;
 }
 
 button {
-    padding: 12px 24px;
-    background-color: #ffcc00;
-    color: black;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-    border-radius: 5px;
-    text-transform: uppercase;
-    transition: background-color 0.3s ease;
+  padding: 12px 24px;
+  background-color: #ffcc00;
+  color: black;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  border-radius: 5px;
+  text-transform: uppercase;
+  transition: background-color 0.3s ease;
 }
 
 button:hover {
-    background-color: #ff9900;
+  background-color: #ff9900;
 }
diff --git a/secret/endlessRunner/script.js b/secret/endlessRunner/script.js
index c1f200f..59df696 100644
--- a/secret/endlessRunner/script.js
+++ b/secret/endlessRunner/script.js
@@ -1,78 +1,90 @@
 import { useEffect, useRef, useState } from "react";
 
 export default function EndlessRunner() {
-    const canvasRef = useRef(null);
-    const [running, setRunning] = useState(true);
-    const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
-    const gravity = 0.5;
-    let obstacles = [];
-    let score = 0;
+  const canvasRef = useRef(null);
+  const [running, setRunning] = useState(true);
+  const player = { x: 50, y: 150, width: 20, height: 20, dy: 0 };
+  const gravity = 0.5;
+  let obstacles = [];
+  let score = 0;
 
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext("2d");
-        canvas.width = window.innerWidth;
-        canvas.height = 300;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    canvas.width = window.innerWidth;
+    canvas.height = 300;
 
-        function update() {
-            if (!running) return;
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
+    function update() {
+      if (!running) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-            // Player physics
-            player.dy += gravity;
-            player.y += player.dy;
-            if (player.y > 150) {
-                player.y = 150;
-                player.dy = 0;
-            }
+      // Player physics
+      player.dy += gravity;
+      player.y += player.dy;
+      if (player.y > 150) {
+        player.y = 150;
+        player.dy = 0;
+      }
 
-            // Draw player
-            ctx.fillStyle = "blue";
-            ctx.fillRect(player.x, player.y, player.width, player.height);
+      // Draw player
+      ctx.fillStyle = "blue";
+      ctx.fillRect(player.x, player.y, player.width, player.height);
 
-            // Obstacles
-            if (Math.random() < 0.02) {
-                obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
-            }
-            obstacles = obstacles.map(obstacle => ({ ...obstacle, x: obstacle.x - 5 }));
-            obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);
+      // Obstacles
+      if (Math.random() < 0.02) {
+        obstacles.push({ x: canvas.width, y: 150, width: 20, height: 20 });
+      }
+      obstacles = obstacles.map((obstacle) => ({
+        ...obstacle,
+        x: obstacle.x - 5,
+      }));
+      obstacles = obstacles.filter(
+        (obstacle) => obstacle.x + obstacle.width > 0
+      );
 
-            obstacles.forEach(obstacle => {
-                ctx.fillStyle = "red";
-                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+      obstacles.forEach((obstacle) => {
+        ctx.fillStyle = "red";
+        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
 
-                // Collision detection
-                if (
-                    player.x < obstacle.x + obstacle.width &&
-                    player.x + player.width > obstacle.x &&
-                    player.y < obstacle.y + obstacle.height &&
-                    player.y + player.height > obstacle.y
-                ) {
-                    setRunning(false);
-                }
-            });
-
-            // Score
-            score++;
-            ctx.fillStyle = "black";
-            ctx.fillText("Score: " + score, 10, 20);
-
-            requestAnimationFrame(update);
+        // Collision detection
+        if (
+          player.x < obstacle.x + obstacle.width &&
+          player.x + player.width > obstacle.x &&
+          player.y < obstacle.y + obstacle.height &&
+          player.y + player.height > obstacle.y
+        ) {
+          setRunning(false);
         }
+      });
 
-        update();
-    }, [running]);
+      // Score
+      score++;
+      ctx.fillStyle = "black";
+      ctx.fillText("Score: " + score, 10, 20);
 
-    function jump() {
-        if (player.y >= 150) {
-            player.dy = -10;
-        }
+      requestAnimationFrame(update);
     }
 
-    return (
-        <div className="flex flex-col items-center">
-            <canvas ref={canvasRef} className="border" onClick={jump}></canvas>
-            {!running && <button onClick={() => window.location.reload()} className="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Restart</button>}
-        </div>
-    );
+    update();
+  }, [running]);
+
+  function jump() {
+    if (player.y >= 150) {
+      player.dy = -10;
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <canvas ref={canvasRef} className="border" onClick={jump}></canvas>
+      {!running && (
+        <button
+          onClick={() => window.location.reload()}
+          className="mt-4 bg-blue-500 text-white px-4 py-2 rounded"
+        >
+          Restart
+        </button>
+      )}
+    </div>
+  );
 }
diff --git a/secret/game.js b/secret/game.js
index 8231594..36185f6 100644
--- a/secret/game.js
+++ b/secret/game.js
@@ -1,7 +1,7 @@
 "use strict";
 // Canvas setup
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("gameCanvas");
+const ctx = canvas.getContext("2d");
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 
@@ -11,9 +11,9 @@ const player = {
   y: canvas.height - 60,
   width: 40,
   height: 40,
-  color: 'white',
+  color: "white",
   speed: 5,
-  dx: 0
+  dx: 0,
 };
 
 let bullets = [];
@@ -44,14 +44,14 @@ let greenSphereCooldown = 0;
 let rainbowSphereCooldown = 0;
 
 // Sphere types
-const sphereTypes = ['blue', 'yellow', 'green', 'rainbow'];
+const sphereTypes = ["blue", "yellow", "green", "rainbow"];
 
 /// Control for left button press and release
 function btnMoveLeft(isPressed) {
   if (isPressed) {
-    player.dx = -player.speed;  // Start moving left
+    player.dx = -player.speed; // Start moving left
   } else {
-    player.dx = 0;  // Stop moving when button is released
+    player.dx = 0; // Stop moving when button is released
   }
 }
 
@@ -66,37 +66,42 @@ function btnShoot() {
 // Control for right button press and release
 function btnMoveRight(isPressed) {
   if (isPressed) {
-    player.dx = player.speed;  // Start moving right
+    player.dx = player.speed; // Start moving right
   } else {
-    player.dx = 0;  // Stop moving when button is released
+    player.dx = 0; // Stop moving when button is released
   }
 }
 
-document.getElementById('shootBtn').addEventListener('mouseup', () => {
+document.getElementById("shootBtn").addEventListener("mouseup", () => {
   canShoot = true; // Allow shooting again when button is released
 });
 
-window.addEventListener('keydown', (e) => {
-  if (e.key === 'ArrowLeft' || e.key === 'a') player.dx = -player.speed;
-  if (e.key === 'ArrowRight' || e.key === 'd') player.dx = player.speed;
+window.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowLeft" || e.key === "a") player.dx = -player.speed;
+  if (e.key === "ArrowRight" || e.key === "d") player.dx = player.speed;
 
   // Shoot only if it's not a hold, and we can shoot
-  if (e.key === ' ' && canShoot && !isGameOver) {
+  if (e.key === " " && canShoot && !isGameOver) {
     shootBullet();
     canShoot = false; // Prevent shooting until the key is released
   }
 
-  if (e.key === 'r' && isGameOver) restartGame();
+  if (e.key === "r" && isGameOver) restartGame();
 });
 
-window.addEventListener('keyup', (e) => {
+window.addEventListener("keyup", (e) => {
   // Stop moving when either the arrow keys or the 'a'/'d' keys are released
-  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
+  if (
+    e.key === "ArrowLeft" ||
+    e.key === "ArrowRight" ||
+    e.key === "a" ||
+    e.key === "d"
+  ) {
     player.dx = 0;
   }
 
   // Allow shooting again when the space key is released
-  if (e.key === ' ') {
+  if (e.key === " ") {
     canShoot = true;
   }
 });
@@ -120,8 +125,8 @@ function shootBullet() {
           y: player.y,
           width: 5,
           height: 10,
-          color: 'yellow',
-          speed: 7
+          color: "yellow",
+          speed: 7,
         });
       }, i * 50); // Fire bullets with 50ms delay between shots
     }
@@ -133,9 +138,9 @@ function shootBullet() {
         y: player.y,
         width: 5,
         height: 10,
-        color: 'yellow',
+        color: "yellow",
         speed: 7,
-        angle: i * 10 // Spray the bullets at different angles
+        angle: i * 10, // Spray the bullets at different angles
       });
     }
   } else {
@@ -145,15 +150,15 @@ function shootBullet() {
       y: player.y,
       width: 5,
       height: 10,
-      color: 'yellow',
-      speed: 7
+      color: "yellow",
+      speed: 7,
     });
   }
 }
 
 // Generate random color
 function getRandomColor() {
-  const colors = ['red', 'blue', 'green', 'orange', 'purple', 'pink'];
+  const colors = ["red", "blue", "green", "orange", "purple", "pink"];
   return colors[Math.floor(Math.random() * colors.length)];
 }
 
@@ -166,13 +171,14 @@ function createAsteroid() {
     width: size,
     height: size,
     color: getRandomColor(),
-    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier // Faster initial speed
+    speed: (Math.random() * 3 + 2) * asteroidSpeedMultiplier, // Faster initial speed
   });
 }
 
 // Item mechanics
 function createItem() {
-  const randomType = sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
+  const randomType =
+    sphereTypes[Math.floor(Math.random() * sphereTypes.length)];
   const size = 30;
   const x = Math.random() * canvas.width;
   items.push({
@@ -181,8 +187,15 @@ function createItem() {
     width: size,
     height: size,
     type: randomType,
-    color: randomType === 'blue' ? 'blue' : randomType === 'yellow' ? 'yellow' : randomType === 'green' ? 'green' : 'rainbow',
-    speed: 3
+    color:
+      randomType === "blue"
+        ? "blue"
+        : randomType === "yellow"
+        ? "yellow"
+        : randomType === "green"
+        ? "green"
+        : "rainbow",
+    speed: 3,
   });
 }
 
@@ -190,7 +203,8 @@ function createItem() {
 function updatePlayer() {
   player.x += player.dx;
   if (player.x < 0) player.x = 0;
-  if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
+  if (player.x + player.width > canvas.width)
+    player.x = canvas.width - player.width;
 }
 
 function updateBullets() {
@@ -226,15 +240,15 @@ function updateItems() {
 
 function applyItemEffect(type) {
   let points = Math.floor(Math.random() * 5) + 1; // Random points between 1 and 5
-  if (type === 'blue') {
+  if (type === "blue") {
     rapidFireActive = true;
-    setTimeout(() => rapidFireActive = false, 15000); // 15 seconds of rapid fire
-  } else if (type === 'yellow') {
+    setTimeout(() => (rapidFireActive = false), 15000); // 15 seconds of rapid fire
+  } else if (type === "yellow") {
     shotgunActive = true;
-    setTimeout(() => shotgunActive = false, 30000); // 30 seconds of shotgun
-  } else if (type === 'green') {
+    setTimeout(() => (shotgunActive = false), 30000); // 30 seconds of shotgun
+  } else if (type === "green") {
     ammo = 100; // Refill ammo
-  } else if (type === 'rainbow') {
+  } else if (type === "rainbow") {
     rapidFireActive = true;
     shotgunActive = true;
     setTimeout(() => {
@@ -278,7 +292,7 @@ function checkCollisions() {
 
 // Explosion effect
 function createExplosion(x, y) {
-  ctx.fillStyle = 'yellow';
+  ctx.fillStyle = "yellow";
   ctx.beginPath();
   ctx.arc(x, y, 20, 0, Math.PI * 2);
   ctx.fill();
@@ -309,33 +323,47 @@ function drawItems() {
   items.forEach((item) => {
     ctx.fillStyle = item.color;
     ctx.beginPath();
-    ctx.arc(item.x + item.width / 2, item.y + item.height / 2, item.width / 2, 0, Math.PI * 2);
+    ctx.arc(
+      item.x + item.width / 2,
+      item.y + item.height / 2,
+      item.width / 2,
+      0,
+      Math.PI * 2
+    );
     ctx.fill();
   });
 }
 
 function drawScore() {
-  ctx.fillStyle = 'white';
-  ctx.font = '24px Arial';
+  ctx.fillStyle = "white";
+  ctx.font = "24px Arial";
   ctx.fillText(`Score: ${score}`, 20, 40); // Score at top-left corner
 }
 
 function drawAmmo() {
-  ctx.fillStyle = 'white';
-  ctx.font = '24px Arial';
+  ctx.fillStyle = "white";
+  ctx.font = "24px Arial";
   ctx.fillText(`Ammo: ${ammo}`, 20, 70); // Ammo at top-left corner
 }
 
 function drawGameOver() {
   if (isGameOver) {
-    ctx.fillStyle = 'white';
-    ctx.font = '40px Arial';
-    ctx.textAlign = 'center';
-    ctx.fillText('Game Over!', canvas.width / 2, canvas.height / 2 - 40);
-    ctx.font = '24px Arial';
+    ctx.fillStyle = "white";
+    ctx.font = "40px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 40);
+    ctx.font = "24px Arial";
     ctx.fillText(`Total Score: ${score}`, canvas.width / 2, canvas.height / 2);
-    ctx.fillText(`Bullets Fired: ${totalBulletsFired}`, canvas.width / 2, canvas.height / 2 + 40);
-    ctx.fillText('Press "R" to Restart', canvas.width / 2, canvas.height / 2 + 80);
+    ctx.fillText(
+      `Bullets Fired: ${totalBulletsFired}`,
+      canvas.width / 2,
+      canvas.height / 2 + 40
+    );
+    ctx.fillText(
+      'Press "R" to Restart',
+      canvas.width / 2,
+      canvas.height / 2 + 80
+    );
   }
 }
 
diff --git a/secret/guessMyNumber/game.js b/secret/guessMyNumber/game.js
index cd5803d..9a3436d 100644
--- a/secret/guessMyNumber/game.js
+++ b/secret/guessMyNumber/game.js
@@ -1,54 +1,65 @@
-'use strict';
+"use strict";
 
 const targetNum = Math.trunc(Math.random() * 20) + 1;
-let highScore = Number(localStorage.getItem('highscore')) || 0;
-let userGuess = 10;  // Default guess
+let highScore = Number(localStorage.getItem("highscore")) || 0;
+let userGuess = 10; // Default guess
 let currScore = 20;
 
-const screenEl = document.querySelector('.screen');
-const msgEl = document.querySelector('.message');
-const guessInput = document.querySelector('#guess');
-const scoreEl = document.querySelector('.score');
-const highScoreEl = document.querySelector('.highScore');
-const checkBtn = document.querySelector('#check');
-const restartBtn = document.querySelector('#restart');
-const incBtn = document.querySelector('#up');
-const decBtn = document.querySelector('#down');
+const screenEl = document.querySelector(".screen");
+const msgEl = document.querySelector(".message");
+const guessInput = document.querySelector("#guess");
+const scoreEl = document.querySelector(".score");
+const highScoreEl = document.querySelector(".highScore");
+const checkBtn = document.querySelector("#check");
+const restartBtn = document.querySelector("#restart");
+const incBtn = document.querySelector("#up");
+const decBtn = document.querySelector("#down");
 
-const setMsg = msg => msgEl.textContent = msg;
-const setScore = score => scoreEl.textContent = `Score: ${currScore = score}`;
+const setMsg = (msg) => (msgEl.textContent = msg);
+const setScore = (score) =>
+  (scoreEl.textContent = `Score: ${(currScore = score)}`);
 const setHighScore = () => {
-    highScoreEl.textContent = `Highscore: ${highScore}`;
-    localStorage.setItem('highscore', highScore);
+  highScoreEl.textContent = `Highscore: ${highScore}`;
+  localStorage.setItem("highscore", highScore);
 };
-const changeColor = color => screenEl.style.backgroundColor = color;
+const changeColor = (color) => (screenEl.style.backgroundColor = color);
 
-checkBtn.addEventListener('click', () => {
-    userGuess = Number(guessInput.textContent);
-    if (!userGuess || userGuess < 1 || userGuess > 20) {
-        setMsg("Please enter a valid number between 1 and 20.");
-    } else if (userGuess === targetNum) {
-        highScore = Math.max(highScore, currScore);
-        setHighScore();
-        setMsg(currScore !== 20 ? 'Correct Number!' : 'Are you sure you didn\'t cheat?');
-        changeColor(currScore !== 20 ? '#1ba100' : '#FFC300');
+checkBtn.addEventListener("click", () => {
+  userGuess = Number(guessInput.textContent);
+  if (!userGuess || userGuess < 1 || userGuess > 20) {
+    setMsg("Please enter a valid number between 1 and 20.");
+  } else if (userGuess === targetNum) {
+    highScore = Math.max(highScore, currScore);
+    setHighScore();
+    setMsg(
+      currScore !== 20 ? "Correct Number!" : "Are you sure you didn't cheat?"
+    );
+    changeColor(currScore !== 20 ? "#1ba100" : "#FFC300");
+  } else {
+    setMsg(userGuess > targetNum ? "Too High!" : "Too Low!");
+    if (currScore > 1) {
+      setScore(currScore - 1);
     } else {
-        setMsg(userGuess > targetNum ? 'Too High!' : 'Too Low!');
-        if (currScore > 1) {
-            setScore(currScore - 1);
-        } else {
-            setScore(1);
-            setMsg("You lost the game!");
-            changeColor('#a10000');
-        }
+      setScore(1);
+      setMsg("You lost the game!");
+      changeColor("#a10000");
     }
+  }
 });
 
-restartBtn.addEventListener('click', () => location.reload());
-incBtn.addEventListener('click', () => guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20));
-decBtn.addEventListener('click', () => guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1));
+restartBtn.addEventListener("click", () => location.reload());
+incBtn.addEventListener(
+  "click",
+  () =>
+    (guessInput.textContent = Math.min(Number(guessInput.textContent) + 1, 20))
+);
+decBtn.addEventListener(
+  "click",
+  () =>
+    (guessInput.textContent = Math.max(Number(guessInput.textContent) - 1, 1))
+);
 
 guessInput.textContent = userGuess;
-setMsg('Guess a number');
+setMsg("Guess a number");
 setScore(currScore);
 setHighScore();
diff --git a/secret/guessMyNumber/styles.css b/secret/guessMyNumber/styles.css
index ef9039a..3a50aec 100644
--- a/secret/guessMyNumber/styles.css
+++ b/secret/guessMyNumber/styles.css
@@ -1,189 +1,189 @@
 /* Base Reset */
 body,
 html {
-    margin: 0;
-    padding: 0;
-    font-family: monospace;
-    background-color: #3a2d56;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+  background-color: #3a2d56;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 /* GameBoy Layout */
 .gameboy {
-    background-color: #5f4c82; /* Game Boy Color purple shell */
-    width: 441px;
-    height: 735px;
-    border-radius: 20px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 10px;
-    position: relative;
+  background-color: #5f4c82; /* Game Boy Color purple shell */
+  width: 441px;
+  height: 735px;
+  border-radius: 20px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  position: relative;
 }
 
-@media(max-width: 768px) {
-    .gameboy {
-        width: 100vw;
-        height: 100vh;
-        border-radius: 0;
-    }
+@media (max-width: 768px) {
+  .gameboy {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
 }
 
 /* Screen */
 .screen {
-    background-color: #306230; /* Game Boy green screen */
-    border: 4px solid #0f380f;
-    width: 90%;
-    height: 55%;
-    margin-top: 20px;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
-    overflow: hidden;
+  background-color: #306230; /* Game Boy green screen */
+  border: 4px solid #0f380f;
+  width: 90%;
+  height: 55%;
+  margin-top: 20px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
 .game {
-    text-align: center;
-    width: 90%;
+  text-align: center;
+  width: 90%;
 }
 
 /* Titles */
 h1 {
-    font-size: 2rem; /* Increased font size */
-    margin-bottom: 10px;
-    text-transform: uppercase;
+  font-size: 2rem; /* Increased font size */
+  margin-bottom: 10px;
+  text-transform: uppercase;
 }
 
 /* Guess Display */
 .guess-display {
-    background-color: #9bbc0f;
-    color: #0f380f;
-    border: 2px solid #0f380f;
-    font-size: 2rem; /* Increased font size */
-    width: 80px; /* Increased width */
-    text-align: center;
-    margin: 10px auto;
-    padding: 10px; /* Increased padding */
-    border-radius: 4px;
+  background-color: #9bbc0f;
+  color: #0f380f;
+  border: 2px solid #0f380f;
+  font-size: 2rem; /* Increased font size */
+  width: 80px; /* Increased width */
+  text-align: center;
+  margin: 10px auto;
+  padding: 10px; /* Increased padding */
+  border-radius: 4px;
 }
 
 /* Messages */
 .message,
 .score,
 .highScore {
-    font-size: 1.4rem; /* Increased font size */
-    margin: 5px 0;
+  font-size: 1.4rem; /* Increased font size */
+  margin: 5px 0;
 }
 
 .description,
 .description p {
-    font-size: 1.2rem;
-    margin: 0 auto;
-    padding: 0 auto;
+  font-size: 1.2rem;
+  margin: 0 auto;
+  padding: 0 auto;
 }
 
 /* Controls Section */
 .controls {
-    margin-top: 20px;
-    display: flex;
-    justify-content: space-between;
-    width: 80%;
-    align-items: center;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  align-items: center;
 }
 
 /* D-Pad */
 .dpad {
-    position: relative;
-    width: 120px; /* Increased size */
-    height: 120px; /* Increased size */
+  position: relative;
+  width: 120px; /* Increased size */
+  height: 120px; /* Increased size */
 }
 
 /* Base Styling for D-Pad Buttons */
 .dpad-btn {
-    background-color: #0f380f;
-    color: #9bbc0f;
-    border: none;
-    border-radius: 5px;
-    position: absolute;
-    width: 42px;
-    height: 42px;
-    font-size: 1.5rem; /* Increased size */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 1;
+  background-color: #0f380f;
+  color: #9bbc0f;
+  border: none;
+  border-radius: 5px;
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  font-size: 1.5rem; /* Increased size */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1;
 }
 
 .dpad-btn.up {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .dpad-btn.down {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .dpad-btn.left {
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
 }
 
 .dpad-btn.right {
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 /* D-Pad Center to Connect Buttons */
 .dpad-center {
-    background-color: #0f380f;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border: 2px solid #9cbc0f00;
-    z-index: 0;
-    border-radius: 5px;
+  background-color: #0f380f;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 2px solid #9cbc0f00;
+  z-index: 0;
+  border-radius: 5px;
 }
 
 /* A and B Buttons */
 .action-buttons {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 140px; /* Increased height */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 140px; /* Increased height */
 }
 
 .btn {
-    background-color: #0f380f;
-    color: #9bbc0f;
-    border: 2px solid #9bbc0f;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    font-size: 1.8rem; /* Increased font size */
-    cursor: pointer;
-    transition: transform 0.1s, background-color 0.2s;
+  background-color: #0f380f;
+  color: #9bbc0f;
+  border: 2px solid #9bbc0f;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  font-size: 1.8rem; /* Increased font size */
+  cursor: pointer;
+  transition: transform 0.1s, background-color 0.2s;
 }
 
 .btn:hover {
-    background-color: #9bbc0f;
-    color: #0f380f;
+  background-color: #9bbc0f;
+  color: #0f380f;
 }
 
 .btn:active {
-    transform: scale(0.9);
+  transform: scale(0.9);
 }
diff --git a/secret/guessMyNumber/styles.js b/secret/guessMyNumber/styles.js
index d7357df..8ccae52 100644
--- a/secret/guessMyNumber/styles.js
+++ b/secret/guessMyNumber/styles.js
@@ -1,62 +1,148 @@
-'use strict';
-const left = document.querySelector('#left');
-const right = document.querySelector('#right');
-const gameboy = document.querySelector('.gameboy');
+"use strict";
+const left = document.querySelector("#left");
+const right = document.querySelector("#right");
+const gameboy = document.querySelector(".gameboy");
 const html = document.documentElement;
 const body = document.body;
-const screen = document.querySelector('.screen');
-const dpadButtons = document.querySelectorAll('.dpad-btn');
-const dpadCenter = document.querySelector('.dpad-center'); // Darker variant
-const actionButtons = document.querySelectorAll('.btn');
+const screen = document.querySelector(".screen");
+const dpadButtons = document.querySelectorAll(".dpad-btn");
+const dpadCenter = document.querySelector(".dpad-center"); // Darker variant
+const actionButtons = document.querySelectorAll(".btn");
 
 const colors = [
-    { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', screenColor: '#E1BEE7', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' },
-    { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', screenColor: '#FFEB3B', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' },
-    { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', screenColor: '#A5D6A7', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' },
-    { gameboyColor: '#F44336', htmlColor: '#FFCDD2', screenColor: '#EF9A9A', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' },
-    { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', screenColor: '#90CAF9', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' },
-    { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', screenColor: '#FFAB91', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' },
-    { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', screenColor: '#D1C4E9', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' },
-    { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', screenColor: '#FFF59D', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' },
-    { gameboyColor: '#009688', htmlColor: '#B2DFDB', screenColor: '#80CBC4', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' },
-    { gameboyColor: '#795548', htmlColor: '#D7CCC8', screenColor: '#A1887F', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' },
-    { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', screenColor: '#FFABAB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' },
-    { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', screenColor: '#80DEEA', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' }
+  {
+    gameboyColor: "#B39DDB",
+    htmlColor: "#D1C4E9",
+    screenColor: "#E1BEE7",
+    buttonColor: "#673AB7",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#5E35B1",
+  },
+  {
+    gameboyColor: "#FFC107",
+    htmlColor: "#FFF9C4",
+    screenColor: "#FFEB3B",
+    buttonColor: "#FF9800",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#EF6C00",
+  },
+  {
+    gameboyColor: "#8BC34A",
+    htmlColor: "#C5E1A5",
+    screenColor: "#A5D6A7",
+    buttonColor: "#FF5722",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#E64A19",
+  },
+  {
+    gameboyColor: "#F44336",
+    htmlColor: "#FFCDD2",
+    screenColor: "#EF9A9A",
+    buttonColor: "#E91E63",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#C2185B",
+  },
+  {
+    gameboyColor: "#03A9F4",
+    htmlColor: "#BBDEFB",
+    screenColor: "#90CAF9",
+    buttonColor: "#FFEB3B",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#0277BD",
+  },
+  {
+    gameboyColor: "#FF7043",
+    htmlColor: "#FFCCBC",
+    screenColor: "#FFAB91",
+    buttonColor: "#FF5722",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#D84315",
+  },
+  {
+    gameboyColor: "#9C27B0",
+    htmlColor: "#E1BEE7",
+    screenColor: "#D1C4E9",
+    buttonColor: "#7B1FA2",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#6A1B9A",
+  },
+  {
+    gameboyColor: "#FFD700",
+    htmlColor: "#FFF9C4",
+    screenColor: "#FFF59D",
+    buttonColor: "#FF9800",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#F57F17",
+  },
+  {
+    gameboyColor: "#009688",
+    htmlColor: "#B2DFDB",
+    screenColor: "#80CBC4",
+    buttonColor: "#4CAF50",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#00796B",
+  },
+  {
+    gameboyColor: "#795548",
+    htmlColor: "#D7CCC8",
+    screenColor: "#A1887F",
+    buttonColor: "#9E9E9E",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#5D4037",
+  },
+  {
+    gameboyColor: "#FF5733",
+    htmlColor: "#FFCCCB",
+    screenColor: "#FFABAB",
+    buttonColor: "#C70039",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#B71C1C",
+  },
+  {
+    gameboyColor: "#00BCD4",
+    htmlColor: "#B2EBF2",
+    screenColor: "#80DEEA",
+    buttonColor: "#00ACC1",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#00838F",
+  },
 ];
 
-let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0;
+let currentColorIndex = localStorage.getItem("gameboyColorIndex")
+  ? parseInt(localStorage.getItem("gameboyColorIndex"))
+  : 0;
 
 function updateGameBoyColor() {
-    gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
-    html.style.backgroundColor = colors[currentColorIndex].htmlColor;
-    body.style.backgroundColor = colors[currentColorIndex].htmlColor;
-    screen.style.backgroundColor = colors[currentColorIndex].screenColor;
+  gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
+  html.style.backgroundColor = colors[currentColorIndex].htmlColor;
+  body.style.backgroundColor = colors[currentColorIndex].htmlColor;
+  screen.style.backgroundColor = colors[currentColorIndex].screenColor;
 
-    dpadButtons.forEach(button => {
-        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
-        button.style.color = colors[currentColorIndex].buttonTextColor;
-    });
+  dpadButtons.forEach((button) => {
+    button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+    button.style.color = colors[currentColorIndex].buttonTextColor;
+  });
 
-    // Using darker dpad center color
-    dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
-    dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
+  // Using darker dpad center color
+  dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
+  dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
 
-    actionButtons.forEach(button => {
-        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
-        button.style.color = colors[currentColorIndex].buttonTextColor;
-    });
+  actionButtons.forEach((button) => {
+    button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+    button.style.color = colors[currentColorIndex].buttonTextColor;
+  });
 }
 
-left.addEventListener('click', () => {
-    currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
-    localStorage.setItem('gameboyColorIndex', currentColorIndex);
-    updateGameBoyColor();
+left.addEventListener("click", () => {
+  currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
+  localStorage.setItem("gameboyColorIndex", currentColorIndex);
+  updateGameBoyColor();
 });
 
-right.addEventListener('click', () => {
-    currentColorIndex = (currentColorIndex + 1) % colors.length;
-    localStorage.setItem('gameboyColorIndex', currentColorIndex);
-    updateGameBoyColor();
+right.addEventListener("click", () => {
+  currentColorIndex = (currentColorIndex + 1) % colors.length;
+  localStorage.setItem("gameboyColorIndex", currentColorIndex);
+  updateGameBoyColor();
 });
 
 updateGameBoyColor();
diff --git a/secret/mineSweeper/script.js b/secret/mineSweeper/script.js
index d35c436..f30f685 100644
--- a/secret/mineSweeper/script.js
+++ b/secret/mineSweeper/script.js
@@ -1,173 +1,192 @@
-document.getElementById('startGame').addEventListener('click', function () {
-    const gridSize = parseInt(document.getElementById('gridSize').value);
-    const bombs = parseInt(document.getElementById('bombs').value);
+document.getElementById("startGame").addEventListener("click", function () {
+  const gridSize = parseInt(document.getElementById("gridSize").value);
+  const bombs = parseInt(document.getElementById("bombs").value);
 
-    document.getElementById('settings').style.display = 'none';
-    document.getElementById('game').style.display = 'block';
+  document.getElementById("settings").style.display = "none";
+  document.getElementById("game").style.display = "block";
 
-    renderGame(gridSize, bombs);
+  renderGame(gridSize, bombs);
 });
 
-const canvas = document.getElementById('game');
-const ctx = canvas.getContext('2d');
+const canvas = document.getElementById("game");
+const ctx = canvas.getContext("2d");
 
 class Minesweeper {
-    constructor(width, height, bombs) {
-        this.size = 25;
-        this.field = new Array(width);
-        this.bombs = new Array(width);
-        for (let x = 0; x < this.field.length; x++) {
-            this.field[x] = new Array(height);
-            this.bombs[x] = new Array(height);
-            for (let y = 0; y < this.field[x].length; y++) {
-                this.field[x][y] = 1;
-                this.bombs[x][y] = false;
-            }
-        }
-
-        this.bombAmount = bombs > width * height / 2 ? width * height / 2 : bombs;
-        this.width = width;
-        this.height = height;
-        this.firstClick = false;
-        this.drawField();
+  constructor(width, height, bombs) {
+    this.size = 25;
+    this.field = new Array(width);
+    this.bombs = new Array(width);
+    for (let x = 0; x < this.field.length; x++) {
+      this.field[x] = new Array(height);
+      this.bombs[x] = new Array(height);
+      for (let y = 0; y < this.field[x].length; y++) {
+        this.field[x][y] = 1;
+        this.bombs[x][y] = false;
+      }
     }
 
-    generateBombs() {
-        for (let i = 0; i < this.bombAmount; i++) {
-            let x = Math.floor(Math.random() * this.width);
-            let y = Math.floor(Math.random() * this.height);
-            (this.bombs[x][y] || this.field[x][y] == 0) ? i-- : this.bombs[x][y] = true;
-        }
-        this.firstClick = true;
-    }
+    this.bombAmount =
+      bombs > (width * height) / 2 ? (width * height) / 2 : bombs;
+    this.width = width;
+    this.height = height;
+    this.firstClick = false;
+    this.drawField();
+  }
 
-    getNearbyBombs(x, y) {
-        let counter = 0;
-        for (let newX = x - 1; newX <= x + 1; newX++) {
-            for (let newY = y - 1; newY <= y + 1; newY++) {
-                if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) {
-                    this.bombs[newX][newY] ? counter++ : {};
-                }
-            }
-        }
-        return counter;
+  generateBombs() {
+    for (let i = 0; i < this.bombAmount; i++) {
+      let x = Math.floor(Math.random() * this.width);
+      let y = Math.floor(Math.random() * this.height);
+      this.bombs[x][y] || this.field[x][y] == 0
+        ? i--
+        : (this.bombs[x][y] = true);
     }
+    this.firstClick = true;
+  }
 
-    checkWin() {
-        for (let x = 0; x < this.field.length; x++) {
-            for (let y = 0; y < this.field[x].length; y++) {
-                if (this.field[x][y] != 0 && !this.bombs[x][y]) {
-                    return;
-                } else if (this.field[x][y] == 0 && this.bombs[x][y]) {
-                    alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`);
-                    this.bombs[x][y] = false;
-                }
-            }
+  getNearbyBombs(x, y) {
+    let counter = 0;
+    for (let newX = x - 1; newX <= x + 1; newX++) {
+      for (let newY = y - 1; newY <= y + 1; newY++) {
+        if (
+          newX < this.field.length &&
+          newX >= 0 &&
+          newY < this.field[0].length &&
+          newY >= 0
+        ) {
+          this.bombs[newX][newY] ? counter++ : {};
         }
-        this.drawField();
-        alert('You won!');
+      }
+    }
+    return counter;
+  }
+
+  checkWin() {
+    for (let x = 0; x < this.field.length; x++) {
+      for (let y = 0; y < this.field[x].length; y++) {
+        if (this.field[x][y] != 0 && !this.bombs[x][y]) {
+          return;
+        } else if (this.field[x][y] == 0 && this.bombs[x][y]) {
+          alert(`[ERROR]: Square (${x}|${y}) should not be a bomb!`);
+          this.bombs[x][y] = false;
+        }
+      }
+    }
+    this.drawField();
+    alert("You won!");
+    window.location.reload();
+  }
+
+  markSquare(x, y) {
+    if (x < this.field.length && y < this.field[0].length) {
+      switch (this.field[x][y]) {
+        case 1:
+          this.field[x][y]++;
+          break;
+        case 2:
+          this.field[x][y]++;
+          break;
+        case 3:
+          this.field[x][y] = 1;
+          break;
+        default:
+          break;
+      }
+      this.drawField();
+    }
+  }
+
+  uncoverSquare(x, y) {
+    if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) {
+      if (this.bombs[x][y] && this.field[x][y] == 1) {
+        alert("You lost!");
         window.location.reload();
-    }
-
-    markSquare(x, y) {
-        if (x < this.field.length && y < this.field[0].length) {
-            switch (this.field[x][y]) {
-                case 1:
-                    this.field[x][y]++;
-                    break;
-                case 2:
-                    this.field[x][y]++;
-                    break;
-                case 3:
-                    this.field[x][y] = 1;
-                    break;
-                default:
-                    break;
+      } else if (this.field[x][y] == 1) {
+        this.field[x][y] = 0;
+        !this.firstClick ? this.generateBombs() : {};
+        if (this.getNearbyBombs(x, y) == 0) {
+          for (let newX = x - 1; newX <= x + 1; newX++) {
+            for (let newY = y - 1; newY <= y + 1; newY++) {
+              if (
+                newX < this.field.length &&
+                newX >= 0 &&
+                newY < this.field[0].length &&
+                newY >= 0
+              ) {
+                this.field[newX][newY] == 1
+                  ? this.uncoverSquare(newX, newY)
+                  : {};
+              }
             }
-            this.drawField();
+          }
         }
+      }
+      this.checkWin();
+      this.drawField();
+    }
+  }
+
+  drawSquare(x, y, type) {
+    ctx.lineWidth = 3;
+    let uncovered = (x + y) % 2 === 0 ? "#D3D3D3" : "#A9A9A9";
+    let covered = (x + y) % 2 === 0 ? "#4CAF50" : "#81C784";
+    ctx.fillStyle = type != 0 ? covered : uncovered;
+    ctx.fillRect(x * this.size, y * this.size, this.size, this.size);
+    ctx.strokeStyle = "#000";
+    ctx.strokeRect(x * this.size, y * this.size, this.size, this.size);
+
+    if (type != 1) {
+      const fontSize = this.size / 2;
+      const number = this.getNearbyBombs(x, y);
+      let finalPrint;
+      ctx.font = `${fontSize}px sans-serif`;
+      ctx.fillStyle = "#000";
+      type == 0 ? (finalPrint = number ? number : " ") : {};
+      type == 2 ? (finalPrint = "🚩") : {};
+      type == 3 ? (finalPrint = "❓") : {};
+      ctx.fillText(
+        finalPrint,
+        x * this.size + fontSize / (type == 0 ? 1.5 : 1.8),
+        y * this.size + fontSize * 1.3
+      );
+    }
+  }
+
+  drawField() {
+    if (window.innerWidth > window.innerHeight) {
+      this.size = window.innerHeight / (this.field[0].length + 4);
+    } else {
+      this.size = window.innerWidth / (this.field.length + 4);
     }
 
-    uncoverSquare(x, y) {
-        if (x < this.field.length && x >= 0 && y < this.field[0].length && y >= 0) {
-            if (this.bombs[x][y] && this.field[x][y] == 1) {
-                alert('You lost!');
-                window.location.reload();
-            } else if (this.field[x][y] == 1) {
-                this.field[x][y] = 0;
-                !this.firstClick ? this.generateBombs() : {};
-                if (this.getNearbyBombs(x, y) == 0) {
-                    for (let newX = x - 1; newX <= x + 1; newX++) {
-                        for (let newY = y - 1; newY <= y + 1; newY++) {
-                            if (newX < this.field.length && newX >= 0 && newY < this.field[0].length && newY >= 0) {
-                                this.field[newX][newY] == 1 ? this.uncoverSquare(newX, newY) : {};
-                            }
-                        }
-                    }
-                }
-            };
-            this.checkWin();
-            this.drawField();
-        }
-    }
-
-    drawSquare(x, y, type) {
-        ctx.lineWidth = 3;
-        let uncovered = (x + y) % 2 === 0 ? '#D3D3D3' : '#A9A9A9';
-        let covered = (x + y) % 2 === 0 ? '#4CAF50' : '#81C784';
-        ctx.fillStyle = type != 0 ? covered : uncovered;
-        ctx.fillRect(x * this.size, y * this.size, this.size, this.size);
-        ctx.strokeStyle = '#000';
-        ctx.strokeRect(x * this.size, y * this.size, this.size, this.size);
-
-        if (type != 1) {
-            const fontSize = this.size / 2;
-            const number = this.getNearbyBombs(x, y);
-            let finalPrint;
-            ctx.font = `${fontSize}px sans-serif`;
-            ctx.fillStyle = '#000';
-            type == 0 ? finalPrint = number ? number : ' ' : {};
-            type == 2 ? finalPrint = '🚩' : {};
-            type == 3 ? finalPrint = '❓' : {};
-            ctx.fillText(finalPrint, x * this.size + fontSize / (type == 0 ? 1.5 : 1.8), y * this.size + fontSize * 1.3);
-        }
-    }
-
-    drawField() {
-        if (window.innerWidth > window.innerHeight) {
-            this.size = window.innerHeight / (this.field[0].length + 4);
-        } else {
-            this.size = window.innerWidth / (this.field.length + 4);
-        }
-
-        canvas.width = this.size * this.field.length;
-        canvas.height = this.size * this.field[0].length;
-
-        const offsetX = (canvas.width - (this.field.length * this.size)) / 2;
-        const offsetY = (canvas.height - (this.field[0].length * this.size)) / 2;
-
-        for (let x = 0; x < this.field.length; x++) {
-            for (let y = 0; y < this.field[x].length; y++) {
-                this.drawSquare(x, y, this.field[x][y], offsetX, offsetY);
-            }
-        }
+    canvas.width = this.size * this.field.length;
+    canvas.height = this.size * this.field[0].length;
+
+    const offsetX = (canvas.width - this.field.length * this.size) / 2;
+    const offsetY = (canvas.height - this.field[0].length * this.size) / 2;
+
+    for (let x = 0; x < this.field.length; x++) {
+      for (let y = 0; y < this.field[x].length; y++) {
+        this.drawSquare(x, y, this.field[x][y], offsetX, offsetY);
+      }
     }
+  }
 }
 
 const renderGame = (gridSize, bombs) => {
-    let field = new Minesweeper(gridSize, gridSize, bombs);
-    window.addEventListener('resize', () => field.drawField());
-    canvas.addEventListener('click', (event) => {
-        const rect = canvas.getBoundingClientRect();
-        const x = Math.floor((event.clientX - rect.left) / field.size);
-        const y = Math.floor((event.clientY - rect.top) / field.size);
-        field.uncoverSquare(x, y);
-    });
-    canvas.addEventListener('contextmenu', (event) => {
-        event.preventDefault();
-        const rect = canvas.getBoundingClientRect();
-        const x = Math.floor((event.clientX - rect.left) / field.size);
-        const y = Math.floor((event.clientY - rect.top) / field.size);
-        field.markSquare(x, y);
-    });
+  let field = new Minesweeper(gridSize, gridSize, bombs);
+  window.addEventListener("resize", () => field.drawField());
+  canvas.addEventListener("click", (event) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor((event.clientX - rect.left) / field.size);
+    const y = Math.floor((event.clientY - rect.top) / field.size);
+    field.uncoverSquare(x, y);
+  });
+  canvas.addEventListener("contextmenu", (event) => {
+    event.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor((event.clientX - rect.left) / field.size);
+    const y = Math.floor((event.clientY - rect.top) / field.size);
+    field.markSquare(x, y);
+  });
 };
diff --git a/secret/mineSweeper/styles.css b/secret/mineSweeper/styles.css
index 738993d..8468965 100644
--- a/secret/mineSweeper/styles.css
+++ b/secret/mineSweeper/styles.css
@@ -1,104 +1,104 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body,
 html {
-    height: 100%;
-    margin: 0;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #121212;
-    color: #e0e0e0;
+  height: 100%;
+  margin: 0;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #121212;
+  color: #e0e0e0;
 }
 
 #settings {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    margin: auto;
-    background-color: #1e1e1e;
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  margin: auto;
+  background-color: #1e1e1e;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
+  width: 100%;
+  max-width: 600px;
 }
 
 h1 {
-    font-size: 2.5em;
-    margin-bottom: 20px;
-    color: #007bff;
+  font-size: 2.5em;
+  margin-bottom: 20px;
+  color: #007bff;
 }
 
 label {
-    margin-bottom: 12px;
-    font-size: 20px;
-    color: #d1d1d1;
+  margin-bottom: 12px;
+  font-size: 20px;
+  color: #d1d1d1;
 }
 
 input[type="number"],
 input[type="range"],
 span {
-    padding: 12px;
-    margin-bottom: 20px;
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-    border: 1px solid #444;
-    border-radius: 6px;
-    background-color: #333;
-    color: #e0e0e0;
-    font-size: 18px;
-    transition: border-color 0.3s ease;
+  padding: 12px;
+  margin-bottom: 20px;
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background-color: #333;
+  color: #e0e0e0;
+  font-size: 18px;
+  transition: border-color 0.3s ease;
 }
 
 input[type="number"]:focus,
 input[type="range"]:focus {
-    border-color: #007bff;
-    outline: none;
+  border-color: #007bff;
+  outline: none;
 }
 
 button {
-    padding: 12px 24px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-    font-size: 18px;
+  padding: 12px 24px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  font-size: 18px;
 }
 
 button:hover {
-    background-color: #0056b3;
-    transform: translateY(-2px);
+  background-color: #0056b3;
+  transform: translateY(-2px);
 }
 
 button:active {
-    transform: translateY(0);
+  transform: translateY(0);
 }
 
 canvas {
-    display: none;
+  display: none;
 }
 
-@media(max-width: 600px) {
-    #settings {
-        font-size: 16px;
-    }
+@media (max-width: 600px) {
+  #settings {
+    font-size: 16px;
+  }
 
-    input[type="number"],
-    input[type="range"],
-    button {
-        width: 90%;
-        max-width: none;
-    }
-}
\ No newline at end of file
+  input[type="number"],
+  input[type="range"],
+  button {
+    width: 90%;
+    max-width: none;
+  }
+}
diff --git a/secret/snake/game.js b/secret/snake/game.js
index a9f50a8..08d50d5 100644
--- a/secret/snake/game.js
+++ b/secret/snake/game.js
@@ -1,13 +1,13 @@
-'use strict';
+"use strict";
 
-const upButton = document.getElementById('up');
-const downButton = document.getElementById('down');
-const leftButton = document.getElementById('left');
-const rightButton = document.getElementById('right');
-const startButton = document.getElementById('start');
-const grid = document.createElement('div');
-grid.id = 'grid';
-document.querySelector('.game').appendChild(grid);
+const upButton = document.getElementById("up");
+const downButton = document.getElementById("down");
+const leftButton = document.getElementById("left");
+const rightButton = document.getElementById("right");
+const startButton = document.getElementById("start");
+const grid = document.createElement("div");
+grid.id = "grid";
+document.querySelector(".game").appendChild(grid);
 
 let snake = [{ x: 5, y: 5 }];
 let apple = { x: 8, y: 5 };
@@ -17,128 +17,134 @@ let isGameRunning = false;
 const gridSize = 10;
 
 function initGame() {
-    grid.style.display = 'grid';
-    grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
-    grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
-    grid.style.width = '350px';
-    grid.style.height = '350px';
-    document.getElementById('title').style.display = 'none';
-    document.getElementById('description').style.display = 'none';
+  grid.style.display = "grid";
+  grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
+  grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
+  grid.style.width = "350px";
+  grid.style.height = "350px";
+  document.getElementById("title").style.display = "none";
+  document.getElementById("description").style.display = "none";
 
-    isGameRunning = true;
-    snake = [{ x: 5, y: 5 }];
-    apple = spawnApple();
-    direction = { x: 0, y: 0 };
+  isGameRunning = true;
+  snake = [{ x: 5, y: 5 }];
+  apple = spawnApple();
+  direction = { x: 0, y: 0 };
 
-    clearInterval(gameInterval);
-    gameInterval = setInterval(gameLoop, 200);
-    render();
+  clearInterval(gameInterval);
+  gameInterval = setInterval(gameLoop, 200);
+  render();
 }
 
 function spawnApple() {
-    let newApple;
-    do {
-        newApple = {
-            x: Math.floor(Math.random() * gridSize),
-            y: Math.floor(Math.random() * gridSize)
-        };
-    } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y));
-    return newApple;
+  let newApple;
+  do {
+    newApple = {
+      x: Math.floor(Math.random() * gridSize),
+      y: Math.floor(Math.random() * gridSize),
+    };
+  } while (
+    snake.some(
+      (segment) => segment.x === newApple.x && segment.y === newApple.y
+    )
+  );
+  return newApple;
 }
 
 function updateSnake() {
-    const newHead = {
-        x: snake[0].x + direction.x,
-        y: snake[0].y + direction.y
-    };
+  const newHead = {
+    x: snake[0].x + direction.x,
+    y: snake[0].y + direction.y,
+  };
 
-    if (newHead.x < 0) newHead.x = gridSize - 1;
-    if (newHead.y < 0) newHead.y = gridSize - 1;
-    if (newHead.x >= gridSize) newHead.x = 0;
-    if (newHead.y >= gridSize) newHead.y = 0;
+  if (newHead.x < 0) newHead.x = gridSize - 1;
+  if (newHead.y < 0) newHead.y = gridSize - 1;
+  if (newHead.x >= gridSize) newHead.x = 0;
+  if (newHead.y >= gridSize) newHead.y = 0;
 
-    if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
-        gameOver();
-        return;
-    }
+  if (
+    snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
+  ) {
+    gameOver();
+    return;
+  }
 
-    snake.unshift(newHead);
+  snake.unshift(newHead);
 
-    if (newHead.x === apple.x && newHead.y === apple.y) {
-        apple = spawnApple();
-    } else {
-        snake.pop();
-    }
+  if (newHead.x === apple.x && newHead.y === apple.y) {
+    apple = spawnApple();
+  } else {
+    snake.pop();
+  }
 }
 
 function render() {
-    grid.innerHTML = "";
+  grid.innerHTML = "";
 
-    for (let y = 0; y < gridSize; y++) {
-        for (let x = 0; x < gridSize; x++) {
-            const cell = document.createElement("div");
-            cell.classList.add("cell");
+  for (let y = 0; y < gridSize; y++) {
+    for (let x = 0; x < gridSize; x++) {
+      const cell = document.createElement("div");
+      cell.classList.add("cell");
 
-            if ((x + y) % 2 === 0) {
-                cell.classList.add("light-green");
-            } else {
-                cell.classList.add("dark-green");
-            }
+      if ((x + y) % 2 === 0) {
+        cell.classList.add("light-green");
+      } else {
+        cell.classList.add("dark-green");
+      }
 
-            if (snake.some(segment => segment.x === x && segment.y === y)) {
-                cell.classList.add("snake");
-            }
+      if (snake.some((segment) => segment.x === x && segment.y === y)) {
+        cell.classList.add("snake");
+      }
 
-            if (apple.x === x && apple.y === y) {
-                cell.classList.add("apple");
-            }
+      if (apple.x === x && apple.y === y) {
+        cell.classList.add("apple");
+      }
 
-            grid.appendChild(cell);
-        }
+      grid.appendChild(cell);
     }
+  }
 }
 
 function gameLoop() {
-    if (!isGameRunning) return;
-    updateSnake();
-    render();
+  if (!isGameRunning) return;
+  updateSnake();
+  render();
 }
 
 function gameOver() {
-    alert('Game Over!');
-    clearInterval(gameInterval);
-    isGameRunning = false;
+  alert("Game Over!");
+  clearInterval(gameInterval);
+  isGameRunning = false;
 }
 
 function handleDirectionInput(key) {
-    switch (key) {
-        case 'ArrowUp':
-        case 'w':
-            if (direction.y === 0) direction = { x: 0, y: -1 };
-            break;
-        case 'ArrowDown':
-        case 's':
-            if (direction.y === 0) direction = { x: 0, y: 1 };
-            break;
-        case 'ArrowLeft':
-        case 'a':
-            if (direction.x === 0) direction = { x: -1, y: 0 };
-            break;
-        case 'ArrowRight':
-        case 'd':
-            if (direction.x === 0) direction = { x: 1, y: 0 };
-            break;
-    }
+  switch (key) {
+    case "ArrowUp":
+    case "w":
+      if (direction.y === 0) direction = { x: 0, y: -1 };
+      break;
+    case "ArrowDown":
+    case "s":
+      if (direction.y === 0) direction = { x: 0, y: 1 };
+      break;
+    case "ArrowLeft":
+    case "a":
+      if (direction.x === 0) direction = { x: -1, y: 0 };
+      break;
+    case "ArrowRight":
+    case "d":
+      if (direction.x === 0) direction = { x: 1, y: 0 };
+      break;
+  }
 }
 
-upButton.addEventListener('click', () => handleDirectionInput('ArrowUp'));
-downButton.addEventListener('click', () => handleDirectionInput('ArrowDown'));
-leftButton.addEventListener('click', () => handleDirectionInput('ArrowLeft'));
-rightButton.addEventListener('click', () => handleDirectionInput('ArrowRight'));
-startButton.addEventListener('click', () => {
-    if (!isGameRunning) initGame();
+upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
+downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
+leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
+rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
+startButton.addEventListener("click", () => {
+  if (!isGameRunning) initGame();
 });
 
-document.addEventListener('keydown', (event) => {
-    handleDirectionInput(event.key);
+document.addEventListener("keydown", (event) => {
+  handleDirectionInput(event.key);
 });
diff --git a/secret/snake/styles.css b/secret/snake/styles.css
index 556a94a..2454d67 100644
--- a/secret/snake/styles.css
+++ b/secret/snake/styles.css
@@ -1,238 +1,238 @@
 /* Base Reset */
 body,
 html {
-    margin: 0;
-    padding: 0;
-    font-family: monospace;
-    background-color: #3a2d56;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+  background-color: #3a2d56;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
 }
 
 /* GameBoy Layout */
 .gameboy {
-    background-color: #5f4c82; /* Game Boy Color purple shell */
-    width: 441px;
-    height: 735px;
-    border-radius: 20px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 10px;
-    position: relative;
+  background-color: #5f4c82;
+  width: 441px;
+  height: 735px;
+  border-radius: 20px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  position: relative;
 }
 
-@media(max-width: 768px) {
-    .gameboy {
-        width: 100vw;
-        height: 100vh;
-        border-radius: 0;
-    }
+@media (max-width: 768px) {
+  .gameboy {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
 }
 
 /* Screen */
 .screen {
-    background-color: black;
-    border: 4px solid #0f380f;
-    width: 90%;
-    height: 55%;
-    margin-top: 20px;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
-    overflow: hidden;
+  background-color: black;
+  border: 4px solid #0f380f;
+  width: 90%;
+  height: 55%;
+  margin-top: 20px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
 }
 
 .game {
-    text-align: center;
-    width: 90%;
+  text-align: center;
+  width: 90%;
 }
 
 /* Titles */
 h1 {
-    font-size: 2rem;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    color: #9bbc0f;
+  font-size: 2rem;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  color: #9bbc0f;
 }
 
 .description,
 .description p {
-    font-size: 1.2rem;
-    margin: 0 auto;
-    padding: 0 auto;
-    color: white;
+  font-size: 1.2rem;
+  margin: 0 auto;
+  padding: 0 auto;
+  color: white;
 }
 
 /* Grid container */
 #grid {
-    display: grid;
-    grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
-    grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
-    width: 400px; /* Adjust as needed */
-    height: 400px; /* Adjust as needed */
-    border: 2px solid #0f380f;
-    margin: 20px auto;
-    /* initially hide */
-    display: none;
+  display: grid;
+  grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
+  grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
+  width: 400px; /* Adjust as needed */
+  height: 400px; /* Adjust as needed */
+  border: 2px solid #0f380f;
+  margin: 20px auto;
+  /* initially hide */
+  display: none;
 }
 
 /* Individual cells */
 .cell {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .cell.light-green {
-    background-color: #9bbc0f;
+  background-color: #9bbc0f;
 }
 
 .cell.dark-green {
-    background-color: #0f380f;
+  background-color: #0f380f;
 }
 
 /* Snake styling */
 .snake {
-    background-color: #e600ff; /* Snake color */
-    z-index: 1000;
+  background-color: #e600ff; /* Snake color */
+  z-index: 1000;
 }
 
 /* Apple styling */
 .apple {
-    background-color: red; /* Apple color */
-    z-index: 999;
+  background-color: red; /* Apple color */
+  z-index: 999;
 }
 
 /* Controls Section */
 .controls {
-    margin-top: 20px;
-    display: flex;
-    justify-content: space-between;
-    width: 80%;
-    align-items: center;
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  align-items: center;
 }
 
 /* D-Pad */
 .dpad {
-    position: relative;
-    width: 120px;
-    height: 120px;
+  position: relative;
+  width: 120px;
+  height: 120px;
 }
 
 /* Base Styling for D-Pad Buttons */
 .dpad-btn {
-    background-color: #0f380f;
-    color: #9bbc0f;
-    border: none;
-    border-radius: 5px;
-    position: absolute;
-    width: 42px;
-    height: 42px;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    z-index: 1;
+  background-color: #0f380f;
+  color: #9bbc0f;
+  border: none;
+  border-radius: 5px;
+  position: absolute;
+  width: 42px;
+  height: 42px;
+  font-size: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 1;
 }
 
 .dpad-btn.up {
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .dpad-btn.down {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .dpad-btn.left {
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
 }
 
 .dpad-btn.right {
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
 }
 
 /* D-Pad Center to Connect Buttons */
 .dpad-center {
-    background-color: #0f380f;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    border: 2px solid transparent;
-    z-index: 0;
-    border-radius: 5px;
+  background-color: #0f380f;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border: 2px solid transparent;
+  z-index: 0;
+  border-radius: 5px;
 }
 
 /* A and B Buttons */
 .action-buttons {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 200px;
 }
 
 .btn {
-    background-color: #0f380f;
-    color: #9bbc0f;
-    border: 2px solid #9bbc0f;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    font-size: 1.8rem;
-    cursor: pointer;
-    transition: transform 0.1s, background-color 0.2s;
+  background-color: #0f380f;
+  color: #9bbc0f;
+  border: 2px solid #9bbc0f;
+  border-radius: 50%;
+  width: 60px;
+  height: 60px;
+  font-size: 1.8rem;
+  cursor: pointer;
+  transition: transform 0.1s, background-color 0.2s;
 }
 
 .btn:hover {
-    background-color: #9bbc0f;
-    color: #0f380f;
+  background-color: #9bbc0f;
+  color: #0f380f;
 }
 
 .btn:active {
-    transform: scale(0.9);
+  transform: scale(0.9);
 }
 
 /* Start Button */
 .start-btn {
-    background-color: #0f380f;
-    color: #9bbc0f;
-    border: 2px solid #9bbc0f;
-    border-radius: 5px;
-    width: 100px;
-    height: 40px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: transform 0.1s, background-color 0.2s;
-    margin-bottom: 20px;
+  background-color: #0f380f;
+  color: #9bbc0f;
+  border: 2px solid #9bbc0f;
+  border-radius: 5px;
+  width: 100px;
+  height: 40px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  transition: transform 0.1s, background-color 0.2s;
+  margin-bottom: 20px;
 }
 
 .start-btn:hover {
-    background-color: #9bbc0f;
-    color: #0f380f;
+  background-color: #9bbc0f;
+  color: #0f380f;
 }
 
 .start-btn:active {
-    transform: scale(0.9);
+  transform: scale(0.9);
 }
 
 /* Hidden Canvas for Debugging or Fallback */
 canvas {
-    display: none;
-    z-index: 1000;
+  display: none;
+  z-index: 1000;
 }
diff --git a/secret/snake/styles.js b/secret/snake/styles.js
index 6706f60..231d5b3 100644
--- a/secret/snake/styles.js
+++ b/secret/snake/styles.js
@@ -1,60 +1,134 @@
-'use strict';
-const aBtn = document.querySelector('#a');
-const bBtn = document.querySelector('#b');
-const gameboy = document.querySelector('.gameboy');
+"use strict";
+const aBtn = document.querySelector("#a");
+const bBtn = document.querySelector("#b");
+const gameboy = document.querySelector(".gameboy");
 const html = document.documentElement;
 const body = document.body;
-const dpadButtons = document.querySelectorAll('.dpad-btn');
-const dpadCenter = document.querySelector('.dpad-center'); // Darker variant
-const actionButtons = document.querySelectorAll('.btn');
+const dpadButtons = document.querySelectorAll(".dpad-btn");
+const dpadCenter = document.querySelector(".dpad-center"); // Darker variant
+const actionButtons = document.querySelectorAll(".btn");
 
 const colors = [
-    { gameboyColor: '#B39DDB', htmlColor: '#D1C4E9', buttonColor: '#673AB7', buttonTextColor: '#FFFFFF', dpadCenterColor: '#5E35B1' },
-    { gameboyColor: '#FFC107', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#000000', dpadCenterColor: '#EF6C00' },
-    { gameboyColor: '#8BC34A', htmlColor: '#C5E1A5', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#E64A19' },
-    { gameboyColor: '#F44336', htmlColor: '#FFCDD2', buttonColor: '#E91E63', buttonTextColor: '#FFFFFF', dpadCenterColor: '#C2185B' },
-    { gameboyColor: '#03A9F4', htmlColor: '#BBDEFB', buttonColor: '#FFEB3B', buttonTextColor: '#000000', dpadCenterColor: '#0277BD' },
-    { gameboyColor: '#FF7043', htmlColor: '#FFCCBC', buttonColor: '#FF5722', buttonTextColor: '#FFFFFF', dpadCenterColor: '#D84315' },
-    { gameboyColor: '#9C27B0', htmlColor: '#E1BEE7', buttonColor: '#7B1FA2', buttonTextColor: '#FFFFFF', dpadCenterColor: '#6A1B9A' },
-    { gameboyColor: '#FFD700', htmlColor: '#FFF9C4', buttonColor: '#FF9800', buttonTextColor: '#FFFFFF', dpadCenterColor: '#F57F17' },
-    { gameboyColor: '#009688', htmlColor: '#B2DFDB', buttonColor: '#4CAF50', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00796B' },
-    { gameboyColor: '#795548', htmlColor: '#D7CCC8', buttonColor: '#9E9E9E', buttonTextColor: '#000000', dpadCenterColor: '#5D4037' },
-    { gameboyColor: '#FF5733', htmlColor: '#FFCCCB', buttonColor: '#C70039', buttonTextColor: '#FFFFFF', dpadCenterColor: '#B71C1C' },
-    { gameboyColor: '#00BCD4', htmlColor: '#B2EBF2', buttonColor: '#00ACC1', buttonTextColor: '#FFFFFF', dpadCenterColor: '#00838F' }
+  {
+    gameboyColor: "#B39DDB",
+    htmlColor: "#D1C4E9",
+    buttonColor: "#673AB7",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#5E35B1",
+  },
+  {
+    gameboyColor: "#FFC107",
+    htmlColor: "#FFF9C4",
+    buttonColor: "#FF9800",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#EF6C00",
+  },
+  {
+    gameboyColor: "#8BC34A",
+    htmlColor: "#C5E1A5",
+    buttonColor: "#FF5722",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#E64A19",
+  },
+  {
+    gameboyColor: "#F44336",
+    htmlColor: "#FFCDD2",
+    buttonColor: "#E91E63",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#C2185B",
+  },
+  {
+    gameboyColor: "#03A9F4",
+    htmlColor: "#BBDEFB",
+    buttonColor: "#FFEB3B",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#0277BD",
+  },
+  {
+    gameboyColor: "#FF7043",
+    htmlColor: "#FFCCBC",
+    buttonColor: "#FF5722",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#D84315",
+  },
+  {
+    gameboyColor: "#9C27B0",
+    htmlColor: "#E1BEE7",
+    buttonColor: "#7B1FA2",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#6A1B9A",
+  },
+  {
+    gameboyColor: "#FFD700",
+    htmlColor: "#FFF9C4",
+    buttonColor: "#FF9800",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#F57F17",
+  },
+  {
+    gameboyColor: "#009688",
+    htmlColor: "#B2DFDB",
+    buttonColor: "#4CAF50",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#00796B",
+  },
+  {
+    gameboyColor: "#795548",
+    htmlColor: "#D7CCC8",
+    buttonColor: "#9E9E9E",
+    buttonTextColor: "#000000",
+    dpadCenterColor: "#5D4037",
+  },
+  {
+    gameboyColor: "#FF5733",
+    htmlColor: "#FFCCCB",
+    buttonColor: "#C70039",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#B71C1C",
+  },
+  {
+    gameboyColor: "#00BCD4",
+    htmlColor: "#B2EBF2",
+    buttonColor: "#00ACC1",
+    buttonTextColor: "#FFFFFF",
+    dpadCenterColor: "#00838F",
+  },
 ];
 
-let currentColorIndex = localStorage.getItem('gameboyColorIndex') ? parseInt(localStorage.getItem('gameboyColorIndex')) : 0;
+let currentColorIndex = localStorage.getItem("gameboyColorIndex")
+  ? parseInt(localStorage.getItem("gameboyColorIndex"))
+  : 0;
 
 function updateGameBoyColor() {
-    gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
-    html.style.backgroundColor = colors[currentColorIndex].htmlColor;
-    body.style.backgroundColor = colors[currentColorIndex].htmlColor;
+  gameboy.style.backgroundColor = colors[currentColorIndex].gameboyColor;
+  html.style.backgroundColor = colors[currentColorIndex].htmlColor;
+  body.style.backgroundColor = colors[currentColorIndex].htmlColor;
 
-    dpadButtons.forEach(button => {
-        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
-        button.style.color = colors[currentColorIndex].buttonTextColor;
-    });
+  dpadButtons.forEach((button) => {
+    button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+    button.style.color = colors[currentColorIndex].buttonTextColor;
+  });
 
-    // Using darker dpad center color
-    dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
-    dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
+  // Using darker dpad center color
+  dpadCenter.style.backgroundColor = colors[currentColorIndex].dpadCenterColor;
+  dpadCenter.style.color = colors[currentColorIndex].buttonTextColor;
 
-    actionButtons.forEach(button => {
-        button.style.backgroundColor = colors[currentColorIndex].buttonColor;
-        button.style.color = colors[currentColorIndex].buttonTextColor;
-    });
+  actionButtons.forEach((button) => {
+    button.style.backgroundColor = colors[currentColorIndex].buttonColor;
+    button.style.color = colors[currentColorIndex].buttonTextColor;
+  });
 }
 
-aBtn.addEventListener('click', () => {
-    currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
-    localStorage.setItem('gameboyColorIndex', currentColorIndex);
-    updateGameBoyColor();
+aBtn.addEventListener("click", () => {
+  currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
+  localStorage.setItem("gameboyColorIndex", currentColorIndex);
+  updateGameBoyColor();
 });
 
-bBtn.addEventListener('click', () => {
-    currentColorIndex = (currentColorIndex + 1) % colors.length;
-    localStorage.setItem('gameboyColorIndex', currentColorIndex);
-    updateGameBoyColor();
+bBtn.addEventListener("click", () => {
+  currentColorIndex = (currentColorIndex + 1) % colors.length;
+  localStorage.setItem("gameboyColorIndex", currentColorIndex);
+  updateGameBoyColor();
 });
 
 updateGameBoyColor();
diff --git a/secret/styles.css b/secret/styles.css
index 7c3550c..b25a85c 100644
--- a/secret/styles.css
+++ b/secret/styles.css
@@ -1,141 +1,145 @@
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-    font-family: 'Courier New', Courier, monospace;
-    background-color: #0d0d0d;
-    color: #b0b0b0;
-    margin: 0;
-    line-height: 1.6;
-    background-image: url('images/background.jpg');
-    background-size: cover; /* Adjust size for tape appearance */
+  font-family: "Courier New", Courier, monospace;
+  background-color: #0d0d0d;
+  color: #b0b0b0;
+  margin: 0;
+  line-height: 1.6;
+  background-image: url("images/background.jpg");
+  background-size: cover; /* Adjust size for tape appearance */
 }
 
 header {
-    background-color: #222; /* Fully opaque background */
-    color: #b0b0b0;
-    text-align: center;
-    padding: 1em 0;
-    font-size: 2rem;
-    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
-    animation: neonFlicker 1.5s infinite;
+  background-color: #222; /* Fully opaque background */
+  color: #b0b0b0;
+  text-align: center;
+  padding: 1em 0;
+  font-size: 2rem;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
+  animation: neonFlicker 1.5s infinite;
 }
 
 /* Create the flickering neon light effect */
 @keyframes neonFlicker {
-    0% {
-        text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00;
-    }
-    20% {
-        text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00;
-    }
-    40% {
-        text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
-    }
-    60% {
-        text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00;
-    }
-    80% {
-        text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00;
-    }
-    100% {
-        text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00, 0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00;
-    }
+  0% {
+    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00,
+      0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00, 0 0 50px #ffcc00;
+  }
+  20% {
+    text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00,
+      0 0 15px #ffcc00, 0 0 20px #ffcc00;
+  }
+  40% {
+    text-shadow: 0 0 5px #ffcc00, 0 0 15px #ffcc00, 0 0 25px #ffcc00;
+  }
+  60% {
+    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00,
+      0 0 20px #ffcc00, 0 0 30px #ffcc00;
+  }
+  80% {
+    text-shadow: 0 0 3px #ffcc00, 0 0 7px #ffcc00, 0 0 10px #ffcc00;
+  }
+  100% {
+    text-shadow: 0 0 5px #ffcc00, 0 0 10px #ffcc00, 0 0 15px #ffcc00,
+      0 0 20px #ffcc00, 0 0 30px #ffcc00, 0 0 40px #ffcc00;
+  }
 }
 
 footer {
-    background-color: #111;
-    color: #b0b0b0;
-    text-align: center;
-    padding: 1em 0;
-    margin-top: 20px;
+  background-color: #111;
+  color: #b0b0b0;
+  text-align: center;
+  padding: 1em 0;
+  margin-top: 20px;
 }
 
 .grid-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    padding: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 20px;
 }
 
 .item {
-    position: relative;
-    background-color: #1a1a1a;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
-    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
-    width: 100%;
-    height: 400px;
-    display: flex;
-    flex-direction: column;
+  position: relative;
+  background-color: #1a1a1a;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
+  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
 }
 
 .item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    filter: brightness(0.6);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: brightness(0.6);
 }
 
 .item .description {
-    padding: 30px;
-    font-size: 1rem;
-    color: #ccc;
-    background-color: rgba(0, 0, 0, 0.8);
-    border-radius: 0 0 10px 10px;
-    flex-grow: 1;
+  padding: 30px;
+  font-size: 1rem;
+  color: #ccc;
+  background-color: rgba(0, 0, 0, 0.8);
+  border-radius: 0 0 10px 10px;
+  flex-grow: 1;
 }
 
 p {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .item:hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
-    filter: brightness(1.1);
+  transform: scale(1.05);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
+  filter: brightness(1.1);
 }
 
 .item:hover img {
-    transform: scale(1.1);
-    filter: brightness(1.1);
+  transform: scale(1.1);
+  filter: brightness(1.1);
 }
 
 .item h2 {
-    position: absolute;
-    top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
-    color: #ffffff;
-    font-size: 1.8rem;
-    background-color: rgba(0, 0, 0, 0.9);
-    padding: 5px 15px;
-    border-radius: 5px;
-    text-align: center;
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease;
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #ffffff;
+  font-size: 1.8rem;
+  background-color: rgba(0, 0, 0, 0.9);
+  padding: 5px 15px;
+  border-radius: 5px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
 .item:hover h2 {
-    opacity: 1;
-    transform: translateX(-50%) translateY(-10px);
+  opacity: 1;
+  transform: translateX(-50%) translateY(-10px);
 }
 
-@media(max-width: 800px) {
-    header {
-        font-size: 1.5rem;
-    }
+@media (max-width: 800px) {
+  header {
+    font-size: 1.5rem;
+  }
 
-    .item {
-        height: auto;
-        width: auto;
-    }
+  .item {
+    height: auto;
+    width: auto;
+  }
 
-    .grid-container {
-        grid-template-columns: repeat(1, 1fr);
-    }
+  .grid-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }
diff --git a/styles.css b/styles.css
index 15b329a..d14c826 100644
--- a/styles.css
+++ b/styles.css
@@ -206,7 +206,8 @@ article ul a li {
   margin-bottom: 10px;
   border-radius: var(--border-radius);
   padding: 10px;
-  transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
+  transition: background-color var(--transition-speed),
+    box-shadow var(--transition-speed);
 }
 
 article ul a li:hover {
@@ -214,7 +215,7 @@ article ul a li:hover {
   box-shadow: 0 0 10px var(--accent-color);
 }
 
-article ul a li{
+article ul a li {
   text-decoration: none;
   color: var(--accent-color);
   font-weight: bold;
@@ -256,14 +257,19 @@ section .card a {
   color: inherit;
   height: 100%;
   width: 100%;
-  padding: 20px; 
+  padding: 20px;
 }
 
 /* Card styles */
 section .card {
   text-align: center;
   list-style: none;
-  background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9));
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 50, 0.9),
+    rgba(10, 10, 100, 0.9),
+    rgba(30, 30, 150, 0.9)
+  );
   border-radius: 12px;
   box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1);
   border: 1px solid #2e3a60;
@@ -278,7 +284,12 @@ section .card {
 /* Hover effect */
 section .card:hover {
   transform: translateY(-8px);
-  background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9));
+  background: linear-gradient(
+    180deg,
+    rgba(30, 30, 150, 0.9),
+    rgba(40, 0, 100, 0.9),
+    rgba(100, 0, 150, 0.9)
+  );
   box-shadow: 0 10px 30px rgba(0, 0, 100, 0.7), 0 0 20px rgba(255, 221, 85, 0.8);
 }
 
@@ -314,7 +325,11 @@ section .card::before {
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.02)
+  );
   box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
   animation: spin 8s linear infinite;
 }
@@ -411,7 +426,7 @@ footer {
     width: 60px;
   }
 
-  .project-name{
+  .project-name {
     font-size: 1.3em;
   }
 }
diff --git a/webGames/styles.css b/webGames/styles.css
index 3f4f099..e9a6fcf 100644
--- a/webGames/styles.css
+++ b/webGames/styles.css
@@ -1,120 +1,120 @@
 /* Reset and box-sizing */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 /* General Styles */
 body {
-    font-family: Arial, sans-serif;
-    background-color: #282c34;
-    color: #ffffff;
-    margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #282c34;
+  color: #ffffff;
+  margin: 0;
 }
 
 header {
-    background-color: #4CAF50;
-    color: white;
-    text-align: center;
-    padding: 1em 0;
-    font-size: 1.5rem;
+  background-color: #4caf50;
+  color: white;
+  text-align: center;
+  padding: 1em 0;
+  font-size: 1.5rem;
 }
 
 footer {
-    background-color: #333;
-    color: white;
-    text-align: center;
-    padding: 1em 0;
-    margin-top: 20px;
+  background-color: #333;
+  color: white;
+  text-align: center;
+  padding: 1em 0;
+  margin-top: 20px;
 }
 
 /* Grid Styles */
 .grid-container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px; /* Space between items */
-    padding: 20px; /* Space around the grid */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px; /* Space between items */
+  padding: 20px; /* Space around the grid */
 }
 
 /* Game Item */
 .item {
-    position: relative;
-    background-color: #444;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
-    width: 100%; /* Ensure it takes full width of the column */
-    height: 400px; /* Set a fixed height for all items */
-    display: flex;
-    flex-direction: column; /* Stack children vertically */
+  position: relative;
+  background-color: #444;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
+  width: 100%; /* Ensure it takes full width of the column */
+  height: 400px; /* Set a fixed height for all items */
+  display: flex;
+  flex-direction: column; /* Stack children vertically */
 }
 
 /* Ensure the image takes the top part of the card */
 .item img {
-    width: 100%;
-    height: 100%; /* Set a height for the image */
-    object-fit: cover;
+  width: 100%;
+  height: 100%; /* Set a height for the image */
+  object-fit: cover;
 }
 
 .item .description {
-    padding: 30px;
-    font-size: 1rem;
-    color: #ddd;
-    background-color: rgba(0, 0, 0, 0.5);
-    border-radius: 0 0 10px 10px;
-    flex-grow: 1; /* Allow description to take remaining space */
+  padding: 30px;
+  font-size: 1rem;
+  color: #ddd;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 0 0 10px 10px;
+  flex-grow: 1; /* Allow description to take remaining space */
 }
 
 p {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 /* Hover effect for scaling and glowing */
 .item:hover {
-    transform: scale(1.05);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
-    filter: brightness(1.2);
+  transform: scale(1.05);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+  filter: brightness(1.2);
 }
 
 .item:hover img {
-    transform: scale(1.1); /* Slight zoom-in effect for the image */
-    filter: brightness(1.1); /* Increase image brightness */
+  transform: scale(1.1); /* Slight zoom-in effect for the image */
+  filter: brightness(1.1); /* Increase image brightness */
 }
 
 .item h2 {
-    position: absolute;
-    top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
-    color: white;
-    font-size: 1.5rem;
-    background-color: rgba(0, 0, 0, 0.6);
-    padding: 5px 15px;
-    border-radius: 5px;
-    text-align: center;
-    opacity: 0;
-    transition: opacity 0.3s ease, transform 0.3s ease;
+  position: absolute;
+  top: 10%;
+  left: 50%;
+  transform: translateX(-50%);
+  color: white;
+  font-size: 1.5rem;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 5px 15px;
+  border-radius: 5px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
 .item:hover h2 {
-    opacity: 1;
-    transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
+  opacity: 1;
+  transform: translateX(-50%) translateY(-10px); /* Move the title upwards with hover */
 }
 
 /* Mobile Optimization */
-@media(max-width: 600px) {
-    header {
-        font-size: 1.2rem;
-    }
+@media (max-width: 600px) {
+  header {
+    font-size: 1.2rem;
+  }
 
-    .item {
-        height: auto; /* Allow auto height on mobile for better responsiveness */
-        width: auto;
-    }
+  .item {
+    height: auto; /* Allow auto height on mobile for better responsiveness */
+    width: auto;
+  }
 
-    .grid-container {
-        grid-template-columns: repeat(1, 1fr);
-    }
+  .grid-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
 }