diff --git a/index.html b/index.html
index c840399..f03aa9f 100644
--- a/index.html
+++ b/index.html
@@ -5,15 +5,12 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="stylesheet" href="./styles/mainstyle.css" />
 		<link rel="stylesheet" href="./styles/default.style.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="./styles/index.style.css" />
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
 		/>
-		<!-- <script defer src="./js/edge.js"></script> -->
-		<!-- <script defer src="./js/box.js"></script> -->
-		<!-- <script defer src="./js/board.js"></script> -->
-		<!-- <script defer src="./js/game.js"></script> -->
 		<script defer src="./js/validation.js"></script>
 		<!-- JavaScript files -->
 		<script defer src="./js/index.js"></script>
@@ -29,9 +26,7 @@
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
+		<script src="/js/global.js"></script>
 
 		<audio id="background-music" autoplay loop>
 			<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
@@ -58,75 +53,108 @@
 				</nav>
 				<button class="sticky-button" onclick="openForm()">Feedback</button>
 				<div class="feed-bg">
-				<div id="formContainer" class="form-container">
-					<div class="form-content">
-						<div class="sub">
-							<h5>We'd Love Your Feedback!</h5>
-							<span class="close-button" onclick="closeForm()">&times;</span>
-						</div>
-						<div class="wrapper">
-							<input type="radio" name="rate" id="star-1" />
-							<input type="radio" name="rate" id="star-2" />
-							<input type="radio" name="rate" id="star-3" />
-							<input type="radio" name="rate" id="star-4" />
-							<input type="radio" name="rate" id="star-5" />
-							<div class="content">
-								<div class="outer">
-									<div class="emojis">
-										<li class="slideImg">
-											<img src="./assets/images/emojis/emoji-1-bg.png" alt="emoji" />
-										</li>
-										<li>
-											<img src="./assets/images/emojis/emoji-2-bg.png" alt="emoji" />
-										</li>
-										<li>
-											<img src="./assets/images/emojis/emoji-3.png" alt="emoji" />
-										</li>
-										<li>
-											<img src="./assets/images/emojis/emoji-4-bg.png" alt="emoji" />
-										</li>
-										<li>
-											<img src="./assets/images/emojis/emoji-5-bg.png" alt="emoji" />
-										</li>
+					<div id="formContainer" class="form-container">
+						<div class="form-content">
+							<div class="sub">
+								<h5>We'd Love Your Feedback!</h5>
+								<span class="close-button" onclick="closeForm()">&times;</span>
+							</div>
+							<div class="wrapper">
+								<input type="radio" name="rate" id="star-1" />
+								<input type="radio" name="rate" id="star-2" />
+								<input type="radio" name="rate" id="star-3" />
+								<input type="radio" name="rate" id="star-4" />
+								<input type="radio" name="rate" id="star-5" />
+								<div class="content">
+									<div class="outer">
+										<div class="emojis">
+											<li class="slideImg">
+												<img
+													src="./assets/images/emojis/emoji-1-bg.png"
+													alt="emoji"
+												/>
+											</li>
+											<li>
+												<img
+													src="./assets/images/emojis/emoji-2-bg.png"
+													alt="emoji"
+												/>
+											</li>
+											<li>
+												<img
+													src="./assets/images/emojis/emoji-3.png"
+													alt="emoji"
+												/>
+											</li>
+											<li>
+												<img
+													src="./assets/images/emojis/emoji-4-bg.png"
+													alt="emoji"
+												/>
+											</li>
+											<li>
+												<img
+													src="./assets/images/emojis/emoji-5-bg.png"
+													alt="emoji"
+												/>
+											</li>
+										</div>
+									</div>
+									<div class="stars">
+										<label for="star-1" class="star-1 fas fa-star"></label>
+										<label for="star-2" class="star-2 fas fa-star"></label>
+										<label for="star-3" class="star-3 fas fa-star"></label>
+										<label for="star-4" class="star-4 fas fa-star"></label>
+										<label for="star-5" class="star-5 fas fa-star"></label>
 									</div>
 								</div>
-								<div class="stars">
-									<label for="star-1" class="star-1 fas fa-star"></label>
-									<label for="star-2" class="star-2 fas fa-star"></label>
-									<label for="star-3" class="star-3 fas fa-star"></label>
-									<label for="star-4" class="star-4 fas fa-star"></label>
-									<label for="star-5" class="star-5 fas fa-star"></label>
+								<div class="footer">
+									<span class="text"></span>
+									<span class="numb"></span>
 								</div>
 							</div>
-							<div class="footer">
-								<span class="text"></span>
-								<span class="numb"></span>
-							</div>
-						</div>
 
-						<form id="feedbackForm">
-							<div class="form-group-1">
-							<div class="form-group">
-								<label for="firstName">Name</label>
-								<input type="text" required id="firstName" name="firstName" placeholder="Enter Name">
-							</div>
-							<div class="form-group ">
-								<label for="email">Email</label>
-								<input type="email" required id="email" name="email" placeholder="Enter Email">
-							</div>
+							<form id="feedbackForm">
+								<div class="form-group-1">
+									<div class="form-group">
+										<label for="firstName">Name</label>
+										<input
+											type="text"
+											required
+											id="firstName"
+											name="firstName"
+											placeholder="Enter Name"
+										/>
+									</div>
+									<div class="form-group">
+										<label for="email">Email</label>
+										<input
+											type="email"
+											required
+											id="email"
+											name="email"
+											placeholder="Enter Email"
+										/>
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="feedback">Describe your feedback</label>
+									<textarea
+										id="feedback"
+										required
+										name="feedback"
+										rows="4"
+										placeholder="Tell us how we can improve ..."
+									></textarea>
+								</div>
+								<div class="submitbtn">
+									<input type="submit" value="Submit" class="buttons" />
+									<input type="reset" value="Reset" class="buttons" />
+								</div>
+							</form>
 						</div>
-							<div class="form-group">
-								<label for="feedback">Describe your feedback</label>
-								<textarea id="feedback" required name="feedback" rows="4" placeholder="Tell us how we can improve ..."></textarea>
-							</div>
-							<div class="submitbtn">
-								<input type="submit" value="Submit" class="buttons">
-								<input type="reset" value="Reset" class="buttons">
-							</div>
-						</form>
 					</div>
 				</div>
-			</div>
 				<div id="thankYouPopup" class="popup hidden">
 					<div class="popup-content">
 						<span class="close-button" onclick="closeThankYouPopup()"
@@ -201,13 +229,17 @@ <h3>Thank You!</h3>
 				<div class="form">
 					<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
 					<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
-					<h3 class="instructions-heading" style="text-decoration: underline;">Instructions</h3>
+					<h3 class="instructions-heading" style="text-decoration: underline">
+						Instructions
+					</h3>
 					<p class="instructions">
 						1. 🧩 Select the number of rows, columns, and players. <br />
-						2. 🏆 The player who has the maximum number of boxes on the board is the winner. <br />
-						3. 🔄 Players will switch after every turn. But the player who fills the last box will get one extra chance consecutively. 🎉 <br />
+						2. 🏆 The player who has the maximum number of boxes on the board is
+						the winner. <br />
+						3. 🔄 Players will switch after every turn. But the player who fills
+						the last box will get one extra chance consecutively. 🎉 <br />
 					</p>
-					
+
 					<a href="./pages/howtoplay.html" class="button"
 						>Read Detailed Instructions</a
 					>
@@ -215,7 +247,9 @@ <h3 class="instructions-heading" style="text-decoration: underline;">Instruction
 				<div class="form">
 					<div class="right-background">
 						<div class="form-item">
-							<label for="theme-select" style="text-decoration: underline;">Select Theme:</label>
+							<label for="theme-select" style="text-decoration: underline"
+								>Select Theme:</label
+							>
 							<select id="theme-select">
 								<option value="1">Default</option>
 								<option value="2">Theme 1</option>
@@ -337,78 +371,6 @@ <h3 class="instructions-heading" style="text-decoration: underline;">Instruction
 				});
 		</script>
 
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
 		<script
 			src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js"
 			async
@@ -416,19 +378,4 @@ <h3 class="instructions-heading" style="text-decoration: underline;">Instruction
 	</body>
 
 	<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>
-
-	<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
 </html>
diff --git a/js/global.js b/js/global.js
new file mode 100644
index 0000000..4ffc2b8
--- /dev/null
+++ b/js/global.js
@@ -0,0 +1,65 @@
+document.addEventListener("DOMContentLoaded", function () {
+	// Render Loader
+	const loader = document.createElement("div");
+	loader.id = "loader";
+	loader.innerHTML = `<div class="spinner"></div>`;
+	document.body.appendChild(loader);
+
+	// Loader.js-->
+	setTimeout(() => {
+		const loader = document.getElementById("loader");
+		if (loader) {
+			loader.style.display = "none";
+		} else {
+			console.error("Element with ID 'loader' not found.");
+		}
+	}, 500);
+
+	//Render Cursor effect
+	const circleContainer = document.createElement("div");
+	circleContainer.className = "circle-container";
+	for (let i = 0; i < 30; i++) {
+		let circle = document.createElement("div");
+		circle.className = "circle";
+		circleContainer.appendChild(circle);
+	}
+	document.body.appendChild(circleContainer);
+
+	// Cursor.js -->
+	const coords = { x: 0, y: 0 };
+	const circles = document.querySelectorAll(".circle");
+
+	circles.forEach(function (circle) {
+		circle.x = 0;
+		circle.y = 0;
+	});
+
+	window.addEventListener("mousemove", function (e) {
+		coords.x = e.pageX;
+		coords.y = e.pageY - window.scrollY;
+	});
+
+	function animateCircles() {
+		let x = coords.x;
+		let y = coords.y;
+
+		circles.forEach(function (circle, index) {
+			circle.style.left = `${x - 12}px`;
+			circle.style.top = `${y - 12}px`;
+			circle.style.transform = `scale(${
+				(circles.length - index) / circles.length
+			})`;
+
+			const nextCircle = circles[index + 1] || circles[0];
+			circle.x = x;
+			circle.y = y;
+
+			x += (nextCircle.x - x) * 0.3;
+			y += (nextCircle.y - y) * 0.3;
+		});
+
+		requestAnimationFrame(animateCircles);
+	}
+
+	animateCircles();
+});
diff --git a/js/navbar.js b/js/navbar.js
index 233743c..f231fc0 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -1,22 +1,22 @@
-const		mobile_menu = document.querySelector(".mobile-menu"),
-				mobile_trigger = document.querySelector(".mobile-menu__trigger");
+const mobile_menu = document.querySelector(".mobile-menu"),
+	mobile_trigger = document.querySelector(".mobile-menu__trigger");
 
-let	initialPoint,
-finalPoint;
+let initialPoint, finalPoint;
 
-document.addEventListener("touchstart", function(event) {
+document.addEventListener("touchstart", function (event) {
 	initialPoint = event.changedTouches[0];
 });
 
-document.addEventListener("touchend", function(event) {
+document.addEventListener("touchend", function (event) {
 	finalPoint = event.changedTouches[0];
-	
-	let	xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
-	yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
-	
-	if(xAbs > 120 || yAbs > 120) { // 120 - SWIPE WIDTH
-		if(xAbs > yAbs) {
-			if(finalPoint.pageX < initialPoint.pageX) {
+
+	let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
+		yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
+
+	if (xAbs > 120 || yAbs > 120) {
+		// 120 - SWIPE WIDTH
+		if (xAbs > yAbs) {
+			if (finalPoint.pageX < initialPoint.pageX) {
 				// SWIPE LEFT
 				mobile_menu.classList.remove("mobile-menu_open");
 			} else {
@@ -24,7 +24,7 @@ document.addEventListener("touchend", function(event) {
 				mobile_menu.classList.add("mobile-menu_open");
 			}
 		} else {
-			if(finalPoint.pageY < initialPoint.pageY) {
+			if (finalPoint.pageY < initialPoint.pageY) {
 				// SWIPE UP
 			} else {
 				// SWIPE DOWN
@@ -33,25 +33,26 @@ document.addEventListener("touchend", function(event) {
 	}
 });
 
-document.addEventListener("click", function(event) {
+document.addEventListener("click", function (event) {
 	const target = event.target.closest(".mobile-menu__trigger");
-	if(target && target == mobile_trigger) {
+	if (target && target == mobile_trigger) {
 		mobile_menu.classList.toggle("mobile-menu_open");
-	} else if(event.target !== mobile_trigger && event.target !== mobile_menu) {
-		if( mobile_menu.classList.contains("mobile-menu_open") ) {
+	} else if (event.target !== mobile_trigger && event.target !== mobile_menu) {
+		if (mobile_menu.classList.contains("mobile-menu_open")) {
 			mobile_menu.classList.remove("mobile-menu_open");
 		}
 	}
 });
 
-mobile_menu.querySelectorAll("a").forEach(function(element) {
-	element.addEventListener("click", function(event) {
+mobile_menu.querySelectorAll("a").forEach(function (element) {
+	element.addEventListener("click", function (event) {
 		const anchor_href = event.currentTarget.getAttribute("href");
-		if(anchor_href.charAt(0) === "#") {
+		if (anchor_href.charAt(0) === "#") {
 			event.preventDefault();
-			if(anchor_href.length > 1) { // if #hash is not empty
+			if (anchor_href.length > 1) {
+				// if #hash is not empty
 				const scroll_to_node = document.querySelector(event.currentTarget.hash);
-				if(scroll_to_node) {
+				if (scroll_to_node) {
 					SmoothScrollTo(scroll_to_node);
 				}
 			}
@@ -60,9 +61,9 @@ mobile_menu.querySelectorAll("a").forEach(function(element) {
 });
 
 function SmoothScrollTo(element) {
-	if(element) {
+	if (element) {
 		element.scrollIntoView({
-			behavior: "smooth"
+			behavior: "smooth",
 		});
 	}
-}
\ No newline at end of file
+}
diff --git a/js/scrollToTop.js b/js/scrollToTop.js
new file mode 100644
index 0000000..f7ca9b1
--- /dev/null
+++ b/js/scrollToTop.js
@@ -0,0 +1,36 @@
+const scrollToTop = document.createElement("div");
+scrollToTop.className = "scroll-to-top";
+scrollToTop.id = "scrollToTopBtn";
+scrollToTop.innerHTML = `<svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24">
+        <path
+            d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
+            fill="#fff"/>
+        <path
+            d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
+            fill="#fff"/>
+    </svg>`;
+
+document.body.appendChild(scrollToTop);
+
+scrollToTop.addEventListener("click", function () {
+	window.scrollTo({
+		top: 0,
+		behavior: "smooth",
+	});
+});
+
+window.onscroll = function () {
+	let scrollToTopBtn = document.getElementById("scrollToTopBtn");
+	if (
+		document.body.scrollTop > 100 ||
+		document.documentElement.scrollTop > 100
+	) {
+		scrollToTopBtn.style.display = "block";
+	} else {
+		scrollToTopBtn.style.display = "none";
+	}
+};
diff --git a/pages/404.html b/pages/404.html
index 166ce28..f1ea501 100644
--- a/pages/404.html
+++ b/pages/404.html
@@ -9,105 +9,16 @@
 			href="../assets/favicon.ico"
 			type="image/x-icon"
 		/>
-		<link rel="stylesheet" href="../styles/404.css">
-		<script src="/js/loader.js"></script>
+		<link rel="stylesheet" href="/styles/global.css" />
+		<link rel="stylesheet" href="../styles/404.css" />
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
+		<script src="/js/global.js"></script>
 
 		<div class="center">
 			<img src="../assets/images/404pic.png" alt="404 pic" class="pic" />
 			<button class="btn"><a href="../index.html">Home</a></button>
 		</div>
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
-
-		<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
 	</body>
 </html>
diff --git a/pages/FAQs.html b/pages/FAQs.html
index cb1a154..959f341 100644
--- a/pages/FAQs.html
+++ b/pages/FAQs.html
@@ -7,90 +7,15 @@
 
 		<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/FAQs.css" />
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
-		<script src="/js/loader.js"></script>
 
 		<title>FAQs</title>
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
+		<script src="/js/global.js"></script>
 
 		<div class="bottom-background">
 			<video autoplay muted loop>
@@ -252,20 +177,5 @@ <h1>
 			async
 		></script>
 		<script src="../js/FAQs.js"></script>
-
-		<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
 	</body>
 </html>
diff --git a/pages/about.html b/pages/about.html
index 6af3de3..4cc5e61 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -16,8 +16,9 @@
 			href="https://fonts.googleapis.com/css2?family=Tiny5&display=swap"
 			rel="stylesheet"
 		/>
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
-		<link rel="stylesheet" href="../styles/about.css">
+		<link rel="stylesheet" href="../styles/about.css" />
 
 		<!-- Logo of the game -->
 		<link
@@ -25,124 +26,11 @@
 			href="../assets/favicon.ico"
 			type="image/x-icon"
 		/>
-		<script src="/js/loader.js"></script>
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-					fill="#fff"
-				/>
-				<path
-					d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-					fill="#fff"
-				/>
-			</svg>
-		</div>
-
-		<script>
-			function scrollToTop() {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			}
-
-			window.onscroll = function () {
-				let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-				if (
-					document.body.scrollTop > 100 ||
-					document.documentElement.scrollTop > 100
-				) {
-					scrollToTopBtn.style.display = "block";
-				} else {
-					scrollToTopBtn.style.display = "none";
-				}
-			};
-		</script>
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
 
 		<!-- <nav class="navbar">
     <div class="logo">
@@ -319,20 +207,5 @@ <h2>How to Play🎮</h2>
 				></a>
 			</div>
 		</div>
-		
-		<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
 	</body>
 </html>
diff --git a/pages/contributors.html b/pages/contributors.html
index e50ecd0..b120c09 100644
--- a/pages/contributors.html
+++ b/pages/contributors.html
@@ -13,128 +13,15 @@
 			href="../assets/favicon.ico"
 			type="image/x-icon"
 		/>
-		<link rel="stylesheet" href="../styles/contributors.css">
-		<script src="/js/loader.js"></script>
+		<link rel="stylesheet" href="/styles/global.css" />
+		<link rel="stylesheet" href="../styles/contributors.css" />
 
 		<title>Contributors</title>
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-					fill="#fff"
-				/>
-				<path
-					d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-					fill="#fff"
-				/>
-			</svg>
-		</div>
-
-		<script>
-			function scrollToTop() {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			}
-
-			window.onscroll = function () {
-				let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-				if (
-					document.body.scrollTop > 100 ||
-					document.documentElement.scrollTop > 100
-				) {
-					scrollToTopBtn.style.display = "block";
-				} else {
-					scrollToTopBtn.style.display = "none";
-				}
-			};
-		</script>
-
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
 
 		<!-- <nav class="navbar">
     <div class="logo">
@@ -258,19 +145,5 @@ <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contribu
 				></a>
 			</div>
 		</div>
-		<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
 	</body>
 </html>
diff --git a/pages/game.html b/pages/game.html
index cd11941..4063724 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -6,6 +6,7 @@
 
 		<!-- Stylesheet -->
 		<link rel="stylesheet" href="../styles/default.style.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/game.style.css" />
 
 		<!-- JavaScript files -->
@@ -34,82 +35,7 @@
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div class="circle-container">
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-			<div class="circle"></div>
-		</div>
-		<script>
-			document.addEventListener("DOMContentLoaded", function () {
-				const coords = { x: 0, y: 0 };
-				const circles = document.querySelectorAll(".circle");
-
-				circles.forEach(function (circle) {
-					circle.x = 0;
-					circle.y = 0;
-				});
-
-				window.addEventListener("mousemove", function (e) {
-					coords.x = e.pageX;
-					coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-				});
-
-				function animateCircles() {
-					let x = coords.x;
-					let y = coords.y;
-
-					circles.forEach(function (circle, index) {
-						circle.style.left = `${x - 12}px`;
-						circle.style.top = `${y - 12}px`;
-						circle.style.transform = `scale(${
-							(circles.length - index) / circles.length
-						})`;
-
-						const nextCircle = circles[index + 1] || circles[0];
-						circle.x = x;
-						circle.y = y;
-
-						x += (nextCircle.x - x) * 0.3;
-						y += (nextCircle.y - y) * 0.3;
-					});
-
-					requestAnimationFrame(animateCircles);
-				}
-
-				animateCircles();
-			});
-		</script>
+		<script src="/js/global.js"></script>
 
 		<video autoplay muted class="video" loop id="myVideo" style="opacity: 0.95">
 			<source src="/assets/videos/1.mp4" type="video/mp4" />
@@ -378,18 +304,5 @@ <h3>Step 7</h3>
 				showStep(currentStep);
 			});
 		</script>
-		<!-- Loader.js -->
-		<script>
-			document.addEventListener("DOMContentLoaded", () => {
-				setTimeout(() => {
-					const loader = document.getElementById("loader");
-					if (loader) {
-						loader.style.display = "none";
-					} else {
-						console.error("Element with ID 'loader' not found.");
-					}
-				}, 500);
-			});
-		</script>
 	</body>
 </html>
diff --git a/pages/howtoplay.html b/pages/howtoplay.html
index ce35a58..1de7fef 100644
--- a/pages/howtoplay.html
+++ b/pages/howtoplay.html
@@ -5,128 +5,16 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>How to Play - Dot Box</title>
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/howtoplay.css" />
 		<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
-		<script src="/js/loader.js"></script>
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-					fill="#fff"
-				/>
-				<path
-					d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-					fill="#fff"
-				/>
-			</svg>
-		</div>
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
 
-		<script>
-			function scrollToTop() {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			}
-
-			window.onscroll = function () {
-				let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-				if (
-					document.body.scrollTop > 100 ||
-					document.documentElement.scrollTop > 100
-				) {
-					scrollToTopBtn.style.display = "block";
-				} else {
-					scrollToTopBtn.style.display = "none";
-				}
-			};
-		</script>
 		<div class="center">
-			<div class="circle-container">
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-			</div>
-			<script>
-				document.addEventListener("DOMContentLoaded", function () {
-					const coords = { x: 0, y: 0 };
-					const circles = document.querySelectorAll(".circle");
-
-					circles.forEach(function (circle) {
-						circle.x = 0;
-						circle.y = 0;
-					});
-
-					window.addEventListener("mousemove", function (e) {
-						coords.x = e.pageX;
-						coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-					});
-
-					function animateCircles() {
-						let x = coords.x;
-						let y = coords.y;
-
-						circles.forEach(function (circle, index) {
-							circle.style.left = `${x - 12}px`;
-							circle.style.top = `${y - 12}px`;
-							circle.style.transform = `scale(${
-								(circles.length - index) / circles.length
-							})`;
-
-							const nextCircle = circles[index + 1] || circles[0];
-							circle.x = x;
-							circle.y = y;
-
-							x += (nextCircle.x - x) * 0.3;
-							y += (nextCircle.y - y) * 0.3;
-						});
-
-						requestAnimationFrame(animateCircles);
-					}
-
-					animateCircles();
-				});
-			</script>
-
 			<div class="video-container">
 				<video
 					style="object-fit: cover"
@@ -291,20 +179,5 @@ <h1 class="heading" style="text-decoration: underline">
 				></script>
 			</div>
 		</div>
-
-<!-- Loader.js -->
-<script>
-	document.addEventListener("DOMContentLoaded", () => {
-		setTimeout(() => {
-			const loader = document.getElementById("loader");
-			if (loader) {
-				loader.style.display = "none";
-			} else {
-				console.error("Element with ID 'loader' not found.");
-			}
-		}, 500);
-	});
-
-</script>
 	</body>
 </html>
diff --git a/pages/licensing.html b/pages/licensing.html
index c143655..edd9ea8 100644
--- a/pages/licensing.html
+++ b/pages/licensing.html
@@ -6,128 +6,16 @@
 		<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
 		<title>Licensing - Chrome Gaming</title>
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/licensing.css" />
 		<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
-
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-					fill="#fff"
-				/>
-				<path
-					d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-					fill="#fff"
-				/>
-			</svg>
-		</div>
-
-		<script>
-			function scrollToTop() {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			}
-
-			window.onscroll = function () {
-				let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-				if (
-					document.body.scrollTop > 100 ||
-					document.documentElement.scrollTop > 100
-				) {
-					scrollToTopBtn.style.display = "block";
-				} else {
-					scrollToTopBtn.style.display = "none";
-				}
-			};
-		</script>
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
 
 		<div class="center">
-			<div class="circle-container">
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-			</div>
-			<script>
-				document.addEventListener("DOMContentLoaded", function () {
-					const coords = { x: 0, y: 0 };
-					const circles = document.querySelectorAll(".circle");
-
-					circles.forEach(function (circle) {
-						circle.x = 0;
-						circle.y = 0;
-					});
-
-					window.addEventListener("mousemove", function (e) {
-						coords.x = e.pageX;
-						coords.y = e.pageY - window.scrollY;
-					});
-
-					function animateCircles() {
-						let x = coords.x;
-						let y = coords.y;
-
-						circles.forEach(function (circle, index) {
-							circle.style.left = `${x - 12}px`;
-							circle.style.top = `${y - 12}px`;
-							circle.style.transform = `scale(${
-								(circles.length - index) / circles.length
-							})`;
-
-							const nextCircle = circles[index + 1] || circles[0];
-							circle.x = x;
-							circle.y = y;
-
-							x += (nextCircle.x - x) * 0.3;
-							y += (nextCircle.y - y) * 0.3;
-						});
-
-						requestAnimationFrame(animateCircles);
-					}
-
-					animateCircles();
-				});
-			</script>
-
 			<div class="video-container">
 				<video
 					style="object-fit: cover"
@@ -179,8 +67,7 @@ <h2 class="section-title">MIT License</h2>
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-                        </pre
-						>
+                        </pre>
 					</section>
 				</main>
 				<center>
@@ -191,23 +78,12 @@ <h2 class="section-title">MIT License</h2>
 			</div>
 		</div>
 
-		<!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-
-	const yearSpan = document.getElementById("current-year");
-            const currentYear = new Date().getFullYear();
-            yearSpan.textContent = currentYear;
-});
-
-	</script>
+		<script>
+			document.addEventListener("DOMContentLoaded", () => {
+				const yearSpan = document.getElementById("current-year");
+				const currentYear = new Date().getFullYear();
+				yearSpan.textContent = currentYear;
+			});
+		</script>
 	</body>
 </html>
diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html
index b8e6bed..66e2ae0 100644
--- a/pages/privacypolicy.html
+++ b/pages/privacypolicy.html
@@ -1,305 +1,181 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Privacy Policy - Dot Box</title>
-    <link rel="stylesheet" href="../styles/mainstyle.css" />
-    <link rel="stylesheet" href="../styles/privacypolicy.css" />
-    <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
-    <script src="/js/loader.js"></script>
-    
-</head>
-<body>
-    <div id="loader">
-        <div class="spinner"></div>
-    </div>
-
-    <div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-        >
-            <path
-                d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-                fill="#fff"
-            />
-            <path
-                d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-                fill="#fff"
-            />
-        </svg>
-    </div>
-
-    <script>
-        function scrollToTop() {
-            window.scrollTo({
-                top: 0,
-                behavior: "smooth",
-            });
-        }
-
-        window.onscroll = function () {
-            let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-            if (
-                document.body.scrollTop > 100 ||
-                document.documentElement.scrollTop > 100
-            ) {
-                scrollToTopBtn.style.display = "block";
-            } else {
-                scrollToTopBtn.style.display = "none";
-            }
-        };
-    </script>
-    <div class="center">
-        <div class="circle-container">
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-            <div class="circle"></div>
-        </div>
-        <script>
-            document.addEventListener("DOMContentLoaded", function () {
-                const coords = { x: 0, y: 0 };
-                const circles = document.querySelectorAll(".circle");
-
-                circles.forEach(function (circle) {
-                    circle.x = 0;
-                    circle.y = 0;
-                });
-
-                window.addEventListener("mousemove", function (e) {
-                    coords.x = e.pageX;
-                    coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-                });
-
-                function animateCircles() {
-                    let x = coords.x;
-                    let y = coords.y;
-
-                    circles.forEach(function (circle, index) {
-                        circle.style.left = `${x - 12}px`;
-                        circle.style.top = `${y - 12}px`;
-                        circle.style.transform = `scale(${
-                            (circles.length - index) / circles.length
-                        })`;
-
-                        const nextCircle = circles[index + 1] || circles[0];
-                        circle.x = x;
-                        circle.y = y;
-
-                        x += (nextCircle.x - x) * 0.3;
-                        y += (nextCircle.y - y) * 0.3;
-                    });
-
-                    requestAnimationFrame(animateCircles);
-                }
-
-                animateCircles();
-            });
-        </script>
-
-        <div class="video-container">
-            <video
-                style="object-fit: cover"
-                autoplay
-                muted
-                class="video"
-                loop
-                id="myVideo"
-            >
-                <source src="../assets/videos/default.mp4" type="video/mp4" />
-            </video>
-        </div>
-
-        <div class="container" id="privacy-policy-container">
-            <header class="header">
-                <h1 class="title" id="privacy-policy-title">Privacy Policy</h1>
-            </header>
-            <main class="main-content">
-                <section class="section">
-					Last updated: <span id="last-updated-date"></span>
-                    <h2 class="section-title">Introduction</h2>
-                    <p class="section-content">
-                        Welcome to Dot Box. We value your privacy and are committed to
-                        protecting your personal information. This Privacy Policy outlines
-                        how we collect, use, and protect your data when you use our
-                        website and services.
-                    </p>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Data Collection</h2>
-                    <p class="section-content">
-                        We collect various types of information in connection with the
-                        services we provide, including:
-                    </p>
-                    <div class="section-list">
-                        <p class="list-item">
-                            1. Personal Identification Information (Name, email address,
-                            phone number, etc.)
-                        </p>
-                        <p class="list-item">
-                            2. Usage Data (IP address, browser type, pages visited, etc.)
-                        </p>
-                        <p class="list-item">3. Cookies and Tracking Technologies</p>
-                    </div>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Data Use</h2>
-                    <p class="section-content">
-                        The information we collect is used for various purposes,
-                        including:
-                    </p>
-                    <div class="section-list">
-                        <p class="list-item">1. To provide and maintain our services</p>
-                        <p class="list-item">
-                            2. To notify you about changes to our services
-                        </p>
-                        <p class="list-item">3. To provide customer support</p>
-                        <p class="list-item">
-                            4. To gather analysis or valuable information so that we can
-                            improve our services
-                        </p>
-                        <p class="list-item">5. To monitor the usage of our services</p>
-                        <p class="list-item">
-                            6. To detect, prevent, and address technical issues
-                        </p>
-                    </div>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Data Sharing</h2>
-                    <p class="section-content">
-                        We may share your personal information with third parties in the
-                        following circumstances:
-                    </p>
-                    <div class="section-list">
-                        <p class="list-item">
-                            1. With service providers to monitor and analyze the use of our
-                            service
-                        </p>
-                        <p class="list-item">
-                            2. With business partners to offer you certain products,
-                            services, or promotions
-                        </p>
-                        <p class="list-item">
-                            3. With your consent, we may disclose your personal information
-                            for any other purpose
-                        </p>
-                    </div>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Data Protection</h2>
-                    <p class="section-content">
-                        We implement a variety of security measures to maintain the safety
-                        of your personal information. However, please note that no method
-                        of transmission over the Internet, or method of electronic storage
-                        is 100% secure.
-                    </p>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Your Rights</h2>
-                    <p class="section-content">
-                        You have the right to access, correct, or delete your personal
-                        information. You can do this by contacting us using the contact
-                        information provided below.
-                    </p>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Changes to This Privacy Policy</h2>
-                    <p class="section-content">
-                        We may update our Privacy Policy from time to time. We will notify
-                        you of any changes by posting the new Privacy Policy on this page.
-                        <br>
-                       
-                    </p>
-                </section>
-
-                <section class="section">
-                    <h2 class="section-title">Contact Us</h2>
-                    <p class="section-content">
-                        If you have any questions about this Privacy Policy, please
-                        contact us:
-                    </p>
-
-                    <p class="list-item">By email: dotbox@gmail.com</p>
-                </section>
-            </main>
-            <center>
-                <button class="back-button">
-                    <a href="../index.html" class="back-button">Back to Home</a>
-                </button>
-            </center>
-        </div>
-    </div>
-
-    <!-- Loader.js -->
-    <script>
-        document.addEventListener("DOMContentLoaded", () => {
-            setTimeout(() => {
-                const loader = document.getElementById("loader");
-                if (loader) {
-                    loader.style.display = "none";
-                } else {
-                    console.error("Element with ID 'loader' not found.");
-                }
-            }, 500);
-
-            // Update the date dynamically
-            function updateLastUpdatedDate() {
-                const dateElement = document.getElementById("last-updated-date");
-                const now = new Date();
-                const day = now.getDate();
-                const month = now.getMonth() + 1; // Months are zero-based
-                const year = now.getFullYear();
-                dateElement.textContent = `${day}/${month}/${year}`;
-            }
-
-            // Update the date weekly
-            function updateWeekly() {
-                const now = new Date();
-                const dayOfWeek = now.getDay(); // 0 (Sunday) to 6 (Saturday)
-                const timeUntilNextUpdate = (7 - dayOfWeek) * 24 * 60 * 60 * 1000; // Time until next Sunday
-                updateLastUpdatedDate();
-                setTimeout(updateWeekly, timeUntilNextUpdate);
-            }
-
-            // Initialize weekly updates
-            updateWeekly();
-        });
-    </script>
-</body>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Privacy Policy - Dot Box</title>
+		<link rel="stylesheet" href="../styles/mainstyle.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
+		<link rel="stylesheet" href="../styles/termsofservice.css" />
+		<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
+	</head>
+	<body>
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
+
+		<div class="center">
+			<div class="video-container">
+				<video
+					style="object-fit: cover"
+					autoplay
+					muted
+					class="video"
+					loop
+					id="myVideo"
+				>
+					<source src="../assets/videos/default.mp4" type="video/mp4" />
+				</video>
+			</div>
+
+			<div class="container" id="privacy-policy-container">
+				<header class="header">
+					<h1 class="title" id="privacy-policy-title">Privacy Policy</h1>
+				</header>
+				<main class="main-content">
+					<section class="section">
+						Last updated: <span id="last-updated-date"></span>
+						<h2 class="section-title">Introduction</h2>
+						<p class="section-content">
+							Welcome to Dot Box. We value your privacy and are committed to
+							protecting your personal information. This Privacy Policy outlines
+							how we collect, use, and protect your data when you use our
+							website and services.
+						</p>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Data Collection</h2>
+						<p class="section-content">
+							We collect various types of information in connection with the
+							services we provide, including:
+						</p>
+						<div class="section-list">
+							<p class="list-item">
+								1. Personal Identification Information (Name, email address,
+								phone number, etc.)
+							</p>
+							<p class="list-item">
+								2. Usage Data (IP address, browser type, pages visited, etc.)
+							</p>
+							<p class="list-item">3. Cookies and Tracking Technologies</p>
+						</div>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Data Use</h2>
+						<p class="section-content">
+							The information we collect is used for various purposes,
+							including:
+						</p>
+						<div class="section-list">
+							<p class="list-item">1. To provide and maintain our services</p>
+							<p class="list-item">
+								2. To notify you about changes to our services
+							</p>
+							<p class="list-item">3. To provide customer support</p>
+							<p class="list-item">
+								4. To gather analysis or valuable information so that we can
+								improve our services
+							</p>
+							<p class="list-item">5. To monitor the usage of our services</p>
+							<p class="list-item">
+								6. To detect, prevent, and address technical issues
+							</p>
+						</div>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Data Sharing</h2>
+						<p class="section-content">
+							We may share your personal information with third parties in the
+							following circumstances:
+						</p>
+						<div class="section-list">
+							<p class="list-item">
+								1. With service providers to monitor and analyze the use of our
+								service
+							</p>
+							<p class="list-item">
+								2. With business partners to offer you certain products,
+								services, or promotions
+							</p>
+							<p class="list-item">
+								3. With your consent, we may disclose your personal information
+								for any other purpose
+							</p>
+						</div>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Data Protection</h2>
+						<p class="section-content">
+							We implement a variety of security measures to maintain the safety
+							of your personal information. However, please note that no method
+							of transmission over the Internet, or method of electronic storage
+							is 100% secure.
+						</p>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Your Rights</h2>
+						<p class="section-content">
+							You have the right to access, correct, or delete your personal
+							information. You can do this by contacting us using the contact
+							information provided below.
+						</p>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Changes to This Privacy Policy</h2>
+						<p class="section-content">
+							We may update our Privacy Policy from time to time. We will notify
+							you of any changes by posting the new Privacy Policy on this page.
+							<br />
+						</p>
+					</section>
+
+					<section class="section">
+						<h2 class="section-title">Contact Us</h2>
+						<p class="section-content">
+							If you have any questions about this Privacy Policy, please
+							contact us:
+						</p>
+
+						<p class="list-item">By email: dotbox@gmail.com</p>
+					</section>
+				</main>
+				<center>
+					<button class="back-button">
+						<a href="../index.html" class="back-button">Back to Home</a>
+					</button>
+				</center>
+			</div>
+		</div>
+
+		<script>
+			document.addEventListener("DOMContentLoaded", () => {
+				// Update the date dynamically
+				function updateLastUpdatedDate() {
+					const dateElement = document.getElementById("last-updated-date");
+					const now = new Date();
+					const day = now.getDate();
+					const month = now.getMonth() + 1; // Months are zero-based
+					const year = now.getFullYear();
+					dateElement.textContent = `${day}/${month}/${year}`;
+				}
+
+				// Update the date weekly
+				function updateWeekly() {
+					const now = new Date();
+					const dayOfWeek = now.getDay(); // 0 (Sunday) to 6 (Saturday)
+					const timeUntilNextUpdate = (7 - dayOfWeek) * 24 * 60 * 60 * 1000; // Time until next Sunday
+					updateLastUpdatedDate();
+					setTimeout(updateWeekly, timeUntilNextUpdate);
+				}
+
+				// Initialize weekly updates
+				updateWeekly();
+			});
+		</script>
+	</body>
 </html>
diff --git a/pages/termsofservice.html b/pages/termsofservice.html
index 201772c..5d847d1 100644
--- a/pages/termsofservice.html
+++ b/pages/termsofservice.html
@@ -5,127 +5,16 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Terms Of Service - Dot Box</title>
 		<link rel="stylesheet" href="../styles/mainstyle.css" />
+		<link rel="stylesheet" href="/styles/global.css" />
 		<link rel="stylesheet" href="../styles/termsofservice.css" />
 		<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
-		<script src="/js/loader.js"></script>
 	</head>
 
 	<body>
-		<div id="loader">
-			<div class="spinner"></div>
-		</div>
-
-		<div id="scrollToTopBtn" class="scroll-to-top" onclick="scrollToTop()">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-			>
-				<path
-					d="M12 6.414l7.293 7.293 1.414-1.414L12 3.586 3.293 12.707l1.414 1.414L12 6.414z"
-					fill="#fff"
-				/>
-				<path
-					d="M3.293 18.293l1.414 1.414L12 12.414l7.293 7.293 1.414-1.414L12 9.586 3.293 18.293z"
-					fill="#fff"
-				/>
-			</svg>
-		</div>
-
-		<script>
-			function scrollToTop() {
-				window.scrollTo({
-					top: 0,
-					behavior: "smooth",
-				});
-			}
+		<script src="/js/global.js"></script>
+		<script src="/js/scrollToTop.js"></script>
 
-			window.onscroll = function () {
-				let scrollToTopBtn = document.getElementById("scrollToTopBtn");
-				if (
-					document.body.scrollTop > 100 ||
-					document.documentElement.scrollTop > 100
-				) {
-					scrollToTopBtn.style.display = "block";
-				} else {
-					scrollToTopBtn.style.display = "none";
-				}
-			};
-		</script>
 		<div class="center">
-			<div class="circle-container">
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-				<div class="circle"></div>
-			</div>
-			<script>
-				document.addEventListener("DOMContentLoaded", function () {
-					const coords = { x: 0, y: 0 };
-					const circles = document.querySelectorAll(".circle");
-
-					circles.forEach(function (circle) {
-						circle.x = 0;
-						circle.y = 0;
-					});
-
-					window.addEventListener("mousemove", function (e) {
-						coords.x = e.pageX;
-						coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
-					});
-
-					function animateCircles() {
-						let x = coords.x;
-						let y = coords.y;
-
-						circles.forEach(function (circle, index) {
-							circle.style.left = `${x - 12}px`;
-							circle.style.top = `${y - 12}px`;
-							circle.style.transform = `scale(${
-								(circles.length - index) / circles.length
-							})`;
-
-							const nextCircle = circles[index + 1] || circles[0];
-							circle.x = x;
-							circle.y = y;
-
-							x += (nextCircle.x - x) * 0.3;
-							y += (nextCircle.y - y) * 0.3;
-						});
-
-						requestAnimationFrame(animateCircles);
-					}
-
-					animateCircles();
-				});
-			</script>
 			<div class="video-container">
 				<video
 					style="object-fit: cover"
@@ -226,18 +115,8 @@ <h2 class="section-title">Contact Information</h2>
 			</div>
 		</div>
 
-		<!-- Loader.js -->
 		<script>
 			document.addEventListener("DOMContentLoaded", () => {
-				setTimeout(() => {
-					const loader = document.getElementById("loader");
-					if (loader) {
-						loader.style.display = "none";
-					} else {
-						console.error("Element with ID 'loader' not found.");
-					}
-				}, 500);
-	
 				// Update the date dynamically
 				function updateLastUpdatedDate() {
 					const dateElement = document.getElementById("last-updated-date");
@@ -247,7 +126,7 @@ <h2 class="section-title">Contact Information</h2>
 					const year = now.getFullYear();
 					dateElement.textContent = `${day}/${month}/${year}`;
 				}
-	
+
 				// Update the date weekly
 				function updateWeekly() {
 					const now = new Date();
@@ -256,11 +135,10 @@ <h2 class="section-title">Contact Information</h2>
 					updateLastUpdatedDate();
 					setTimeout(updateWeekly, timeUntilNextUpdate);
 				}
-	
+
 				// Initialize weekly updates
 				updateWeekly();
 			});
 		</script>
-
 	</body>
 </html>
diff --git a/styles/404.css b/styles/404.css
index 52dae7b..4f0f38e 100644
--- a/styles/404.css
+++ b/styles/404.css
@@ -1,75 +1,49 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: Arial, sans-serif;
-    background-color: #f6f6f6;
+	margin: 0;
+	padding: 0;
+	font-family: Arial, sans-serif;
+	background-color: #f6f6f6;
 }
 .center {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 90vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 90vh;
 }
 .pic {
-    width: 700px;
-    height: 700px;
-    animation: updown 2s ease-in-out infinite alternate;
+	width: 700px;
+	height: 700px;
+	animation: updown 2s ease-in-out infinite alternate;
 }
 @keyframes updown {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(20px);
-    }
+	from {
+		transform: translateY(0);
+	}
+	to {
+		transform: translateY(20px);
+	}
 }
 a {
-    text-decoration: none;
-    color: #353535;
+	text-decoration: none;
+	color: #353535;
 }
 .btn {
-    position: absolute;
-    padding: 10px 20px;
-    background-color: #32ddaac9;
-    border-radius: 5px;
-    font-size: 20px;
-    font-weight: bold;
-    border: none;
-    top: 600px;
+	position: absolute;
+	padding: 10px 20px;
+	background-color: #32ddaac9;
+	border-radius: 5px;
+	font-size: 20px;
+	font-weight: bold;
+	border: none;
+	top: 600px;
 }
 @media screen and (max-width: 600px) {
-    .pic {
-        width: 300px;
-        height: 300px;
-    }
-    .btn {
-        top: 400px;
-    }
+	.pic {
+		width: 300px;
+		height: 300px;
+	}
+	.btn {
+		top: 400px;
+	}
 }
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/styles/FAQs.css b/styles/FAQs.css
index e793b98..58369fe 100644
--- a/styles/FAQs.css
+++ b/styles/FAQs.css
@@ -1,351 +1,325 @@
 /* General Body Styles */
 body {
-    background: linear-gradient(135deg, #f7b42c, #fc575e); /* Gradient background from orange to pink */
-    margin: 0;
-    padding: 0;
-    font-family: 'WorkSans-Regular', Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    padding-top: 10px;
-    overflow: auto !important;
+	background: linear-gradient(
+		135deg,
+		#f7b42c,
+		#fc575e
+	); /* Gradient background from orange to pink */
+	margin: 0;
+	padding: 0;
+	font-family: "WorkSans-Regular", Arial, sans-serif;
+	display: flex;
+	justify-content: center;
+	padding-top: 10px;
+	overflow: auto !important;
 }
 
 /* FAQ Container Styles */
 .faqcontainer {
-    background-color: white;
-    border-radius: 10px;
-    padding: 20px;
-    max-width: 600px;
-    width: 90%;
-    box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5);
-    margin: 100px auto 20px;
-    flex: 1;
-    z-index: 0;
+	background-color: white;
+	border-radius: 10px;
+	padding: 20px;
+	max-width: 600px;
+	width: 90%;
+	box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5);
+	margin: 100px auto 20px;
+	flex: 1;
+	z-index: 0;
 }
 
 /* Heading Styles */
 h1 {
-    font-family: 'WorkSans-Bold', Arial, sans-serif;
-    display: flex;
-    align-items: center;
+	font-family: "WorkSans-Bold", Arial, sans-serif;
+	display: flex;
+	align-items: center;
 }
 
-h1:hover{
-    text-shadow:#ca2cff !important;
+h1:hover {
+	text-shadow: #ca2cff !important;
 }
 
 /* FAQ Image Styles */
 .faqcontainer img {
-    margin-right: 20px;
+	margin-right: 20px;
 }
 
 /* Question Styles */
 .question {
-    font-family: 'WorkSans-SemiBold', Arial, sans-serif;
-    padding: 20px;
-    font-size: 1.25rem; /* 20px */
-    border-bottom: 0.5px solid rgba(243, 218, 171, 0.5);
-    background: linear-gradient(135deg, #f7f7f7, #eaeaea); /* Subtle gradient for questions */
-    transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */
-    border-radius: 8px;
+	font-family: "WorkSans-SemiBold", Arial, sans-serif;
+	padding: 20px;
+	font-size: 1.25rem; /* 20px */
+	border-bottom: 0.5px solid rgba(243, 218, 171, 0.5);
+	background: linear-gradient(
+		135deg,
+		#f7f7f7,
+		#eaeaea
+	); /* Subtle gradient for questions */
+	transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */
+	border-radius: 8px;
 }
 
 /* Hover Effect */
 .question:hover {
-    background: linear-gradient(135deg, #ffbff2, #d34eff); /* Bright gradient on hover */
-    transform: scale(1.05); /* Slight zoom effect */
-    border-radius: 12px; /* Slight rounding for emphasis */
-    text-shadow: 2px 2px 5px rgba(255, 114, 79, 0.844); /* Text shadow effect on hover */
+	background: linear-gradient(
+		135deg,
+		#ffbff2,
+		#d34eff
+	); /* Bright gradient on hover */
+	transform: scale(1.05); /* Slight zoom effect */
+	border-radius: 12px; /* Slight rounding for emphasis */
+	text-shadow: 2px 2px 5px rgba(255, 114, 79, 0.844); /* Text shadow effect on hover */
 }
 
 /* Summary Styles */
 .question summary {
-    cursor: pointer;
-    padding: 7px;
-    transition: color 0.3s;
-    outline: none; /* Remove default focus outline */
+	cursor: pointer;
+	padding: 7px;
+	transition: color 0.3s;
+	outline: none; /* Remove default focus outline */
 }
 
 .question summary:hover {
-    color: #333; /* Darker text on hover */
+	color: #333; /* Darker text on hover */
 }
 
 .question summary img {
-    float: right;
-    transition: transform 0.3s;
+	float: right;
+	transition: transform 0.3s;
 }
 
 .question summary:hover img {
-    transform: rotate(90deg); /* Rotate icon on hover */
+	transform: rotate(90deg); /* Rotate icon on hover */
 }
 
 /* Answer Styles */
 .question p {
-    font-family: 'WorkSans-Regular', Arial, sans-serif;
-    font-size: 1.0625rem; /* 17px */
-    color: #555; /* Slightly darker text */
-    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
-    padding: 10px;
-    border-radius: 5px;
-    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
+	font-family: "WorkSans-Regular", Arial, sans-serif;
+	font-size: 1.0625rem; /* 17px */
+	color: #555; /* Slightly darker text */
+	background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
+	padding: 10px;
+	border-radius: 5px;
+	transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
 }
 
 /* Remove bottom-background video styles */
 .bottom-background {
-    display: none;
+	display: none;
 }
 
 /* Mobile Styles */
 @media (max-width: 768px) {
-    .faqcontainer {
-        width: 95%;
-        padding: 15px;
-    }
-
-    h1 {
-        font-size: 1.5rem; /* Responsive font size */
-    }
-
-    .question {
-        font-size: 1.125rem; /* 18px */
-    }
-
-    .question p {
-        font-size: 1rem; /* 16px */
-    }
-
-    .back-to-home {
-        font-size: 14px;
-        padding: 8px 16px;
-        bottom: 10px;
-        right: 10px;
-    }
-
-    .back-to-home img {
-        width: 18px;
-    }
+	.faqcontainer {
+		width: 95%;
+		padding: 15px;
+	}
+
+	h1 {
+		font-size: 1.5rem; /* Responsive font size */
+	}
+
+	.question {
+		font-size: 1.125rem; /* 18px */
+	}
+
+	.question p {
+		font-size: 1rem; /* 16px */
+	}
+
+	.back-to-home {
+		font-size: 14px;
+		padding: 8px 16px;
+		bottom: 10px;
+		right: 10px;
+	}
+
+	.back-to-home img {
+		width: 18px;
+	}
 }
 
 @media (max-width: 480px) {
-    .faqcontainer {
-        width: 100%;
-        padding: 10px;
-    }
-
-    h1 {
-        font-size: 1.25rem; /* Responsive font size */
-    }
-
-    .question {
-        font-size: 1rem; /* 16px */
-    }
-
-    .question p {
-        font-size: 0.875rem; /* 14px */
-    }
-
-    .back-to-home {
-        font-size: 12px;
-        padding: 6px 12px;
-        bottom: 5px;
-        right: 5px;
-    }
-
-    .back-to-home img {
-        width: 16px;
-    }
+	.faqcontainer {
+		width: 100%;
+		padding: 10px;
+	}
+
+	h1 {
+		font-size: 1.25rem; /* Responsive font size */
+	}
+
+	.question {
+		font-size: 1rem; /* 16px */
+	}
+
+	.question p {
+		font-size: 0.875rem; /* 14px */
+	}
+
+	.back-to-home {
+		font-size: 12px;
+		padding: 6px 12px;
+		bottom: 5px;
+		right: 5px;
+	}
+
+	.back-to-home img {
+		width: 16px;
+	}
 }
 
 .attribution {
-    font-size: 11px;
-    text-align: center;
+	font-size: 11px;
+	text-align: center;
 }
 
 .attribution a {
-    color: hsl(228, 45%, 44%);
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
+	color: hsl(228, 45%, 44%);
 }
 
 html,
 body {
-    height: 100%;
-    margin: 0;
-    overflow: auto !important;
-    /* Allow scrolling */
-    height: 105%;
+	height: 100%;
+	margin: 0;
+	overflow: auto !important;
+	/* Allow scrolling */
+	height: 105%;
 }
 
 body {
-    background-color: #e7b537;
-    display: flex;
-    flex-direction: column;
-    font-family: "WorkSans-Regular", Arial, sans-serif;
+	background-color: #e7b537;
+	display: flex;
+	flex-direction: column;
+	font-family: "WorkSans-Regular", Arial, sans-serif;
 }
 
 @media screen and (max-width: 450px) {
-    .contributor-card {
-        max-width: 90%;
-    }
-
-    .navbar {
-        flex-direction: column;
-        padding: 5px !important;
-    }
-
-    .faqcontainer {
-        background-color: white;
-        border-radius: 20px;
-        padding: 20px;
-        max-width: 600px;
-        width: 90%;
-        box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5);
-        margin: 100px auto 20px;
-        /* Increased margin-top to avoid content being hidden under navbar */
-        flex: 1;
-        z-index: 0;
-        /* Ensure it's below the fixed elements */
-        margin-top: 54px;
-    }
-
-    .author {
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: linear-gradient(to right, #00093c, #2d0b00);
-        color: #fff;
-        padding: 0px;
-        position: fixed;
-        bottom: 0;
-        z-index: 1000;
-        height: 67px;
-        flex-shrink: 0;
-        box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
-        /* Added shadow for better visibility */
-    }
-
-    .author .fotbar {
-        display: flex;
-        gap: -22px;
-    }
-
-    .author .fotbar a {
-        color: white;
-        text-decoration: none;
-        padding: 10px;
-        border-radius: 5px;
-        font-size: 18px;
-        background-color: transparent;
-    }
-
-    .author p {
-        color: white;
-        padding: 10px;
-        margin-right: -550px;
-        font-size: 20px;
-        font-weight: 600;
-    }
-
-    .author .social-icons {
-        display: flex;
-        gap: 10px;
-        margin-right: 20px;
-    }
-
-    .author a {
-        color: white !important;
-    }
-
-    .author .social-icons a {
-        color: white;
-        text-decoration: none;
-        font-size: 20px;
-    }
+	.contributor-card {
+		max-width: 90%;
+	}
+
+	.navbar {
+		flex-direction: column;
+		padding: 5px !important;
+	}
+
+	.faqcontainer {
+		background-color: white;
+		border-radius: 20px;
+		padding: 20px;
+		max-width: 600px;
+		width: 90%;
+		box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5);
+		margin: 100px auto 20px;
+		/* Increased margin-top to avoid content being hidden under navbar */
+		flex: 1;
+		z-index: 0;
+		/* Ensure it's below the fixed elements */
+		margin-top: 54px;
+	}
+
+	.author {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background: linear-gradient(to right, #00093c, #2d0b00);
+		color: #fff;
+		padding: 0px;
+		position: fixed;
+		bottom: 0;
+		z-index: 1000;
+		height: 67px;
+		flex-shrink: 0;
+		box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+		/* Added shadow for better visibility */
+	}
+
+	.author .fotbar {
+		display: flex;
+		gap: -22px;
+	}
+
+	.author .fotbar a {
+		color: white;
+		text-decoration: none;
+		padding: 10px;
+		border-radius: 5px;
+		font-size: 18px;
+		background-color: transparent;
+	}
+
+	.author p {
+		color: white;
+		padding: 10px;
+		margin-right: -550px;
+		font-size: 20px;
+		font-weight: 600;
+	}
+
+	.author .social-icons {
+		display: flex;
+		gap: 10px;
+		margin-right: 20px;
+	}
+
+	.author a {
+		color: white !important;
+	}
+
+	.author .social-icons a {
+		color: white;
+		text-decoration: none;
+		font-size: 20px;
+	}
 }
 
 @media screen and (max-width: 1190px) {
-    .author a {
-        font-size: small;
-    }
+	.author a {
+		font-size: small;
+	}
 }
 
 @media screen and (max-width: 1065px) {
-    .author .fotbar {
-        display: grid;
-    }
+	.author .fotbar {
+		display: grid;
+	}
 
-    .author .fotbar a {
-        font-size: 14px;
-    }
+	.author .fotbar a {
+		font-size: 14px;
+	}
 }
 
 @media screen and (max-width: 550px) {
-    .author {
-        display: none !important;
-    }
-
-    .navbar {
-        display: none !important;
-    }
-
-    .author p {
-        font-size: 16px;
-        padding: 0;
-    }
-
-    .author .fotbar a {
-        font-size: 12px;
-    }
-
-    .author .social-icons a {
-        font-size: 15px;
-    }
-
-    .faqcontainer {
-        margin-top: 49px;
-    }
+	.author {
+		display: none !important;
+	}
+
+	.navbar {
+		display: none !important;
+	}
+
+	.author p {
+		font-size: 16px;
+		padding: 0;
+	}
+
+	.author .fotbar a {
+		font-size: 12px;
+	}
+
+	.author .social-icons a {
+		font-size: 15px;
+	}
+
+	.faqcontainer {
+		margin-top: 49px;
+	}
 }
 
 @media (max-width: 768px) {
-    .author {
-        position: relative !important;
-    }
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 220, 131, 0.979);
-    border-radius: 15px;
+	.author {
+		position: relative !important;
+	}
 }
-::-webkit-scrollbar-track {
-    background-color: rgba(46, 33, 0, 0.979);
-}
\ No newline at end of file
diff --git a/styles/about.css b/styles/about.css
index d7aacb6..7740329 100644
--- a/styles/about.css
+++ b/styles/about.css
@@ -1,454 +1,390 @@
 html,
 body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    background-color: #e7b537;
-    scroll-behavior: smooth;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background-color: #e7b537;
+	scroll-behavior: smooth;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
-}
-
-::-webkit-scrollbar {
-    width: 8px !important;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(231, 181, 55, 0.979) !important;
-    border-radius: 15px !important;
-}
-
-::-webkit-scrollbar-track {
-    background-color: black !important;
+	display: flex;
+	flex-direction: column;
 }
 
 main {
-    flex: 1;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
+	flex: 1;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
 
 html,
 body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    background-color: #e7b537;
-    scroll-behavior: smooth;
+	margin: 0;
+	padding: 0;
+	height: 100%;
+	background-color: #e7b537;
+	scroll-behavior: smooth;
 }
 
 body {
-    display: flex;
-    flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .about-header {
-    font-family: "Anton", sans-serif;
-    background-color: transparent;
-    color: #0e0e0e;
-    padding: 15px;
-    text-shadow: 2px 2px 10px white;
-    text-align: center;
-    font-size: 2.5rem;
-    transition: background-color 0.3s ease;
+	font-family: "Anton", sans-serif;
+	background-color: transparent;
+	color: #0e0e0e;
+	padding: 15px;
+	text-shadow: 2px 2px 10px white;
+	text-align: center;
+	font-size: 2.5rem;
+	transition: background-color 0.3s ease;
 }
 
 .about-header:hover {
-    background-color: #e59253;
+	background-color: #e59253;
 }
 
 h1 {
-    margin: 0;
+	margin: 0;
 }
 
 main {
-    padding: 20px;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+	padding: 20px;
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
 }
 
 p {
-    color: #333;
-    line-height: 1.6;
-    text-align: justify;
-    max-width: 750px;
-    margin: 0 auto;
-    font-size: 16px;
+	color: #333;
+	line-height: 1.6;
+	text-align: justify;
+	max-width: 750px;
+	margin: 0 auto;
+	font-size: 16px;
 }
 
 .functionalities,
 .how-to-play {
-    flex: 1 1 320px;
-    max-width: 320px;
-    height: 350px;
-    margin: 10px;
-    color: #ffffff;
-    font-family: "Poppins", sans-serif;
-    background: linear-gradient(135deg, #5f4c9b, #3540e3);
-    border-radius: 10px;
-    padding: 0px 204px;
-    box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
-    transition: all 0.3s ease;
-    overflow: hidden;
-    position: relative;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 352px;
+	flex: 1 1 320px;
+	max-width: 320px;
+	height: 350px;
+	margin: 10px;
+	color: #ffffff;
+	font-family: "Poppins", sans-serif;
+	background: linear-gradient(135deg, #5f4c9b, #3540e3);
+	border-radius: 10px;
+	padding: 0px 204px;
+	box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5);
+	transition: all 0.3s ease;
+	overflow: hidden;
+	position: relative;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 352px;
 }
 
 .functionalities h2,
 .how-to-play h2 {
-    font-size: 24px;
-    margin-bottom: 10px;
-    font-family: "Poppins", sans-serif;
-    font-weight: 700;
-    text-align: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    transition: all 0.3s ease;
+	font-size: 24px;
+	margin-bottom: 10px;
+	font-family: "Poppins", sans-serif;
+	font-weight: 700;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+	transition: all 0.3s ease;
 }
 
 .functionalities .content,
 .how-to-play .content {
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    font-weight: 500;
-    position: absolute;
-    top: 60px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 20px;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	font-weight: 500;
+	position: absolute;
+	top: 60px;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 20px;
 }
 
 .functionalities::after,
 .how-to-play::after {
-    content: "(Hover here to know more)";
-    position: absolute;
-    bottom: 20px;
-    left: 0;
-    right: 0;
-    text-align: center;
-    opacity: 0.7;
-    transition: opacity 0.3s ease;
+	content: "(Hover here to know more)";
+	position: absolute;
+	bottom: 20px;
+	left: 0;
+	right: 0;
+	text-align: center;
+	opacity: 0.7;
+	transition: opacity 0.3s ease;
 }
 
 .functionalities:hover::after,
 .how-to-play:hover::after {
-    opacity: 0;
+	opacity: 0;
 }
 
 .functionalities:hover h2,
 .how-to-play:hover h2 {
-    top: 10px;
-    transform: translateX(-50%);
+	top: 10px;
+	transform: translateX(-50%);
 }
 
 .functionalities:hover .content,
 .how-to-play:hover .content {
-    opacity: 1;
+	opacity: 1;
 }
 
 ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    margin-right: 29px;
-    margin-left: 33px;
-    margin-top: -40px;
+	list-style: none;
+	padding-left: 0;
+	margin: 0;
+	margin-right: 29px;
+	margin-left: 33px;
+	margin-top: -40px;
 }
 
 li {
-    margin-bottom: 8px;
-    line-height: 1.6;
+	margin-bottom: 8px;
+	line-height: 1.6;
 }
 
 .functionalities ul,
 .how-to-play p {
-    color: #ffffff;
-    font-size: 14px;
+	color: #ffffff;
+	font-size: 14px;
 }
 
 .author {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: linear-gradient(to right, #00093c, #2d0b00);
-    color: #fff;
-    padding: 15px;
-    position: sticky;
-    bottom: 0;
-    z-index: 1000;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: linear-gradient(to right, #00093c, #2d0b00);
+	color: #fff;
+	padding: 15px;
+	position: sticky;
+	bottom: 0;
+	z-index: 1000;
 }
 
 .author .fotbar {
-    display: flex;
-    gap: -10px;
+	display: flex;
+	gap: -10px;
 }
 
 .author .fotbar a {
-    color: white;
-    text-decoration: none;
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 18px;
-    background-color: transparent;
+	color: white;
+	text-decoration: none;
+	padding: 10px;
+	border-radius: 5px;
+	font-size: 18px;
+	background-color: transparent;
 }
 
 ::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
 
 .author p {
-    color: white;
-    padding: 10px;
-    margin-right: 10px;
-    font-size: 20px;
-    font-weight: 600;
+	color: white;
+	padding: 10px;
+	margin-right: 10px;
+	font-size: 20px;
+	font-weight: 600;
 }
 
 .author .social-icons {
-    display: flex;
-    gap: 10px;
-    margin-right: 20px;
+	display: flex;
+	gap: 10px;
+	margin-right: 20px;
 }
 
 .author a {
-    color: white !important;
+	color: white !important;
 }
 
 .author .social-icons a {
-    color: white;
-    text-decoration: none;
-    font-size: 20px;
+	color: white;
+	text-decoration: none;
+	font-size: 20px;
 }
 
 /* Responsive Styles */
 @media screen and (max-width: 769px) {
-    .navbar {
-        flex-direction: column;
-        padding: 20px;
-    }
+	.navbar {
+		flex-direction: column;
+		padding: 20px;
+	}
 
-    .logo a {
-        font-size: 20px;
-    }
+	.logo a {
+		font-size: 20px;
+	}
 
-    .navlinks {
-        flex-direction: column;
-        align-items: center;
-        margin-top: 10px;
-    }
+	.navlinks {
+		flex-direction: column;
+		align-items: center;
+		margin-top: 10px;
+	}
 
-    .navlinks a {
-        font-size: 16px;
-        margin: 5px 0;
-    }
+	.navlinks a {
+		font-size: 16px;
+		margin: 5px 0;
+	}
 }
 
 @media screen and (max-width: 450px) {
-    .logo a {
-        font-size: 18px;
-    }
-
-    .functionalities,
-    .how-to-play {
-        padding: -1px;
-    }
-}
-
-.scroll-to-top {
-    position: fixed;
-    bottom: 90px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: background-color 0.3s ease;
-}
-
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
+	.logo a {
+		font-size: 18px;
+	}
+
+	.functionalities,
+	.how-to-play {
+		padding: -1px;
+	}
 }
 
 body > .about-header {
-    width: 100%;
-    position: relative;
-    top: 100px;
+	width: 100%;
+	position: relative;
+	top: 100px;
 }
 
 body > .about-header > h1 {
-    font-size: 5rem;
+	font-size: 5rem;
 }
 
 body > p {
-    position: relative;
-    top: 100px;
+	position: relative;
+	top: 100px;
 }
 
 body > main {
-    position: relative;
-    top: 100px;
-    padding-bottom: 100px;
+	position: relative;
+	top: 100px;
+	padding-bottom: 100px;
 }
 
 .author {
-    position: fixed;
-    bottom: 0;
+	position: fixed;
+	bottom: 0;
 }
 
 .navbarr {
-    width: 100vw;
+	width: 100vw;
 }
 
 .navbar-toggler {
-    background-color: transparent;
-    border: none;
+	background-color: transparent;
+	border: none;
 }
 
 .navbar-toggler .toggler-icon {
-    width: 30px;
-    height: 2px;
-    background-color: #fff;
-    display: block;
-    margin: 5px 0;
-    position: relative;
-    -webkit-transition: all 0.3s ease-out 0s;
-    -moz-transition: all 0.3s ease-out 0s;
-    -ms-transition: all 0.3s ease-out 0s;
-    -o-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
+	width: 30px;
+	height: 2px;
+	background-color: #fff;
+	display: block;
+	margin: 5px 0;
+	position: relative;
+	-webkit-transition: all 0.3s ease-out 0s;
+	-moz-transition: all 0.3s ease-out 0s;
+	-ms-transition: all 0.3s ease-out 0s;
+	-o-transition: all 0.3s ease-out 0s;
+	transition: all 0.3s ease-out 0s;
 }
 
 .nav-links {
-    letter-spacing: 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    list-style: none;
-    width: 50%;
-    padding: 0;
-    color: white;
-    font-family: inherit;
+	letter-spacing: 4px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	list-style: none;
+	width: 50%;
+	padding: 0;
+	color: white;
+	font-family: inherit;
 }
 
 .nav-links li a,
 .logo a {
-    color: white;
+	color: white;
 }
 
 button a {
-    background-color: transparent;
+	background-color: transparent;
 }
 
 .start {
-    padding: 10px 5px;
-    border-radius: 5px;
+	padding: 10px 5px;
+	border-radius: 5px;
 }
 
 @media screen and (max-width: 1190px) {
-    .author a {
-        margin-left: 13px;
-    }
+	.author a {
+		margin-left: 13px;
+	}
 }
 
 @media screen and (max-width: 1065px) {
-    .author .fotbar {
-        display: grid;
-    }
+	.author .fotbar {
+		display: grid;
+	}
 
-    .author .fotbar a {
-        font-size: 14px;
-    }
+	.author .fotbar a {
+		font-size: 14px;
+	}
 
-    body > .about-header > h1 {
-        font-size: 3rem;
-    }
+	body > .about-header > h1 {
+		font-size: 3rem;
+	}
 }
 
 @media screen and (max-width: 550px) {
-    .author {
-        padding: 10px;
-    }
+	.author {
+		padding: 10px;
+	}
 
-    .author p {
-        font-size: 16px;
-        padding: 0;
-    }
+	.author p {
+		font-size: 16px;
+		padding: 0;
+	}
 
-    .author .fotbar a {
-        font-size: 12px;
-    }
+	.author .fotbar a {
+		font-size: 12px;
+	}
 
-    .author .social-icons a {
-        font-size: 15px;
-    }
+	.author .social-icons a {
+		font-size: 15px;
+	}
 
-    body > p {
-        padding: 30px;
-    }
+	body > p {
+		padding: 30px;
+	}
 
-    body > .about-header > h1 {
-        font-size: 2rem;
-    }
+	body > .about-header > h1 {
+		font-size: 2rem;
+	}
 }
 
 @media (max-width: 768px) {
-    .author {
-        position: relative !important;
-    }
-}
\ No newline at end of file
+	.author {
+		position: relative !important;
+	}
+}
diff --git a/styles/contributors.css b/styles/contributors.css
index c958613..b0ed826 100644
--- a/styles/contributors.css
+++ b/styles/contributors.css
@@ -1,448 +1,392 @@
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-@media (max-width: 760px) {
-    .circle-container {
-        display: none;
-    }
-}
-
 body {
-    margin: 0;
-    font-family: Arial, sans-serif;
-    overflow: auto !important;
-    background-color: #e7b537 !important;
-    overflow-x: hidden !important;
-    /* Hide horizontal scrollbar */
+	margin: 0;
+	font-family: Arial, sans-serif;
+	overflow: auto !important;
+	background-color: #e7b537 !important;
+	overflow-x: hidden !important;
+	/* Hide horizontal scrollbar */
 }
 
 .header-hero {
-    position: relative;
-    padding-top: 50px;
-    padding-bottom: 50px;
+	position: relative;
+	padding-top: 50px;
+	padding-bottom: 50px;
 }
 
 .header-hero .container {
-    position: relative;
+	position: relative;
 }
 
 .header-hero .header-hero-content {
-    position: relative;
-    color: #fff;
+	position: relative;
+	color: #fff;
 }
 
 .header-hero .header-hero-image {
-    margin-top: 50px;
+	margin-top: 50px;
 }
 
 .header-sub-title {
-    font-size: 1.5rem;
-    font-weight: 500;
+	font-size: 1.5rem;
+	font-weight: 500;
 }
 
 .header-title {
-    font-size: 2.5rem;
-    font-weight: 700;
+	font-size: 2.5rem;
+	font-weight: 700;
 }
 
 .text {
-    font-size: 1rem;
-    font-weight: 400;
+	font-size: 1rem;
+	font-weight: 400;
 }
 
 .main-btn {
-    font-size: 1rem;
-    font-weight: 500;
-    padding: 12px 30px;
-    border-radius: 30px;
-    background-color: #ffffff;
-    color: #000;
-    text-decoration: none;
-    transition: all 0.3s ease;
+	font-size: 1rem;
+	font-weight: 500;
+	padding: 12px 30px;
+	border-radius: 30px;
+	background-color: #ffffff;
+	color: #000;
+	text-decoration: none;
+	transition: all 0.3s ease;
 }
 
 .main-btn:hover {
-    background-color: #000;
-    color: #ffffff;
+	background-color: #000;
+	color: #ffffff;
 }
 
 .content {
-    position: relative;
-    padding-top: 0;
+	position: relative;
+	padding-top: 0;
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 16px;
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 16px;
 }
 
 .text-center {
-    text-align: center;
+	text-align: center;
 }
 
 .text-3xl {
-    font-size: 1.875rem;
+	font-size: 1.875rem;
 }
 
 .font-semibold {
-    font-weight: 600;
+	font-weight: 600;
 }
 
 .mb-8 {
-    margin-bottom: 0.8rem;
+	margin-bottom: 0.8rem;
 }
 
 .flex {
-    display: flex;
+	display: flex;
 }
 
 .flex-wrap {
-    flex-wrap: wrap;
+	flex-wrap: wrap;
 }
 
 .justify-center {
-    justify-content: center;
+	justify-content: center;
 }
 
 .gap-8 {
-    gap: 2rem;
+	gap: 2rem;
 }
 
 .contributors {
-    padding-top: 10px;
+	padding-top: 10px;
 }
 
 .contributor-card {
-    width: 100%;
-    max-width: calc(25% - 16px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: #fff;
-    /* border: 1px solid #ccc; */
-    border-radius: 8px;
-    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
-    padding: 16px;
-    transition: transform 0.3s, box-shadow 0.3s;
-    text-decoration: none;
-    color: inherit;
-    margin-bottom: 16px;
+	width: 100%;
+	max-width: calc(25% - 16px);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	background-color: #fff;
+	/* border: 1px solid #ccc; */
+	border-radius: 8px;
+	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
+	padding: 16px;
+	transition: transform 0.3s, box-shadow 0.3s;
+	text-decoration: none;
+	color: inherit;
+	margin-bottom: 16px;
 }
 
 .contributor-card:hover {
-    transform: scale(1.05);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+	transform: scale(1.05);
+	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
 }
 
 .contributor-card img {
-    width: 96px;
-    height: 96px;
-    border-radius: 50%;
-    object-fit: cover;
-    margin-bottom: 16px;
+	width: 96px;
+	height: 96px;
+	border-radius: 50%;
+	object-fit: cover;
+	margin-bottom: 16px;
 }
 
 .contributor-card {
-    position: relative;
-    overflow: hidden;
-    border: 1px solid #ced4da;
-    border-radius: 0.25rem;
-    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
-        background-color 0.3s ease-in-out;
-    background-color: white;
-    color: black;
-    z-index: 0;
-    width: 250px;
-    margin: 10px;
-    text-align: center;
-    padding: 20px;
+	position: relative;
+	overflow: hidden;
+	border: 1px solid #ced4da;
+	border-radius: 0.25rem;
+	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
+		background-color 0.3s ease-in-out;
+	background-color: white;
+	color: black;
+	z-index: 0;
+	width: 250px;
+	margin: 10px;
+	text-align: center;
+	padding: 20px;
 }
 
 .contributor-card::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(39deg, #c4eaf9 50%, #089ffd 50%);
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    transform: translate(-100%, -100%);
-    opacity: 0;
-    z-index: -1;
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: linear-gradient(39deg, #c4eaf9 50%, #089ffd 50%);
+	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+	transform: translate(-100%, -100%);
+	opacity: 0;
+	z-index: -1;
 }
 
 .contributor-card:hover::before {
-    transform: translate(0, 0);
-    opacity: 1;
-    color: black;
+	transform: translate(0, 0);
+	opacity: 1;
+	color: black;
 }
 
 .contributor-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 4px 9px rgb(51, 235, 255);
+	transform: translateY(-5px);
+	box-shadow: 0 4px 9px rgb(51, 235, 255);
 }
 
 .text-lg {
-    font-size: 1.125rem;
+	font-size: 1.125rem;
 }
 
 .text-gray-900 {
-    color: #1a202c;
+	color: #1a202c;
 }
 
 .text-gray-100 {
-    color: #f7fafc;
+	color: #f7fafc;
 }
 
 .mb-2 {
-    margin-bottom: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 
 .text-gray-700 {
-    color: #4a5568;
+	color: #4a5568;
 }
 
 .text-gray-400 {
-    color: #cbd5e0;
+	color: #cbd5e0;
 }
 
 .flex-center {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 }
 
 .mr-1 {
-    margin-right: 0.1rem;
+	margin-right: 0.1rem;
 }
 
 .bg_cover {
-    background-size: cover;
-    background-position: center;
+	background-size: cover;
+	background-position: center;
 }
 
 ::-webkit-scrollbar {
-    width: 8px;
+	width: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 217, 121, 0.979);
-    border-radius: 15px;
+	background-color: rgba(255, 217, 121, 0.979);
+	border-radius: 15px;
 }
 
 ::-webkit-scrollbar-track {
-    background-color: black;
+	background-color: black;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    .contributor-card {
-        max-width: 80%;
-    }
+	.contributor-card {
+		max-width: 80%;
+	}
 }
 
 /* For width more than 768px(exclusive) */
 @media (min-width: 768px) {
-    .contributor-card {
-        max-width: 80%;
-    }
+	.contributor-card {
+		max-width: 80%;
+	}
 }
 
 @media screen and (max-width: 769px) {
-    .navbar {
-        flex-direction: column;
-        align-items: center;
-        margin-top: 0px !important;
-    }
+	.navbar {
+		flex-direction: column;
+		align-items: center;
+		margin-top: 0px !important;
+	}
 
-    .logo a {
-        font-size: 20px;
-    }
+	.logo a {
+		font-size: 20px;
+	}
 
-    .logo {
-        margin-bottom: 10px;
-    }
+	.logo {
+		margin-bottom: 10px;
+	}
 
-    .navlinks {
-        flex-direction: column;
-        align-items: center;
-        gap: 10px;
-    }
+	.navlinks {
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;
+	}
 
-    .navlinks a {
-        font-size: 16px;
-        margin: 10px 0;
-    }
+	.navlinks a {
+		font-size: 16px;
+		margin: 10px 0;
+	}
 }
 
 @media screen and (max-width: 450px) {
-    .contributor-card {
-        max-width: 90%;
-    }
+	.contributor-card {
+		max-width: 90%;
+	}
 
-    .navbar {
-        flex-direction: column;
-        padding: 5px !important;
-    }
+	.navbar {
+		flex-direction: column;
+		padding: 5px !important;
+	}
 
-    .logo a {
-        font-size: 20px;
-    }
+	.logo a {
+		font-size: 20px;
+	}
 
-    .navlinks {
-        flex-direction: column;
-        margin: 0;
-        gap: 4px !important;
-        font-size: 1px !important;
-        list-style: none;
-    }
+	.navlinks {
+		flex-direction: column;
+		margin: 0;
+		gap: 4px !important;
+		font-size: 1px !important;
+		list-style: none;
+	}
 
-    .navlinks a {
-        font-size: 16px;
-        margin: 10px 0;
-    }
+	.navlinks a {
+		font-size: 16px;
+		margin: 10px 0;
+	}
 }
 
 .author {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: linear-gradient(to right, #00093c, #2d0b00);
-    color: #fff;
-    padding: 15px;
-    position: sticky;
-    bottom: 0;
-    z-index: 1000;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: linear-gradient(to right, #00093c, #2d0b00);
+	color: #fff;
+	padding: 15px;
+	position: sticky;
+	bottom: 0;
+	z-index: 1000;
 }
 
 .author .fotbar {
-    display: flex;
-    gap: -22px;
+	display: flex;
+	gap: -22px;
 }
 
 .author .fotbar a {
-    color: white;
-    text-decoration: none;
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 18px;
-    background-color: transparent;
+	color: white;
+	text-decoration: none;
+	padding: 10px;
+	border-radius: 5px;
+	font-size: 18px;
+	background-color: transparent;
 }
 
 .author p {
-    color: white;
-    padding: 10px;
-    margin-right: 10px;
-    font-size: 20px;
-    font-weight: 600;
+	color: white;
+	padding: 10px;
+	margin-right: 10px;
+	font-size: 20px;
+	font-weight: 600;
 }
 
 .author .social-icons {
-    display: flex;
-    gap: 10px;
-    margin-right: 20px;
+	display: flex;
+	gap: 10px;
+	margin-right: 20px;
 }
 
 .author a {
-    color: white !important;
+	color: white !important;
 }
 
 .author .social-icons a {
-    color: white;
-    text-decoration: none;
-    font-size: 20px;
+	color: white;
+	text-decoration: none;
+	font-size: 20px;
 }
 
 @media screen and (max-width: 1190px) {
-    .author a {
-        font-size: small;
-    }
+	.author a {
+		font-size: small;
+	}
 }
 
 @media screen and (max-width: 1065px) {
-    .author .fotbar {
-        display: grid;
-    }
+	.author .fotbar {
+		display: grid;
+	}
 
-    .author .fotbar a {
-        font-size: 14px;
-    }
+	.author .fotbar a {
+		font-size: 14px;
+	}
 }
 
 @media screen and (max-width: 550px) {
-    .author {
-        padding: 10px;
-    }
+	.author {
+		padding: 10px;
+	}
 
-    .author p {
-        font-size: 16px;
-        padding: 0;
-    }
+	.author p {
+		font-size: 16px;
+		padding: 0;
+	}
 
-    .author .fotbar a {
-        font-size: 12px;
-    }
+	.author .fotbar a {
+		font-size: 12px;
+	}
 
-    .author .social-icons a {
-        font-size: 15px;
-    }
+	.author .social-icons a {
+		font-size: 15px;
+	}
 }
 
 @media (max-width: 768px) {
-    .author {
-        position: relative !important;
-    }
+	.author {
+		position: relative !important;
+	}
 }
 
 .scroll-to-top {
-    position: fixed;
-    bottom: 90px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: transform 0.3s ease, background-color 0.3s ease,
-        bottom 0.3s ease;
-}
-
-.scroll-to-top:hover {
-    background-color: #dd5900;
-    transform: scale(1.1);
-}
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
-}
-
-.scroll-to-top:hover svg {
-    transform: translateY(-5px);
-}
\ No newline at end of file
+	bottom: 90px;
+}
diff --git a/styles/game.style.css b/styles/game.style.css
index 4fbb843..25f5951 100644
--- a/styles/game.style.css
+++ b/styles/game.style.css
@@ -281,89 +281,6 @@ body {
 	z-index: -1;
 }
 
-/* Loader */
-
-#loader {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: #000;
-	width: 100%;
-	height: 100%;
-	z-index: 100000;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.spinner {
-	--size: 50px;
-	--first-block-clr: #005bba;
-	--second-block-clr: #fed500;
-	--clr: #111;
-	width: 100px;
-	height: 100px;
-	position: relative;
-}
-
-.spinner::after,
-.spinner::before {
-	box-sizing: border-box;
-	position: absolute;
-	content: "";
-	width: var(--size);
-	height: var(--size);
-	top: 50%;
-	animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
-	left: 50%;
-	background: var(--first-block-clr);
-}
-
-.spinner::after {
-	background: var(--second-block-clr);
-	top: calc(50% - var(--size));
-	left: calc(50% - var(--size));
-	animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
-}
-
-@keyframes down {
-	0%,
-	100% {
-		transform: none;
-	}
-
-	25% {
-		transform: translateX(100%);
-	}
-
-	50% {
-		transform: translateX(100%) translateY(100%);
-	}
-
-	75% {
-		transform: translateY(100%);
-	}
-}
-
-@keyframes up {
-	0%,
-	100% {
-		transform: none;
-	}
-
-	25% {
-		transform: translateX(-100%);
-	}
-
-	50% {
-		transform: translateX(-100%) translateY(-100%);
-	}
-
-	75% {
-		transform: translateY(-100%);
-	}
-}
-
 #playerSetup {
 	display: flex;
 	justify-content: center;
@@ -802,26 +719,6 @@ body {
 	opacity: 1;
 }
 
-.circle {
-	position: absolute;
-	width: 25px;
-	height: 25px;
-	border-radius: 50%;
-	pointer-events: none;
-	background: radial-gradient(circle, #ff6600, #ffb584a5);
-	transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	z-index: 99999;
-}
-
 /* Timer */
 #timer-container {
 	position: fixed;
@@ -1087,30 +984,6 @@ body {
 		opacity: 1;
 	}
 
-	.circle {
-		position: absolute;
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		pointer-events: none;
-		background: radial-gradient(
-			circle,
-			rgba(73, 232, 247, 0.466),
-			rgba(141, 38, 172, 0.5)
-		);
-		transition: transform 0.1s, left 0.1s, top 0.1s;
-	}
-
-	.circle-container {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-		z-index: 99999;
-	}
-
 	/* Timer */
 	#timer-container {
 		position: fixed;
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..54c6a46
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,167 @@
+.circle {
+	position: absolute;
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	pointer-events: none;
+	background: radial-gradient(circle, #ff6600, #ffb584a5);
+	transition: transform 0.1s, left 0.1s, top 0.1s;
+}
+
+.circle-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 9999;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+::-webkit-scrollbar-thumb {
+	background-color: rgba(231, 181, 55, 0.979);
+	border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+	.circle-container {
+		display: none;
+	}
+}
+
+.scroll-to-top {
+	position: fixed;
+	bottom: 30px;
+	left: 30px;
+	width: 50px;
+	height: 50px;
+	background: radial-gradient(circle, #ff7920, #dd5900);
+	color: white;
+	text-align: center;
+	line-height: 50px;
+	font-size: 24px;
+	border-radius: 50%;
+	cursor: pointer;
+	display: none;
+	z-index: 1000;
+	transition: transform 0.3s ease, background-color 0.3s ease, bottom 0.3s ease;
+}
+
+.scroll-to-top:hover {
+	background-color: #dd5900;
+	transform: scale(1.1);
+	bottom: 35px;
+}
+
+.scroll-to-top svg {
+	vertical-align: middle;
+	fill: white;
+	transition: transform 0.3s ease;
+	margin-bottom: 10px;
+}
+
+.scroll-to-top:hover svg {
+	transform: translateY(-5px);
+}
+
+.back-button {
+	display: inline-block;
+	padding: 6px 16px;
+	background-color: rgb(255, 120, 30);
+	color: white;
+	text-decoration: none;
+	font-size: 16px;
+	border-radius: 5px;
+	border: none;
+	transition: background-color 0.3s, transform 0.3s;
+}
+
+.back-button:hover {
+	background-color: rgb(236, 94, 0);
+	transform: scale(1.1);
+}
+
+/* Loader */
+#loader {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: #000;
+	width: 100%;
+	height: 100%;
+	z-index: 100000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.spinner {
+	--size: 50px;
+	--first-block-clr: #005bba;
+	--second-block-clr: #fed500;
+	--clr: #111;
+	width: 100px;
+	height: 100px;
+	position: relative;
+}
+
+.spinner::after,
+.spinner::before {
+	box-sizing: border-box;
+	position: absolute;
+	content: "";
+	width: var(--size);
+	height: var(--size);
+	top: 50%;
+	animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+	left: 50%;
+	background: var(--first-block-clr);
+}
+
+.spinner::after {
+	background: var(--second-block-clr);
+	top: calc(50% - var(--size));
+	left: calc(50% - var(--size));
+	animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
+}
+
+@keyframes down {
+	0%,
+	100% {
+		transform: none;
+	}
+
+	25% {
+		transform: translateX(100%);
+	}
+
+	50% {
+		transform: translateX(100%) translateY(100%);
+	}
+
+	75% {
+		transform: translateY(100%);
+	}
+}
+
+@keyframes up {
+	0%,
+	100% {
+		transform: none;
+	}
+
+	25% {
+		transform: translateX(-100%);
+	}
+
+	50% {
+		transform: translateX(-100%) translateY(-100%);
+	}
+
+	75% {
+		transform: translateY(-100%);
+	}
+}
diff --git a/styles/howtoplay.css b/styles/howtoplay.css
index 5b725da..5d08a12 100644
--- a/styles/howtoplay.css
+++ b/styles/howtoplay.css
@@ -1,283 +1,216 @@
 body {
-    font-family: 'Press Start 2P', cursive;
-    background-color: #ffe285;
-    margin: 0;
-    padding: 0;
-    color: #333;
-    overflow-x: hidden;
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: rgba(231, 181, 55, 0.979);
-    border-radius: 15px;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
+	font-family: "Press Start 2P", cursive;
+	background-color: #ffe285;
+	margin: 0;
+	padding: 0;
+	color: #333;
+	overflow-x: hidden;
 }
 
 .navbar-toggler {
-    background-color: transparent;
-    border: none;
+	background-color: transparent;
+	border: none;
 }
 
 .navbar-toggler .toggler-icon {
-    width: 30px;
-    height: 2px;
-    background-color: #fff;
-    display: block;
-    margin: 5px 0;
-    position: relative;
-    -webkit-transition: all 0.3s ease-out 0s;
-    -moz-transition: all 0.3s ease-out 0s;
-    -ms-transition: all 0.3s ease-out 0s;
-    -o-transition: all 0.3s ease-out 0s;
-    transition: all 0.3s ease-out 0s;
-}
-.scroll-to-top {
-    position: fixed;
-    bottom: 30px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: transform 0.3s ease, background-color 0.3s ease,
-        bottom 0.3s ease;
-}
-
-.scroll-to-top:hover {
-    background-color: #dd5900;
-    transform: scale(1.1);
-    bottom: 35px;
-}
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
-}
-
-.scroll-to-top:hover svg {
-    transform: translateY(-5px);
+	width: 30px;
+	height: 2px;
+	background-color: #fff;
+	display: block;
+	margin: 5px 0;
+	position: relative;
+	-webkit-transition: all 0.3s ease-out 0s;
+	-moz-transition: all 0.3s ease-out 0s;
+	-ms-transition: all 0.3s ease-out 0s;
+	-o-transition: all 0.3s ease-out 0s;
+	transition: all 0.3s ease-out 0s;
 }
 
 .instructions-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    max-width: 65%;
-    margin: auto;
-    padding: 20px;
-    background: linear-gradient(to top, rgba(254, 187, 17, 0.78), rgb(247, 242, 101));
-    border-radius: 10px;
-    box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829);
-    text-align: left;
-    line-height: 1.6;
-    padding-bottom: 100px;
-    margin-top: 20px;
-    margin-bottom: 40px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	max-width: 65%;
+	margin: auto;
+	padding: 20px;
+	background: linear-gradient(
+		to top,
+		rgba(254, 187, 17, 0.78),
+		rgb(247, 242, 101)
+	);
+	border-radius: 10px;
+	box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829);
+	text-align: left;
+	line-height: 1.6;
+	padding-bottom: 100px;
+	margin-top: 20px;
+	margin-bottom: 40px;
 }
 
 .instructions-container h1 {
-    margin-bottom: 20px;
-    color: #25254a;
-    font-size: 30px;
+	margin-bottom: 20px;
+	color: #25254a;
+	font-size: 30px;
 }
 
 .instructions-container p,
 .instructions-container li {
-    font-size: 17px;
-    margin-bottom: 15px;
-    list-style-type: none;
+	font-size: 17px;
+	margin-bottom: 15px;
+	list-style-type: none;
 }
 
 .instructions-container ol {
-    padding-left: 10px;
-
+	padding-left: 10px;
 }
 
-.instructions-container strong{
-    color: #25254a;
-    font-size: 22px;
-    text-decoration: underline;
+.instructions-container strong {
+	color: #25254a;
+	font-size: 22px;
+	text-decoration: underline;
 }
 
 .instructions-container ol strong {
-    font-weight: 800;
+	font-weight: 800;
 }
 
-.heading2{
-    font-size: 29px;
-    text-align: center;
+.heading2 {
+	font-size: 29px;
+	text-align: center;
 }
 
 .gameplay-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    margin-top: 2px;
-    padding: 8px;
-    border-radius: 15px;
-    font-family: 'Press Start 2P', cursive;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10px;
+	margin-top: 2px;
+	padding: 8px;
+	border-radius: 15px;
+	font-family: "Press Start 2P", cursive;
 }
 
 .gameplay-item {
-    display: flex;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 15px;
-    border-radius: 10px;
-    width: 100%;
-    max-width: 800px;
-    transition: transform 0.2s;
+	display: flex;
+	align-items: center;
+	background: rgba(255, 255, 255, 0.1);
+	padding: 15px;
+	border-radius: 10px;
+	width: 100%;
+	max-width: 800px;
+	transition: transform 0.2s;
 }
 
 .gameplay-item:hover {
-    transform: scale(1.05);
+	transform: scale(1.05);
 }
 
 .gameplay-icon {
-    font-size: 30px;
-    margin-right: 15px;
+	font-size: 30px;
+	margin-right: 15px;
 }
 
 .gameplay-text {
-    margin: 0;
-    font-size: 15px;
-    flex: 1;
+	margin: 0;
+	font-size: 15px;
+	flex: 1;
 }
 
 @media (max-width: 767px) {
-    
-    .instructions-container{
-        max-width: 65%;
-    }
-    .gameplay-item {
-        flex-direction: column;
-        align-items: flex-start;
-    }
+	.instructions-container {
+		max-width: 65%;
+	}
+	.gameplay-item {
+		flex-direction: column;
+		align-items: flex-start;
+	}
 
-    .gameplay-icon {
-        margin-bottom: 10px;
-    }
+	.gameplay-icon {
+		margin-bottom: 10px;
+	}
 }
 
 @media (max-width: 640px) {
-
-    .instructions-container{
-        max-width: 65%;
-    }
-    .gameplay-item {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .gameplay-icon {
-        margin-bottom: 10px;
-    }
-}
-
-
-.home{
-    font-family: 'Press Start 2P',cursive;
-    display: inline-block;
-    cursor: pointer;
-    margin-top: 30px;
-    padding: 12px 5px;
-    background: #ff6933;
-    color: #fff;
-    margin: 0 25%;
-    text-align: center;
-    border-radius: 50px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-}
-.home:hover{
-    background-color: #d23d07;
-}
-
-.home span{
-    font-size: 28px;
+	.instructions-container {
+		max-width: 65%;
+	}
+	.gameplay-item {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.gameplay-icon {
+		margin-bottom: 10px;
+	}
+}
+
+.home {
+	font-family: "Press Start 2P", cursive;
+	display: inline-block;
+	cursor: pointer;
+	margin-top: 30px;
+	padding: 12px 5px;
+	background: #ff6933;
+	color: #fff;
+	margin: 0 25%;
+	text-align: center;
+	border-radius: 50px;
+	text-decoration: none;
+	font-weight: bold;
+	transition: all 0.3s ease;
+	text-transform: uppercase;
+}
+.home:hover {
+	background-color: #d23d07;
+}
+
+.home span {
+	font-size: 28px;
 }
 
 @media (max-width: 767px) {
-    .instructions-container {
-        max-width: 90%;
-        padding: 15px 25px;
-        line-height: 1.5;
-    }
+	.instructions-container {
+		max-width: 90%;
+		padding: 15px 25px;
+		line-height: 1.5;
+	}
 }
 
 .tutorial-video {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 20px 0;
-    border-radius: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 20px 0;
+	border-radius: 10px;
 }
 
 .tutorial-video video {
-    width: 70%;
-    border-radius: 10px;
+	width: 70%;
+	border-radius: 10px;
 }
 
 .nav-links {
-    letter-spacing: 4px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    list-style: none;
-    width: 50%;
-    padding: 0;
-    color: white;
-    font-family: inherit;
+	letter-spacing: 4px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	list-style: none;
+	width: 50%;
+	padding: 0;
+	color: white;
+	font-family: inherit;
 }
 
 .nav-links li a,
 .logo a {
-    color: white;
+	color: white;
 }
 
 button a {
-    background-color: transparent;
+	background-color: transparent;
 }
 
 .start {
-    padding: 10px 5px;
-    border-radius: 5px;
-}
\ No newline at end of file
+	padding: 10px 5px;
+	border-radius: 5px;
+}
diff --git a/styles/licensing.css b/styles/licensing.css
index fc2d9da..c3fd463 100644
--- a/styles/licensing.css
+++ b/styles/licensing.css
@@ -1,279 +1,135 @@
 body {
-    font-family: 'Press Start 2P', cursive;
-    background-color: #ffd700;
-    margin: 0;
-    padding: 0;
-    color: #333;
-    overflow-x: hidden;
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(231, 181, 55, 0.979);
-    border-radius: 15px;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
-}
-
-.scroll-to-top {
-    position: fixed;
-    bottom: 30px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: transform 0.3s ease, background-color 0.3s ease,
-        bottom 0.3s ease;
-}
-
-.scroll-to-top:hover {
-    background-color: #dd5900;
-    transform: scale(1.1);
-    bottom: 35px;
-}
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
-}
-
-.scroll-to-top:hover svg {
-    transform: translateY(-5px);
-}
-
-.back-button {
-    display: inline-block;
-    padding: 6px 16px;
-    background-color: rgb(255, 120, 30);
-    color: white;
-    text-decoration: none;
-    font-size: 16px;
-    border-radius: 5px;
-    border: none;
-    transition: background-color 0.3s, transform 0.3s;
-}
-
-.back-button:hover {
-    background-color: rgb(236, 94, 0);
-    transform: scale(1.1);
+	font-family: "Press Start 2P", cursive;
+	background-color: #ffd700;
+	margin: 0;
+	padding: 0;
+	color: #333;
+	overflow-x: hidden;
 }
 
 .video-container {
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-    text-align: center;
+	width: 100%;
+	height: auto;
+	overflow: hidden;
+	text-align: center;
 }
 
 .video {
-    width: 100%;
-    height: auto;
-}
-
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-.header {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.title {
-    font-size: 2em;
-    margin-bottom: 20px;
-}
-
-.section {
-    margin-bottom: 20px;
-}
-
-.section-title {
-    font-size: 1.5em;
-    margin-bottom: 10px;
-}
-
-.section-content {
-    font-size: 1em;
-    line-height: 1.6;
-}
-
-pre {
-    padding: 10px;
-    border-radius: 5px;
-    overflow-x: auto;
+	width: 100%;
+	height: auto;
 }
 
 @media (max-width: 768px) {
-    .title {
-        font-size: 1.5em;
-    }
+	.title {
+		font-size: 1.5em;
+	}
 
-    .section-title {
-        font-size: 1.2em;
-    }
+	.section-title {
+		font-size: 1.2em;
+	}
 
-    .section-content {
-        font-size: 0.9em;
-    }
+	.section-content {
+		font-size: 0.9em;
+	}
 
-    .back-button {
-        font-size: 14px;
-        padding: 5px 14px;
-    }
+	.back-button {
+		font-size: 14px;
+		padding: 5px 14px;
+	}
 
-    .container {
-        padding: 11px;
-        max-width: 100vw;
-    }
+	.container {
+		padding: 11px;
+		max-width: 100vw;
+	}
 }
 
 .container {
-    max-width: 80%;
-    margin: 50px auto;
-    padding: 20px;
-    background: linear-gradient(45deg, #ffc400, #ff8c00);
-    border-radius: 15px;
-    box-shadow: 0 0 20px #ff6600;
-    text-align: left;
-    line-height: 1.6;
+	max-width: 80%;
+	margin: 50px auto;
+	padding: 20px;
+	background: linear-gradient(45deg, #ffc400, #ff8c00);
+	border-radius: 15px;
+	box-shadow: 0 0 20px #ff6600;
+	text-align: left;
+	line-height: 1.6;
 }
 
 .header {
-    text-align: center;
-    margin-bottom: 30px;
+	text-align: center;
+	margin-bottom: 30px;
 }
 
 .title {
-    color: #d9ff00;
-    font-size: 48px;
-    text-shadow: 3px 3px #ffe066;
-    animation: glow 2s ease-in-out infinite alternate;
+	color: #d9ff00;
+	font-size: 48px;
+	text-shadow: 3px 3px #ffe066;
+	animation: glow 2s ease-in-out infinite alternate;
 }
 
 @keyframes glow {
-    from {
-        text-shadow: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 15px #ff6600;
-    }
-    to {
-        text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600;
-    }
+	from {
+		text-shadow: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 15px #ff6600;
+	}
+	to {
+		text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600;
+	}
 }
 
 .main-content {
-    text-align: left;
+	text-align: left;
 }
 
 .section {
-    margin-bottom: 30px;
-    padding: 20px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
-    transition: transform 0.3s ease;
+	margin-bottom: 30px;
+	padding: 20px;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 10px;
+	transition: transform 0.3s ease;
 }
 
 .section:hover {
-    transform: scale(1.03);
+	transform: scale(1.03);
 }
 
 .section-title {
-    color: #ff4500;
-    font-size: 24px;
-    margin-bottom: 15px;
-    text-transform: uppercase;
+	color: #ff4500;
+	font-size: 24px;
+	margin-bottom: 15px;
+	text-transform: uppercase;
 }
 
 .section-content,
 .list-item {
-    margin-bottom: 15px;
-    font-size: 14px;
-    color: #4d2600;
+	margin-bottom: 15px;
+	font-size: 14px;
+	color: #4d2600;
 }
 
 pre {
-    background-color: #ffe066;
-    color: #4d2600;
-    padding: 15px;
-    border-radius: 8px;
-    overflow-x: auto;
-    font-family: 'Courier New', monospace;
-}
-
-.back-btn {
-    display: inline-block;
-    margin-top: 30px;
-    padding: 15px 30px;
-    background: #ff4500;
-    color: #fff;
-    text-align: center;
-    border-radius: 50px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-}
-
-.back-btn:hover {
-    background: #ff8c00;
-    color: #4d2600;
-    transform: scale(1.1);
+	background-color: #ffe066;
+	color: #4d2600;
+	padding: 15px;
+	border-radius: 8px;
+	overflow-x: auto;
+	font-family: "Courier New", monospace;
 }
 
 @media (max-width: 767px) {
-    .container {
-        max-width: 95%;
-        padding: 15px;
-    }
+	.container {
+		max-width: 95%;
+		padding: 15px;
+	}
 
-    .title {
-        font-size: 36px;
-    }
+	.title {
+		font-size: 36px;
+	}
 
-    .section-title {
-        font-size: 20px;
-    }
+	.section-title {
+		font-size: 20px;
+	}
 
-    .back-btn {
-        padding: 10px 20px;
-        font-size: 14px;
-    }
-}
\ No newline at end of file
+	.back-btn {
+		padding: 10px 20px;
+		font-size: 14px;
+	}
+}
diff --git a/styles/mainstyle.css b/styles/mainstyle.css
index e7fca90..e30494b 100644
--- a/styles/mainstyle.css
+++ b/styles/mainstyle.css
@@ -603,7 +603,12 @@ select {
 	margin-top: 10%;
 	flex-direction: row;
 	gap: 1rem;
-	background: linear-gradient(135deg, rgba(251, 150, 26, 0.979), rgba(255, 187, 55, 0.979), rgba(252, 132, 72, 0.979));
+	background: linear-gradient(
+		135deg,
+		rgba(251, 150, 26, 0.979),
+		rgba(255, 187, 55, 0.979),
+		rgba(252, 132, 72, 0.979)
+	);
 	border-radius: 10px;
 	padding: 10px 20px;
 	box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829);
@@ -966,86 +971,3 @@ button a {
 .hidden {
 	display: none;
 }
-
-/* Loader */
-
-#loader {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: #000;
-	width: 100%;
-	height: 100%;
-	z-index: 100000;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.spinner {
-	--size: 50px;
-	--first-block-clr: #005bba;
-	--second-block-clr: #fed500;
-	--clr: #111;
-	width: 100px;
-	height: 100px;
-	position: relative;
-}
-
-.spinner::after,
-.spinner::before {
-	box-sizing: border-box;
-	position: absolute;
-	content: "";
-	width: var(--size);
-	height: var(--size);
-	top: 50%;
-	animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
-	left: 50%;
-	background: var(--first-block-clr);
-}
-
-.spinner::after {
-	background: var(--second-block-clr);
-	top: calc(50% - var(--size));
-	left: calc(50% - var(--size));
-	animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
-}
-
-@keyframes down {
-	0%,
-	100% {
-		transform: none;
-	}
-
-	25% {
-		transform: translateX(100%);
-	}
-
-	50% {
-		transform: translateX(100%) translateY(100%);
-	}
-
-	75% {
-		transform: translateY(100%);
-	}
-}
-
-@keyframes up {
-	0%,
-	100% {
-		transform: none;
-	}
-
-	25% {
-		transform: translateX(-100%);
-	}
-
-	50% {
-		transform: translateX(-100%) translateY(-100%);
-	}
-
-	75% {
-		transform: translateY(-100%);
-	}
-}
diff --git a/styles/privacypolicy.css b/styles/privacypolicy.css
deleted file mode 100644
index 08345de..0000000
--- a/styles/privacypolicy.css
+++ /dev/null
@@ -1,249 +0,0 @@
-body {
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial', sans-serif;
-    line-height: 1.6;
-    color: #fff;
-    background: linear-gradient(135deg, #f2bf6d 0%,#eb9e18 50%, #f16b4a 100%);
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    min-height: 100vh;
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: rgba(231, 181, 55, 0.979);
-    border-radius: 15px;
-}
-::-webkit-scrollbar-track {
-    background-color: black;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
-}
-
-.scroll-to-top {
-    position: fixed;
-    bottom: 30px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: transform 0.3s ease, background-color 0.3s ease,
-        bottom 0.3s ease;
-}
-
-.scroll-to-top:hover {
-    background-color: #dd5900;
-    transform: scale(1.1);
-    bottom: 35px;
-}
-
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
-}
-
-.scroll-to-top:hover svg {
-    transform: translateY(-5px);
-}
-
-.back-button {
-    display: inline-block;
-    padding: 6px 16px;
-    background-color: rgb(255, 120, 30);
-    color: white;
-    text-decoration: none;
-    font-size: 16px;
-    border-radius: 5px;
-    border: none;
-    transition: background-color 0.3s, transform 0.3s;
-}
-
-.back-button:hover {
-    background-color: rgb(236, 94, 0);
-    transform: scale(1.1);
-}
-
-.container {
-    max-width: 800px;
-    margin: 2rem auto;
-    padding: 2rem;
-    background-color: rgba(52, 152, 219, 0.8);
-    border-radius: 20px;
-    box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
-}
-
-.header {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.title {
-    color: #f1c40f;
-    font-size: 3rem;
-    text-shadow: 3px 3px 0 #e74c3c;
-    transform: rotate(-3deg);
-    display: inline-block;
-    animation: float 3s ease-in-out infinite;
-}
-
-.section {
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background-color: rgba(231, 76, 60, 0.7);
-    border-radius: 15px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    transform: skew(-2deg);
-}
-
-.section-title {
-    color: #f39c12;
-    font-size: 1.8rem;
-    margin-bottom: 1rem;
-    border-bottom: 3px dashed #f39c12;
-    padding-bottom: 0.5rem;
-}
-
-.section-content {
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-}
-
-.section-list {
-    padding-left: 1.5rem;
-    list-style-type: none;
-}
-
-.list-item {
-    margin-bottom: 0.5rem;
-    position: relative;
-}
-
-.list-item:before {
-    content: '🎮';
-    position: absolute;
-    left: -1.5rem;
-    top: 0.2rem;
-}
-
-.back-btn {
-    display: inline-block;
-    padding: 0.8rem 1.5rem;
-    background-color: #e74c3c;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 50px;
-    transition: all 0.3s ease;
-    font-weight: bold;
-    font-size: 1.2rem;
-    border: 3px solid #f1c40f;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.back-btn:hover {
-    background-color: #f1c40f;
-    color: #e74c3c;
-    transform: scale(1.05) rotate(-5deg);
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, rgba(241, 196, 15, 0.8), rgba(231, 76, 60, 0.8));
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-.video-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
-}
-
-.video {
-    min-width: 100%;
-    min-height: 100%;
-    width: auto;
-    height: auto;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.3;
-}
-
-@media (max-width: 768px) {
-    .container {
-        margin: 1rem;
-        padding: 1rem;
-    }
-
-    .title {
-        font-size: 2.5rem;
-    }
-
-    .section-title {
-        font-size: 1.5rem;
-    }
-
-    .circle-container {
-        display: none;
-    }
-}
-
-@keyframes float {
-    0% { transform: translateY(0px) rotate(-3deg); }
-    50% { transform: translateY(-10px) rotate(-3deg); }
-    100% { transform: translateY(0px) rotate(-3deg); }
-}
\ No newline at end of file
diff --git a/styles/termsofservice.css b/styles/termsofservice.css
index d1b2c26..b977d16 100644
--- a/styles/termsofservice.css
+++ b/styles/termsofservice.css
@@ -1,249 +1,125 @@
 body {
-    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial', sans-serif;
-    line-height: 1.6;
-    color: #fff;
-    background: linear-gradient(135deg, #f2bf6d 0%,#eb9e18 50%, #f16b4a 100%);
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    min-height: 100vh;
-
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, #ff6600, #ffb584a5);
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
-}
-
-::-webkit-scrollbar {
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: rgba(231, 181, 55, 0.979);
-    border-radius: 15px;
-}
-
-@media (max-width: 768px) {
-    .circle-container {
-        display: none;
-    }
-}
-
-.scroll-to-top {
-    position: fixed;
-    bottom: 30px;
-    left: 30px;
-    width: 50px;
-    height: 50px;
-    background: radial-gradient(circle, #ff7920, #dd5900);
-    color: white;
-    text-align: center;
-    line-height: 50px;
-    font-size: 24px;
-    border-radius: 50%;
-    cursor: pointer;
-    display: none;
-    z-index: 1000;
-    transition: transform 0.3s ease, background-color 0.3s ease,
-        bottom 0.3s ease;
-}
-
-.scroll-to-top:hover {
-    background-color: #dd5900;
-    transform: scale(1.1);
-    bottom: 35px;
-}
-.scroll-to-top svg {
-    vertical-align: middle;
-    fill: white;
-    transition: transform 0.3s ease;
-    margin-bottom: 10px;
-}
-
-.scroll-to-top:hover svg {
-    transform: translateY(-5px);
+	font-family: "Comic Sans MS", "Chalkboard SE", "Arial", sans-serif;
+	line-height: 1.6;
+	color: #fff;
+	background: linear-gradient(135deg, #f2bf6d 0%, #eb9e18 50%, #f16b4a 100%);
+	margin: 0;
+	padding: 0;
+	overflow-x: hidden;
+	min-height: 100vh;
 }
 
-.back-button {
-    display: inline-block;
-    padding: 6px 16px;
-    background-color: rgb(255, 120, 30);
-    color: white;
-    text-decoration: none;
-    font-size: 16px;
-    border-radius: 5px;
-    border: none;
-    transition: background-color 0.3s, transform 0.3s;
-}
-
-.back-button:hover {
-    background-color: rgb(236, 94, 0);
-    transform: scale(1.1);
+.header {
+	text-align: center;
+	margin-bottom: 2rem;
 }
 
 .container {
-    max-width: 900px;
-    margin: 2rem auto;
-    padding: 2rem;
-    background-color: rgba(52, 152, 219, 0.8);
-    border-radius: 20px;
-    box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
-}
-
-.header {
-    text-align: center;
-    margin-bottom: 2rem;
+	max-width: 900px;
+	margin: 2rem auto;
+	padding: 2rem;
+	background-color: rgba(52, 152, 219, 0.8);
+	border-radius: 20px;
+	box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
 }
 
 .title {
-    color: #f1c40f;
-    font-size: 3rem;
-    text-shadow: 3px 3px 0 #e74c3c;
-    transform: rotate(-3deg);
-    display: inline-block;
-    animation: float 3s ease-in-out infinite;
+	color: #f1c40f;
+	font-size: 3rem;
+	text-shadow: 3px 3px 0 #e74c3c;
+	transform: rotate(-3deg);
+	display: inline-block;
+	animation: float 3s ease-in-out infinite;
 }
 
 .section {
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background-color: rgba(231, 76, 60, 0.7);
-    border-radius: 15px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-    transform: skew(-2deg);
+	margin-bottom: 2rem;
+	padding: 1.5rem;
+	background-color: rgba(231, 76, 60, 0.7);
+	border-radius: 15px;
+	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+	transform: skew(-2deg);
 }
 
 .section-title {
-    color: #f39c12;
-    font-size: 1.8rem;
-    margin-bottom: 1rem;
-    border-bottom: 3px dashed #f39c12;
-    padding-bottom: 0.5rem;
+	color: #f39c12;
+	font-size: 1.8rem;
+	margin-bottom: 1rem;
+	border-bottom: 3px dashed #f39c12;
+	padding-bottom: 0.5rem;
 }
 
 .section-content {
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
+	margin-bottom: 1rem;
+	font-size: 1.1rem;
 }
 
 .section-list {
-    padding-left: 1.5rem;
-    list-style-type: none;
+	padding-left: 1.5rem;
+	list-style-type: none;
 }
 
 .list-item {
-    margin-bottom: 0.5rem;
-    position: relative;
+	margin-bottom: 0.5rem;
+	position: relative;
 }
 
 .list-item:before {
-    content: '🎮';
-    position: absolute;
-    left: -1.5rem;
-    top: 0.2rem;
-}
-
-.back-btn {
-    display: inline-block;
-    padding: 0.8rem 1.5rem;
-    background-color: #e74c3c;
-    color: #fff;
-    text-decoration: none;
-    border-radius: 50px;
-    transition: all 0.3s ease;
-    font-weight: bold;
-    font-size: 1.2rem;
-    border: 3px solid #f1c40f;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-.back-btn:hover {
-    background-color: #f1c40f;
-    color: #e74c3c;
-    transform: scale(1.05) rotate(-5deg
-    );
-}
-
-.circle {
-    position: absolute;
-    width: 25px;
-    height: 25px;
-
-    border-radius: 50%;
-    pointer-events: none;
-    background: radial-gradient(circle, rgba(0, 225, 246, 0.8), rgba(224, 55, 36, 0.8));
-    transition: transform 0.1s, left 0.1s, top 0.1s;
-}
-
-.circle-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    z-index: 9999;
+	content: "🎮";
+	position: absolute;
+	left: -1.5rem;
+	top: 0.2rem;
 }
 
 .video-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    overflow: hidden;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	overflow: hidden;
 }
 
 .video {
-    min-width: 100%;
-    min-height: 100%;
-    width: auto;
-    height: auto;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    opacity: 0.3;
+	min-width: 100%;
+	min-height: 100%;
+	width: auto;
+	height: auto;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0.3;
 }
 
 @media (max-width: 768px) {
-    .container {
+	.container {
+		margin: 1rem;
+		padding: 1rem;
+	}
 
-        margin: 1rem;
-        padding: 1rem;
-    }
+	.title {
+		font-size: 2.5rem;
+	}
 
-    .title {
-        font-size: 2.5rem;
-    }
+	.section-title {
+		font-size: 1.5rem;
+	}
 
-    .section-title {
-        font-size: 1.5rem;
-    }
-
-    .circle-container {
-        display: none;
-    }
+	.circle-container {
+		display: none;
+	}
 }
 
 @keyframes float {
-    0% { transform: translateY(0px) rotate(-3deg); }
-    50% { transform: translateY(-10px) rotate(-3deg); }
-    100% { transform: translateY(0px) rotate(-3deg); }
-}
\ No newline at end of file
+	0% {
+		transform: translateY(0px) rotate(-3deg);
+	}
+	50% {
+		transform: translateY(-10px) rotate(-3deg);
+	}
+	100% {
+		transform: translateY(0px) rotate(-3deg);
+	}
+}
