Successfully implemented attractive scroll bar and changed font family of all website

Alien.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 /* Theme Variables */
 :root {
   /* Light Theme Colors */
@@ -23,11 +24,33 @@
   --border-dark: #2d2d3a;
 
   /* Common Variables */
-  --game-font: "Roboto", sans-serif;
+  --game-font : "Bruno Ace SC", sans-serif;
   /* Updated to 'Roboto' */
   --transition-speed: 0.3s;
 }
 
+/* Custom Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: #e0e0e0; /* Light background for the track */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #007bff, #ff66cc); /* Diagonal gradient from blue to pink */
+  border-radius: 10px;
+  border: 3px solid #e0e0e0; /* Contrast border */
+  box-shadow: 0 0 8px rgba(255, 102, 204, 0.7); /* Soft glow around thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, #0066ff, #ff4db8); /* Darker gradient on hover */
+  box-shadow: 0 0 12px rgba(0, 123, 255, 0.7), 0 0 12px rgba(255, 102, 204, 0.7); /* Intensified glow on hover */
+}
+
 /* Base Styles */
 body {
   margin: 0;
@@ -83,7 +106,8 @@ body.dark-theme {
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
-  position: absolute;
+  /* position: absolute; */
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
@@ -127,7 +151,8 @@ body:not(.dark-theme) .navbar a {
 
 /* Responsive Navbar Styling */
 .navbar .faq-btn {
-  font-size: 0.8em;
+  font-size: 1em;
+  font-weight: bolder;
   padding: 10px 20px;
   margin: 5px;
 }
@@ -375,6 +400,8 @@ body:not(.dark-theme) #congratsPopup.show {
 
 /* Buttons */
 button {
+  font-size: 1em;
+  font-weight: bolder;
   padding: 10px 20px;
   border-radius:  4px;
   cursor: pointer;

Contributors/contributor.css

@@ -1,8 +1,30 @@
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 *{
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: "Bruno Ace", sans-serif;
   margin: 0;
   padding: 0;
 }
+/* Custom Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: #e0e0e0; /* Light background for the track */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #007bff, #ff66cc); /* Diagonal gradient from blue to pink */
+  border-radius: 10px;
+  border: 3px solid #e0e0e0; /* Contrast border */
+  box-shadow: 0 0 8px rgba(255, 102, 204, 0.7); /* Soft glow around thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, #0066ff, #ff4db8); /* Darker gradient on hover */
+  box-shadow: 0 0 12px rgba(0, 123, 255, 0.7), 0 0 12px rgba(255, 102, 204, 0.7); /* Intensified glow on hover */
+}
 
 .container {
   text-align: center;

Login_and_Signup/style.css

@@ -1,10 +1,10 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: 'Poppins', sans-serif;
+  font-family: "Bruno Ace", sans-serif;
 }
 
 body {

contributors.css

@@ -1,5 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 *{
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-family: "Bruno Ace", sans-serif;
     margin: 0;
     padding: 0;
   }

donation_page.html

@@ -8,6 +8,9 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <style>
 
 
@@ -18,6 +21,7 @@
 
 cursor: none; /* Hide the default cursor */
 
+
 }
 
 /* Cursor Tail Effect - the small dots trailing behind */
@@ -103,8 +107,29 @@
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        font-family: "Arial", sans-serif;
+        font-family: "Bruno Ace", sans-serif;
       }
+      /* Custom Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: #e0e0e0; /* Light background for the track */
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #007bff, #ff66cc); /* Diagonal gradient from blue to pink */
+  border-radius: 10px;
+  border: 3px solid #e0e0e0; /* Contrast border */
+  box-shadow: 0 0 8px rgba(255, 102, 204, 0.7); /* Soft glow around thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, #0066ff, #ff4db8); /* Darker gradient on hover */
+  box-shadow: 0 0 12px rgba(0, 123, 255, 0.7), 0 0 12px rgba(255, 102, 204, 0.7); /* Intensified glow on hover */
+}
 
       body {
         background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

index.html

@@ -27,8 +27,9 @@
 
     <link rel="icon" href="favicon.png" type="image/x-icon">
     <title>Alien Invasion Defense</title>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="Alien.css">
 
     <link rel="manifest" href="/manifest.json">
@@ -99,7 +100,7 @@
         body {
 
 
-            font-family: Arial, sans-serif;
+            font-family: "Bruno Ace", sans-serif;
         }
 
 

login.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 
 * {
   margin: 0;
@@ -8,7 +8,7 @@
 
 body,
 input {
-  font-family: "Poppins", sans-serif;
+  font-family: "Bruno Ace", sans-serif;
 }
 
 .container {

login/login.css

@@ -1,5 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: "Bruno Ace", sans-serif;
     background: linear-gradient(135deg, #2d0232, #0d0722);
     margin: 0;
     padding: 0;

share_score.html

@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bruno+Ace&family=Bruno+Ace+SC&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <title>Share Your Score</title>
     <style>
       /*basic styling */
@@ -17,7 +20,7 @@
         align-items: center;
         flex-direction: column;
         height: 100vh;
-        font-family: Arial, sans-serif;
+        font-family: "Bruno Ace", sans-serif;
         background-color: #121212;
         color: #ffffff;
         text-align: center;