From bd8f2d015c239ced3a948261a190f7bec58db270 Mon Sep 17 00:00:00 2001
From: Ridhima10 <ridhimajain862@gmail.com>
Date: Tue, 6 Aug 2024 19:08:54 +0530
Subject: [PATCH 1/2] fixe navlinks in smaller screens

---
 public/css/styles.css  | 15 +++++++++++----
 server/views/index.ejs |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index e97e3cd..7fac722 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -3,6 +3,8 @@
 /* Importing Google Fonts - Poppins with different font weights. */
 @import url("https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap");
 
+
+
 html {
   user-select: none;
   scroll-behavior: smooth;
@@ -219,7 +221,8 @@ a {
 /* Styling for the logo in the navigation bar. */
 
 .nav .nav-links {
-  column-gap: 20px;
+  /* margin: 0 1rem; */
+  /* column-gap: 20px; */
   list-style: none;
 }
 
@@ -227,7 +230,7 @@ a {
 
 .nav .nav-links a {
   transition: all 0.2s linear;
-  /* font-size: 15px; */
+  font-size: 14px;
   /* font-family: "Silkscreen", sans-serif; */
   /* font-weight: 400; */
   /* font-style: normal;  */
@@ -892,7 +895,7 @@ h3 {
     top: 0;
     left: -100%;
     height: 100%;
-    max-width: 280px;
+    /* max-width: 280px; */
     width: 100%;
     padding-top: 100px;
     row-gap: 30px;
@@ -1014,7 +1017,11 @@ h3 {
     height: 0.875rem;
   }
 }
-
+/* @media screen and (max-width: 1024px) {
+.nav-links{
+  display: none;
+}
+} */
 @media screen and (min-width: 48rem) {
   .remodal {
     padding-top: 4.5rem;
diff --git a/server/views/index.ejs b/server/views/index.ejs
index 7aca971..0513ba2 100644
--- a/server/views/index.ejs
+++ b/server/views/index.ejs
@@ -226,7 +226,7 @@
     .nav__actions {
       display: flex;
       align-items: center;
-      column-gap: 1rem;
+      /* column-gap: 1rem; */
     }
 
     .nav__search,
@@ -346,7 +346,7 @@
     @media screen and (min-width: 900px) {
       .nav {
         height: calc(var(--header-height) + 2rem);
-        column-gap: 3rem;
+        /* column-gap: 3rem; */
       }
 
       .nav__close,

From 2a360c42f0026a05bed80291553eb379bbf8ae8c Mon Sep 17 00:00:00 2001
From: Ridhima10 <ridhimajain862@gmail.com>
Date: Tue, 6 Aug 2024 19:22:23 +0530
Subject: [PATCH 2/2] fixe gif spacing

---
 public/css/styles.css  |  248 +++----
 server/views/index.ejs | 1547 ++++++++++++++++++++--------------------
 2 files changed, 910 insertions(+), 885 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 7fac722..7dc801c 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -118,6 +118,7 @@ body {
   height: 5rem;
   z-index: 1000;
 }
+
 /* cursor */
 .circle {
   z-index: 10000;
@@ -139,6 +140,7 @@ body {
   transform: translate(-30%, -30%);
   border-radius: 50%;
 }
+
 /* navigation bar font size transition styling*/
 
 /* navigation bar hover styling*/
@@ -153,9 +155,11 @@ body {
   position: relative;
   top: 0.7rem;
 }
+
 .links-hover:hover::after {
   width: 50%;
 }
+
 .links-hover:hover {
   color: rgb(204, 22, 198) !important;
   text-shadow: 0.1em 0.1em 0 hsl(200 50% 30%) !important;
@@ -163,6 +167,7 @@ body {
   font-weight: bold;
   text-align: start;
 }
+
 .links-hover-currentpage {
   color: rgb(204, 22, 198) !important;
   text-shadow: 0.1em 0.1em 0 hsl(200 50% 30%) !important;
@@ -170,6 +175,7 @@ body {
   font-weight: bold;
   text-align: start;
 }
+
 .links-hover-currentpage::after {
   content: "";
   display: block;
@@ -467,60 +473,77 @@ body {
   height: 40px;
   margin-bottom: 10px;
   background-size: cover;
-  transition: transform 0.4s ease; /* Slower transition duration */
+  transition: transform 0.4s ease;
+  /* Slower transition duration */
 }
+
 .social-links {
-  font-size: 2rem; /* Adjust initial size here */
+  font-size: 2rem;
+  /* Adjust initial size here */
 }
+
 .small-screen-social {
   display: none;
 }
+
 .social-links {
   display: flex;
   gap: 15px;
 }
+
 /* Hover effects */
 .social-links a:hover {
-  transform: scale(1.2); /* Slightly enlarge icon on hover */
+  transform: scale(1.2);
+  /* Slightly enlarge icon on hover */
 }
 
 .social-links .fa-google:hover {
-  color: #ea4335; /* Google color */
+  color: #ea4335;
+  /* Google color */
 }
 
 .social-links .fa-linkedin:hover {
-  color: #0a66c2; /* LinkedIn color */
+  color: #0a66c2;
+  /* LinkedIn color */
 }
 
 .social-links .fa-discord:hover {
-  color: #5865f2; /* Discord color */
+  color: #5865f2;
+  /* Discord color */
 }
 
 .social-links .fa-medium:hover {
-  color: #02b875; /* Medium color */
+  color: #02b875;
+  /* Medium color */
 }
 
 .social-links .fa-instagram:hover {
-  color: #c32aa3; /* Instagram color */
+  color: #c32aa3;
+  /* Instagram color */
 }
+
 .social-icon {
   width: 40px;
   height: 40px;
   background-size: contain;
   background-repeat: no-repeat;
 }
+
 .footer-column {
   position: absolute;
   bottom: 3rem;
   right: 8rem;
 }
+
 .social-links a {
   margin-top: 1rem;
 }
+
 .gmail-icon {
   position: relative;
   top: -5px;
 }
+
 .youtube {
   background-image: url("https://cdn-icons-png.flaticon.com/128/3670/3670147.png");
 }
@@ -540,9 +563,11 @@ body {
 .instagram {
   background-image: url("https://cdn-icons-png.flaticon.com/128/3955/3955024.png");
 }
+
 .discord {
   background-image: url("https://cdn.discordapp.com/brand/logos/Discord_Logo_Color.png");
 }
+
 /* Toggler button styles */
 .toggler {
   display: block;
@@ -556,7 +581,8 @@ body {
   font-size: 20px;
   line-height: 40px;
   text-align: center;
-  transition: transform 0.4s ease, background 0.4s ease; /* Slower transition duration */
+  transition: transform 0.4s ease, background 0.4s ease;
+  /* Slower transition duration */
   border-radius: 15px;
 }
 
@@ -564,7 +590,8 @@ body {
 .social-icons .social-icon {
   display: none;
   transform: translateX(-100%);
-  transition: transform 0.7s ease; /* Slower transition duration */
+  transition: transform 0.7s ease;
+  /* Slower transition duration */
 }
 
 /* Show social icons when toggled */
@@ -572,6 +599,7 @@ body {
   display: block;
   transform: translateX(0);
 }
+
 .social-icons.show-icons .social-icon:hover {
   transform: scale(1.4);
 }
@@ -597,12 +625,10 @@ body {
 }
 
 .toggler:hover {
-  background: linear-gradient(
-    135deg,
-    rgb(64, 176, 228),
-    rgb(87, 43, 190),
-    rgb(223, 8, 212)
-  );
+  background: linear-gradient(135deg,
+      rgb(64, 176, 228),
+      rgb(87, 43, 190),
+      rgb(223, 8, 212));
 }
 
 .social-icon:hover {
@@ -830,6 +856,7 @@ h3 {
   position: relative;
   top: 0.7rem;
 }
+
 .border-hover::after {
   width: 15%;
 }
@@ -971,6 +998,7 @@ h3 {
 }
 
 @media screen and (min-width: 48rem) {
+
   h2,
   h3,
   .h6 {
@@ -1017,6 +1045,7 @@ h3 {
     height: 0.875rem;
   }
 }
+
 /* @media screen and (max-width: 1024px) {
 .nav-links{
   display: none;
@@ -1051,8 +1080,7 @@ h3 {
   cursor: pointer;
   position: absolute;
   transition: opacity 0.3s ease;
-  background: url(https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_close_dark-c7c6a31cb37c841e14b44a8c1a7b5e81447b9442d94fdea8bcf66cfea18d1a13.svg)
-    no-repeat center;
+  background: url(https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_close_dark-c7c6a31cb37c841e14b44a8c1a7b5e81447b9442d94fdea8bcf66cfea18d1a13.svg) no-repeat center;
 }
 
 .remodal-close:hover {
@@ -1076,9 +1104,12 @@ h3 {
 } */
 
 .avatar-img {
-  width: 42px; /* Adjust the size as needed */
-  height: 42px; /* Adjust the size as needed */
-  border-radius: 50%; /* Make the image round */
+  width: 42px;
+  /* Adjust the size as needed */
+  height: 42px;
+  /* Adjust the size as needed */
+  border-radius: 50%;
+  /* Make the image round */
   margin-right: 20px;
 }
 
@@ -1218,6 +1249,7 @@ h3 {
   cursor: pointer;
   background-color: pink;
 }
+
 .page-leaderboard .ranking .ranking-table-heading-row,
 .page-leaderboard .ranking .ranking-table-row-leader-1,
 .page-leaderboard .ranking .ranking-table-row-leader-2,
@@ -1252,12 +1284,14 @@ h3 {
 }
 
 .ranking-table-header-data {
-  flex: 1; /* Equal width distribution */
+  flex: 1;
+  /* Equal width distribution */
   text-align: center;
 }
 
 .ranking-table-data {
-  flex: 1; /* Equal width distribution */
+  flex: 1;
+  /* Equal width distribution */
   text-align: center;
   display: flex;
   align-items: center;
@@ -1307,6 +1341,7 @@ h3 {
 }
 
 @media (min-width: 33em) {
+
   .page-leaderboard .ranking .ranking-table-row-leader-1,
   .page-leaderboard .ranking .ranking-table-row-leader-2,
   .page-leaderboard .ranking .ranking-table-row-leader-3 {
@@ -1315,76 +1350,36 @@ h3 {
   }
 }
 
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-1
-  .ranking-table-data-leader-1,
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-2
-  .ranking-table-data-leader-2,
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-3
-  .ranking-table-data-leader-3 {
+.page-leaderboard .ranking .ranking-table-row-leader-1 .ranking-table-data-leader-1,
+.page-leaderboard .ranking .ranking-table-row-leader-2 .ranking-table-data-leader-2,
+.page-leaderboard .ranking .ranking-table-row-leader-3 .ranking-table-data-leader-3 {
   display: flex;
   justify-content: end;
   width: 20%;
 }
 
 @media (min-width: 48em) {
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-1
-    .ranking-table-data-leader-1,
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-2
-    .ranking-table-data-leader-2,
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-3
-    .ranking-table-data-leader-3 {
+
+  .page-leaderboard .ranking .ranking-table-row-leader-1 .ranking-table-data-leader-1,
+  .page-leaderboard .ranking .ranking-table-row-leader-2 .ranking-table-data-leader-2,
+  .page-leaderboard .ranking .ranking-table-row-leader-3 .ranking-table-data-leader-3 {
     width: 15%;
   }
 }
 
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-1
-  .ranking-table-data-leader-1
-  .medal-gold,
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-2
-  .ranking-table-data-leader-2
-  .medal-silver,
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-3
-  .ranking-table-data-leader-3
-  .medal-bronze {
+.page-leaderboard .ranking .ranking-table-row-leader-1 .ranking-table-data-leader-1 .medal-gold,
+.page-leaderboard .ranking .ranking-table-row-leader-2 .ranking-table-data-leader-2 .medal-silver,
+.page-leaderboard .ranking .ranking-table-row-leader-3 .ranking-table-data-leader-3 .medal-bronze {
   margin-top: -1.313em;
   height: 2.875em;
   width: 2.875em;
 }
 
 @media (min-width: 33em) {
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-1
-    .ranking-table-data-leader-1
-    .medal-gold,
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-2
-    .ranking-table-data-leader-2
-    .medal-silver,
-  .page-leaderboard
-    .ranking
-    .ranking-table-row-leader-3
-    .ranking-table-data-leader-3
-    .medal-bronze {
+
+  .page-leaderboard .ranking .ranking-table-row-leader-1 .ranking-table-data-leader-1 .medal-gold,
+  .page-leaderboard .ranking .ranking-table-row-leader-2 .ranking-table-data-leader-2 .medal-silver,
+  .page-leaderboard .ranking .ranking-table-row-leader-3 .ranking-table-data-leader-3 .medal-bronze {
     margin-top: -1.563em;
     height: 3.875em;
     width: 3.875em;
@@ -1395,13 +1390,8 @@ h3 {
   border: solid 0.125em #ecc81a;
 }
 
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-1
-  .ranking-table-data-leader-1
-  .medal-gold {
-  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-gold-c49052bfa07f36621f16dbe77f7fc36cbafd72ff088ea970256ff998be05687b.svg)
-    no-repeat;
+.page-leaderboard .ranking .ranking-table-row-leader-1 .ranking-table-data-leader-1 .medal-gold {
+  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-gold-c49052bfa07f36621f16dbe77f7fc36cbafd72ff088ea970256ff998be05687b.svg) no-repeat;
   background-size: contain;
 }
 
@@ -1409,13 +1399,8 @@ h3 {
   border: solid 0.125em #dbe2e8;
 }
 
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-2
-  .ranking-table-data-leader-2
-  .medal-silver {
-  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-silver-d099c5dd916c167c3ba4716c8968a819f317daaef1901c8e8bae6c6932852faa.svg)
-    no-repeat;
+.page-leaderboard .ranking .ranking-table-row-leader-2 .ranking-table-data-leader-2 .medal-silver {
+  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-silver-d099c5dd916c167c3ba4716c8968a819f317daaef1901c8e8bae6c6932852faa.svg) no-repeat;
   background-size: contain;
 }
 
@@ -1423,13 +1408,8 @@ h3 {
   border: solid 0.125em #dfdfd1;
 }
 
-.page-leaderboard
-  .ranking
-  .ranking-table-row-leader-3
-  .ranking-table-data-leader-3
-  .medal-bronze {
-  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-bronze-d0f15d413800257442c8d4b2d5239cfe28c9fd9594f863ab1fad5258f8d1d5eb.svg)
-    no-repeat;
+.page-leaderboard .ranking .ranking-table-row-leader-3 .ranking-table-data-leader-3 .medal-bronze {
+  background: url(https://d125fmws0bore1.cloudfront.net/assets/pages/leaderboard/medal-bronze-d0f15d413800257442c8d4b2d5239cfe28c9fd9594f863ab1fad5258f8d1d5eb.svg) no-repeat;
   background-size: contain;
 }
 
@@ -1502,8 +1482,7 @@ h3 {
 .page-leaderboard .ranking .ranking-table-data:nth-child(3) .complete {
   margin: -1.25em auto;
   transform: translateY(18%);
-  background: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/98798977/fe253e0d-b619-477e-a8de-b10b785f0bd1)
-    no-repeat;
+  background: url(https://github.com/GameSphere-MultiPlayer/GameSphere/assets/98798977/fe253e0d-b619-477e-a8de-b10b785f0bd1) no-repeat;
   background-size: contain;
   width: 3em;
   height: 3em;
@@ -1545,7 +1524,7 @@ h3 {
   transition: opacity 0.5s;
 }
 
-.active > .socials-menu {
+.active>.socials-menu {
   opacity: 1;
 }
 
@@ -1596,10 +1575,12 @@ h3 {
 .social li a {
   transition: font-size 0.3s;
 }
+
 .active .social:hover {
   outline: 2px solid white;
   outline-offset: 3px;
 }
+
 .active .social:nth-child(1) {
   transform: translateX(-5rem);
 }
@@ -1607,6 +1588,7 @@ h3 {
 .active .social:nth-child(1) {
   background: #7289da !important;
 }
+
 .active .social:nth-child(1):hover {
   background: #2246c8 !important;
   color: white !important;
@@ -1619,6 +1601,7 @@ h3 {
 .active .social:nth-child(2) {
   background-color: rgb(229, 229, 126) !important;
 }
+
 .active .social:nth-child(2):hover {
   background-color: rgb(198, 198, 68) !important;
 }
@@ -1630,6 +1613,7 @@ h3 {
 .active .social:nth-child(3) {
   background: rgb(103, 221, 103) !important;
 }
+
 .active .social:nth-child(3):hover {
   background: rgb(65, 212, 65) !important;
 }
@@ -1669,10 +1653,12 @@ h3 {
     position: absolute;
   }
 }
+
 .about-para {
   font-size: 1rem;
   margin: 0 200px;
 }
+
 @media (max-width: 480px) {
   .icons {
     position: absolute;
@@ -1683,15 +1669,19 @@ h3 {
   .logo_image {
     overflow: hidden;
   }
+
   .logo_image {
     margin-top: 1rem;
   }
+
   .logo_head1 {
     font-size: 20px !important;
   }
+
   .logo_head {
     font-size: 2rem !important;
   }
+
   .complete {
     position: relative;
     left: 2rem;
@@ -1731,6 +1721,10 @@ section.image {
 }
 
 @media (max-width: 480px) {
+  /* .logo-section {
+    margin-top: 10px;
+  } */
+
   .logo_image {
     overflow: hidden;
   }
@@ -1739,12 +1733,15 @@ section.image {
     font-size: 50px;
     text-align: center;
   }
+
   .about-para {
     margin: 1.5rem;
   }
+
   .container1 {
     padding: 1px !important;
   }
+
   .line3 {
     font-size: 15px;
   }
@@ -1861,6 +1858,7 @@ section.image {
   border: 0 solid white;
   padding: 0;
 }
+
 .image_part img:hover {
   transform: translateY(-10px);
   border: 5px double rgb(87, 43, 190);
@@ -1878,9 +1876,11 @@ section.image {
   .image_part {
     display: none;
   }
+
   .about-para {
     margin: 2rem;
   }
+
   .container1 {
     width: auto;
   }
@@ -1924,6 +1924,7 @@ section.image {
 .image1 {
   margin: 0 50px;
 }
+
 /* CSS */
 .button-85 {
   padding: 0.6em 2em;
@@ -1942,18 +1943,16 @@ section.image {
 
 .button-85:before {
   content: "";
-  background: linear-gradient(
-    45deg,
-    #ff0000,
-    #ff7300,
-    #fffb00,
-    #48ff00,
-    #00ffd5,
-    #002bff,
-    #7a00ff,
-    #ff00c8,
-    #ff0000
-  );
+  background: linear-gradient(45deg,
+      #ff0000,
+      #ff7300,
+      #fffb00,
+      #48ff00,
+      #00ffd5,
+      #002bff,
+      #7a00ff,
+      #ff00c8,
+      #ff0000);
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1972,9 +1971,11 @@ section.image {
   0% {
     background-position: 0 0;
   }
+
   50% {
     background-position: 400% 0;
   }
+
   100% {
     background-position: 0 0;
   }
@@ -1991,13 +1992,15 @@ section.image {
   top: 0;
   border-radius: 10px;
 }
+
 .button-85:hover {
   font-size: 14px;
   box-shadow: 0px 2px 10px 6px #999999;
 }
 
 .rateus-modal {
-  display: none; /* Hidden by default */
+  display: none;
+  /* Hidden by default */
   position: fixed;
   z-index: 1;
   left: 0;
@@ -2005,12 +2008,14 @@ section.image {
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.8); /* Black background with transparency */
+  background-color: rgba(0, 0, 0, 0.8);
+  /* Black background with transparency */
 }
 
 .rateus-container {
   max-width: 600px;
-  margin: 100px auto; /* Position the container a bit lower */
+  margin: 100px auto;
+  /* Position the container a bit lower */
   padding: 20px;
   background-color: #333;
   border-radius: 10px;
@@ -2062,8 +2067,10 @@ textarea {
   margin: 10px 0;
   border: 1px solid #ccc;
   border-radius: 5px;
-  background-color: #444; /* Darker background */
-  color: white; /* Text color */
+  background-color: #444;
+  /* Darker background */
+  color: white;
+  /* Text color */
 }
 
 .close {
@@ -2083,5 +2090,6 @@ textarea {
 
 #feedback-message {
   margin-top: 10px;
-  color: #ffcc00; /* Feedback message color */
-}
+  color: #ffcc00;
+  /* Feedback message color */
+}
\ No newline at end of file
diff --git a/server/views/index.ejs b/server/views/index.ejs
index 0513ba2..ab87227 100644
--- a/server/views/index.ejs
+++ b/server/views/index.ejs
@@ -12,7 +12,7 @@
   <!-- Title of the webpage displayed on the browser tab. -->
   <link rel="stylesheet" href="/css/styles.css" />
   <!-- Link to an external CSS file for styling. -->
-<!--  <script src="/public/js/script.jsz" defer></script>-->
+  <!--  <script src="/public/js/script.jsz" defer></script>-->
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link
@@ -74,8 +74,16 @@
     h1 {
       font-size: 2rem;
     }
-
+    .logo-section {
+        margin-top: 120px;
+      }
     /*========== Responsive typography ==========*/
+    @media (max-width: 480px) {
+      .logo-section {
+        margin-top: 20px;
+      }
+    }
+
     @media screen and (min-width: 1023px) {
       :root {
         --h2-font-size: 1.5rem;
@@ -110,6 +118,7 @@
       border: none;
       outline: none;
     }
+
     ul {
       list-style: none;
     }
@@ -119,7 +128,7 @@
     }
 
     img {
-      display:flex;
+      display: flex;
       max-width: 100%;
       height: auto;
     }
@@ -412,15 +421,16 @@
       color: #333333;
       /* Light mode text color */
     }
-    #progress-bar{
-  --progress: 0;
-  height: 12px;
-  width: var(--progress);
-  position: fixed;
-  z-index: 1001;
-  background: linear-gradient(45deg,rgb(41, 187, 203),rgb(181, 8, 155));
-  /* margin-top: -100px; */
-  }
+
+    #progress-bar {
+      --progress: 0;
+      height: 12px;
+      width: var(--progress);
+      position: fixed;
+      z-index: 1001;
+      background: linear-gradient(45deg, rgb(41, 187, 203), rgb(181, 8, 155));
+      /* margin-top: -100px; */
+    }
 
     /* Styles for specific elements */
     .nav__logo {
@@ -432,12 +442,15 @@
       color: #000000;
       /* Dark mode logo color */
     }
-    .light-mode .nav-links{
+
+    .light-mode .nav-links {
       background-color: whitesmoke;
     }
-    .light-mode .navCloseBtn{
+
+    .light-mode .navCloseBtn {
       color: black;
     }
+
     .nav__link {
       color: var(--body-color);
       /* Light mode logo color */
@@ -518,12 +531,13 @@
       color: black !important;
     }
 
-   /* .dark-mo .footer .footer-row {
+    /* .dark-mo .footer .footer-row {
       background-color: black;
       color: white;
     } */
 
-   .light-mode .footer-text ,.light-mode .footer-col .links li a {
+    .light-mode .footer-text,
+    .light-mode .footer-col .links li a {
       color: black;
       padding: 1rem 0;
     }
@@ -532,37 +546,37 @@
       /* background-color: black; */
     }
   </style>
-<!--  <script src="/js/script.js" defer></script>-->
+  <!--  <script src="/js/script.js" defer></script>-->
 </head>
 
 <body class="page-leaderboard">
   <div class="preloader">
-   <img class="center" id="loader-img" src="/images/loader.gif" alt="" />
+    <img class="center" id="loader-img" src="/images/loader.gif" alt="" />
   </div>
   <script>
     window.addEventListener("load", () => {
-        const loader = document.querySelector(".preloader");
-        // to check if the page was reloaded
-        if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
-            const loaderImg = document.getElementById("loader-img");
-            //to force reload
-            loaderImg.src = `${loaderImg.src}?t=${new Date().getTime()}`;
-            setTimeout(() => {
-                loader.classList.add("preloader--hidden");
-            }, 8000);
-            loader.addEventListener("transitionend", () => {
-                document.body.removeChild(loader);
-            });
-        } else {
-            //to remove the preloader if it is not a reload
-            document.body.removeChild(loader);
-        }
+      const loader = document.querySelector(".preloader");
+      // to check if the page was reloaded
+      if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
+        const loaderImg = document.getElementById("loader-img");
+        //to force reload
+        loaderImg.src = `${loaderImg.src}?t=${new Date().getTime()}`;
+        setTimeout(() => {
+          loader.classList.add("preloader--hidden");
+        }, 8000);
+        loader.addEventListener("transitionend", () => {
+          document.body.removeChild(loader);
+        });
+      } else {
+        //to remove the preloader if it is not a reload
+        document.body.removeChild(loader);
+      }
     });
   </script>
   <!-- Body of the webpage. Background color set inline. -->
 
- 
-	<div id="progress-bar"></div>
+
+  <div id="progress-bar"></div>
   <div class="circle-container">
     <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 1;"></div>
     <div class="circle" style="background-color: #55a5ea; left: 504px; top: 59px; scale: 0.95;"></div>
@@ -577,7 +591,7 @@
     <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
     <div class="circle" style="background-color: #fff; left: 504px; top: 59px; scale: 0.8;"></div>
   </div>
-  
+
   <nav class="nav">
     <!-- Navigation section. -->
     <i id="menuBarsColor" class="uil uil-bars navOpenBtn"></i>
@@ -587,782 +601,785 @@
     <br />
 
     <ul class="nav-links ">
-        <!-- Unordered list for navigation links. -->
-        <i class="uil uil-times navCloseBtn"></i>
-        <!-- Icon for closing navigation menu. -->
-        <li><a href="/" class="links-hover-currentpage">Home</a></li>
-        <li><a href="/play" class="links-hover">Play Games</a></li>
-        <li><a href="/products" class="links-hover">Products</a></li>
-        <li><a href="/about" class="links-hover">About Us</a></li>
-        <li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/" class="links-hover">Certificate</a></li>
-        <li><a class="links-hover" onclick="openRateUs()">Rate Us</a></li>
-<!--        <script src="/js/script.js" defer></script>-->
-        <li>
-            <div class="small-screen-social">
-                <a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
-                <a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
-                <a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank" class="social-icon facebook"></a>
-                <a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
-                <a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
-            </div>
-        </li>
+      <!-- Unordered list for navigation links. -->
+      <i class="uil uil-times navCloseBtn"></i>
+      <!-- Icon for closing navigation menu. -->
+      <li><a href="/" class="links-hover-currentpage">Home</a></li>
+      <li><a href="/play" class="links-hover">Play Games</a></li>
+      <li><a href="/products" class="links-hover">Products</a></li>
+      <li><a href="/about" class="links-hover">About Us</a></li>
+      <li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/" class="links-hover">Certificate</a></li>
+      <li><a class="links-hover" onclick="openRateUs()">Rate Us</a></li>
+      <!--        <script src="/js/script.js" defer></script>-->
+      <li>
+        <div class="small-screen-social">
+          <a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
+          <a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
+          <a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank"
+            class="social-icon facebook"></a>
+          <a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
+          <a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
+        </div>
+      </li>
     </ul>
 
-      <i class="uil uil-search search-icon search-close-cross-btn" id="searchIcon"></i>
-      <!-- Icon for search functionality. -->
-      <div class="search-box">
-        <i class="uil uil-search search-icon"></i>
-        <!-- Icon for search functionality within the search box. -->
-        <input type="search" id="searchResult" placeholder="Search here..." />
-        <!-- Input field for search functionality. -->
-        <div class="searching_results"></div>
-      </div>
+    <i class="uil uil-search search-icon search-close-cross-btn" id="searchIcon"></i>
+    <!-- Icon for search functionality. -->
+    <div class="search-box">
+      <i class="uil uil-search search-icon"></i>
+      <!-- Icon for search functionality within the search box. -->
+      <input type="search" id="searchResult" placeholder="Search here..." />
+      <!-- Input field for search functionality. -->
+      <div class="searching_results"></div>
+    </div>
 
 
     <div class="toggle-container">
-        <i class="bi bi-toggle-off" id="theme-toggle"></i>
+      <i class="bi bi-toggle-off" id="theme-toggle"></i>
+    </div>
+  </nav>
+  <%- include('partials/rateus') %>
+    <!-- <script src="/js/script.js"></script>-->
+    <!--==================== SEARCH ====================-->
+    <div class="search" id="search">
+      <form action="" class="search__form">
+        <i class="ri-search-line search__icon"></i>
+        <input type="search" placeholder="What are you looking for?" class="search__input">
+      </form>
+
+      <i class="ri-close-line search__close" id="search-close"></i>
     </div>
-</nav>
- <%- include('partials/rateus') %>
-<!-- <script src="/js/script.js"></script>-->
-  <!--==================== SEARCH ====================-->
-  <div class="search" id="search">
-    <form action="" class="search__form">
-      <i class="ri-search-line search__icon"></i>
-      <input type="search" placeholder="What are you looking for?" class="search__input">
-    </form>
-
-    <i class="ri-close-line search__close" id="search-close"></i>
-  </div>
- 
 
 
-  <br />
-  <section class="image logo-section" style="margin-top: 120px;">
-    <div class="logo_image">
-      <!-- Section for displaying images. -->
-      <img class="center" src="/images/logo.gif" alt="" height="250px" />
-      <!-- Image element with source set to a GIF file. -->
-    </div>
-    <div class="logo_head press-start-2p-regular" style="font-size: 5rem;">CHROME</div>
-    <div class="logo_head1" style="font-size: 2.5rem;">GAMING</div>
-  </section>
-  <br />
-  <section id="discord-button">
-    <!-- Section for Discord button. -->
-    <div id="discord-popup" class="popup">
-      <!-- Popup container for Discord button. -->
-      <div class="popup-content">
-        <!-- Content of the popup. -->
-        <span id="close-btn">&times;</span>
-        <!-- Button for closing the popup. -->
-        <h2 style="font-size: 23px;">Welcome to our Discord Server!</h2>
-        <!-- Heading for the Discord popup. -->
-        <p style="font-size: 18px;">
-          Join our community and chat with fellow members.
-        </p>
-        <!-- Text content for the Discord popup. -->
-        <a href="https://discord.gg/J4F7nY97Fp" target="_blank"><button class="button-85">Join Now</button></a>
-        <!-- Link for joining the Discord server. -->
+
+    <br />
+    <section class="image logo-section">
+      <div class="logo_image">
+        <!-- Section for displaying images. -->
+        <img class="center" src="/images/logo.gif" alt="" height="250px" />
+        <!-- Image element with source set to a GIF file. -->
       </div>
+      <div class="logo_head press-start-2p-regular" style="font-size: 5rem;">CHROME</div>
+      <div class="logo_head1" style="font-size: 2.5rem;">GAMING</div>
+    </section>
+    <br />
+    <section id="discord-button">
+      <!-- Section for Discord button. -->
+      <div id="discord-popup" class="popup">
+        <!-- Popup container for Discord button. -->
+        <div class="popup-content">
+          <!-- Content of the popup. -->
+          <span id="close-btn">&times;</span>
+          <!-- Button for closing the popup. -->
+          <h2 style="font-size: 23px;">Welcome to our Discord Server!</h2>
+          <!-- Heading for the Discord popup. -->
+          <p style="font-size: 18px;">
+            Join our community and chat with fellow members.
+          </p>
+          <!-- Text content for the Discord popup. -->
+          <a href="https://discord.gg/J4F7nY97Fp" target="_blank"><button class="button-85">Join Now</button></a>
+          <!-- Link for joining the Discord server. -->
+        </div>
+      </div>
+    </section>
+
+    <div class="social-icons">
+      <button class="toggler"><img src="/images/social1.webp" alt=""></button>
+      <a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
+      <a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
+      <a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank" class="social-icon facebook"></a>
+      <a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
+      <a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
     </div>
-  </section>
-
-  <div class="social-icons">
-    <button class="toggler"><img src="/images/social1.webp" alt=""></button>
-    <a href="https://www.youtube.com/@ChromeGamingOn" target="_blank" class="social-icon youtube"></a>
-    <a href="https://www.linkedin.com/company/chromegaming" target="_blank" class="social-icon linkedin"></a>
-    <a href="https://www.facebook.com/profile.php?id=61558763492008" target="_blank" class="social-icon facebook"></a>
-    <a href="https://twitter.com" target="_blank" class="social-icon twitter"></a>
-    <a href="https://www.instagram.com/chromegamingon/" target="_blank" class="social-icon instagram"></a>
-  </div>
 
 
-  <!--<div class="alan-btn"></div>-->
+    <!--<div class="alan-btn"></div>-->
 
-  <div class="container" style="margin-bottom: 40px;margin-left: 5px;">
-    <!-- Container for content. -->
-    <div class="image-div">
-      <!-- Division for images. -->
-      <img src="/images/BANNER.png" alt="Game Upload" />
-      <!-- Image element for uploading a game banner. -->
-      <button id="rotate" style="font-size: 18px; margin-bottom: 60px" class="download-button">
-        Upload <i class="bi bi-box-arrow-in-down"></i>
-      </button>
-      <!-- Button for uploading a game with icon. -->
-    </div>
-    <div class="text-div">
-      <!-- Division for text content. -->
-      <h2>
-        <i class="bi bi-bar-chart-line" style="font-size: 2.5rem;"></i> PROCEDURE
-        <i class="bi bi-box-arrow-in-right"></i>
-      </h2>
-      <!-- Heading for procedure. -->
-      <h1 style="color:rgb(204, 22, 198);  text-shadow: .1em .1em 0 hsl(200 50% 30%);" class="border-hover">
-        How i will be able upload game?
-      </h1>
-      <!-- Subheading for game upload procedure. -->
-      <br />
-      <br />
-      <p style="font-size: 16px;"> Step 1- Join out Discord Server </p>
-      <p style="font-size: 16px;">Step 2- Pitch your game </p>
-      <p style="font-size: 16px;">Step 3-We will upload it to our page.</p>
-      <br />
-      <!-- Placeholder text. -->
-      <div style="display: flex">
-        <i style="font-size: 30px; color: rgb(255, 255, 255)" class="bi bi-tv-fill"></i>
-        &nbsp;&nbsp;
-        <!-- Icon for TV display. -->
-
-        <h3 style="margin-top: 10px;font-size: 18px;">Create a Issue on GitHub</h3>
-        <!-- Text for TV display. -->
+    <div class="container" style="margin-bottom: 40px;margin-left: 5px;">
+      <!-- Container for content. -->
+      <div class="image-div">
+        <!-- Division for images. -->
+        <img src="/images/BANNER.png" alt="Game Upload" />
+        <!-- Image element for uploading a game banner. -->
+        <button id="rotate" style="font-size: 18px; margin-bottom: 60px" class="download-button">
+          Upload <i class="bi bi-box-arrow-in-down"></i>
+        </button>
+        <!-- Button for uploading a game with icon. -->
       </div>
-      <p style="margin-left: 60px;font-size: 16px;">
-        Go to the contribute section and click the link , it will redirect you
-        to to the github page where you can raise the issue.
-      </p>
-      <!-- Placeholder text. -->
-      <div style="display: flex">
-        <i style="font-size: 30px; color: rgb(255, 255, 255)" class="bi bi-tv-fill"></i>
-        &nbsp;&nbsp;
-        <!-- Icon for TV display. -->
-        <h3 style="margin-top: 10px;font-size: 18px;">Code and Upload it..</h3>
-        <!-- Text for TV display. -->
-      </div>
-      <p style="margin-left: 60px;font-size: 16px;"> Step 1- Clone the project </p>
-      <p style="margin-left: 60px;font-size: 16px;">Step 2- Raise Issue</p>
-      <p style="margin-left: 60px;font-size: 16px;">Step 3- Send PR</p>
-      <!-- Placeholder text. -->
-    </div>
-  </div>
-  
-  <div style="text-align: center; display: flex; flex-direction: column; align-items: center;">
-    <img alt="Leaderboard" class="mb-2"
-      src="https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_trophy_leaderboard-3442a4b2312e6cdd02aa9870e636dc082890277a6267c4ed986a750fef7cbb35.svg" />
-    <h2 style="color: white;">Top 50 Contributors Leaderboard</h2>
-  </div>
-  <section class="ranking" style="display: inline">
-    <div class="contain" style="margin-bottom: 10px">
-      <div class="ranking-table">
-        <div class="ranking-table-header-row" style="border:none">
-          <div class="ranking-table-header-data h6">Rank</div>
-          <div class="ranking-table-header-data h6">GitHub</div>
-          <div class="ranking-table-header-data h6">Profile Link</div>
+      <div class="text-div">
+        <!-- Division for text content. -->
+        <h2>
+          <i class="bi bi-bar-chart-line" style="font-size: 2.5rem;"></i> PROCEDURE
+          <i class="bi bi-box-arrow-in-right"></i>
+        </h2>
+        <!-- Heading for procedure. -->
+        <h1 style="color:rgb(204, 22, 198);  text-shadow: .1em .1em 0 hsl(200 50% 30%);" class="border-hover">
+          How i will be able upload game?
+        </h1>
+        <!-- Subheading for game upload procedure. -->
+        <br />
+        <br />
+        <p style="font-size: 16px;"> Step 1- Join out Discord Server </p>
+        <p style="font-size: 16px;">Step 2- Pitch your game </p>
+        <p style="font-size: 16px;">Step 3-We will upload it to our page.</p>
+        <br />
+        <!-- Placeholder text. -->
+        <div style="display: flex">
+          <i style="font-size: 30px; color: rgb(255, 255, 255)" class="bi bi-tv-fill"></i>
+          &nbsp;&nbsp;
+          <!-- Icon for TV display. -->
+
+          <h3 style="margin-top: 10px;font-size: 18px;">Create a Issue on GitHub</h3>
+          <!-- Text for TV display. -->
         </div>
-        <div class="top3" id="top3"></div>
-        <div class="ranking-table-body" id="rankingTableBody"></div>
+        <p style="margin-left: 60px;font-size: 16px;">
+          Go to the contribute section and click the link , it will redirect you
+          to to the github page where you can raise the issue.
+        </p>
+        <!-- Placeholder text. -->
+        <div style="display: flex">
+          <i style="font-size: 30px; color: rgb(255, 255, 255)" class="bi bi-tv-fill"></i>
+          &nbsp;&nbsp;
+          <!-- Icon for TV display. -->
+          <h3 style="margin-top: 10px;font-size: 18px;">Code and Upload it..</h3>
+          <!-- Text for TV display. -->
+        </div>
+        <p style="margin-left: 60px;font-size: 16px;"> Step 1- Clone the project </p>
+        <p style="margin-left: 60px;font-size: 16px;">Step 2- Raise Issue</p>
+        <p style="margin-left: 60px;font-size: 16px;">Step 3- Send PR</p>
+        <!-- Placeholder text. -->
       </div>
     </div>
-  </section>
-  
-
- 
- 
-
-
-  
-  
-
-
-  <!-- Horizontal line separator. -->
-  <section class="footer">
-    <!-- Footer section. -->
-    <div class="footer-row">
-      <!-- Row within the footer. -->
-      <div class="footer-col">
-        <!-- Column within the footer. -->
-        <h4>Info</h4>
-        <!-- Heading for info section. -->
-        <ul class="links">
-          <!-- Unordered list for links. -->
-          <li><a href="/index">Home</a></li>
-          <li><a href="/play">Play Games</a></li>
-          <li><a href="/product">Products</a></li>
-          <li><a href="/about">About Us</a></li>
-          <li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/">Certificate</a></li>
-        </ul>
-      </div>
-      <div class="footer-col">
-        <!-- Second column within the footer. -->
-        <h4>Explore</h4>
-        <!-- Heading for explore section. -->
-        <ul class="links">
-          <!-- Unordered list for links. -->
-          <li><a href="#">Free Designs</a></li>
-          <li><a href="#">Latest Designs</a></li>
-          <li><a href="#">Themes</a></li>
-          <li><a href="#">Popular Designs</a></li>
-          <li><a href="#">Art Skills</a></li>
-          <li><a href="#">New Uploads</a></li>
-        </ul>
-      </div>
-      <div class="footer-col">
-        <!-- Third column within the footer. -->
-        <h4>Legal</h4>
-        <!-- Heading for legal section. -->
-        <ul class="links">
-          <!-- Unordered list for links. -->
-          <li><a href="#">Customer Agreement</a></li>
-          <li><a href="#">Privacy Policy</a></li>
-          <li><a href="#">GDPR</a></li>
-          <li><a href="#">Security</a></li>
-          <li><a href="#">Testimonials</a></li>
-          <li><a href="#">Media Kit</a></li>
-        </ul>
-      </div>
-      <div class="footer-col">
-        <!-- Fourth column within the footer. -->
-        <h4>Newsletter</h4>
-        <!-- Heading for newsletter section. -->
-        <p>
-          Subscribe to our newsletter for a weekly dose of news, updates,
-          helpful tips, and exclusive offers.
-        </p>
-        <!-- Text for newsletter subscription. -->
-        <form id="subscriptionForm" action="#">
-          <input id="emailInput" type="email" placeholder="Your email" required pattern="[^\s@]+@[^\s@]+\.[^\s@]+" />
-          <button id="submitButton" type="submit">SUBSCRIBE</button>
-        </form>
-        <div class="footer-column">
-					<h4>Follow us</h4>
-					<div class="social-links">
-						<a href="mailto:durgeshkumar4993@gmail.com" target="_blank" class="gmail-icon"><i class="fab fa-google"></i></a>
-						<a href="https://www.linkedin.com/company/chromegaming" target="_blank" <i class="fab fa-linkedin"></i></a>
-						<a href="https://discord.com/" target="_blank" class="discord-icon fab fa-discord"></a>
-						<a href="https://www.medium.com/" target="_blank" class="fab fa-medium"></a>
-						<a href="https://www.instagram.com/chromegamingon/" target="_blank" class="fab fa-instagram"></a>
-					</div>
-				</div>
-        <div id="customAlert" class="alert">
-          <span id="alertText"></span>
-          <button id="closeAlert">&times;</button>
+
+    <div style="text-align: center; display: flex; flex-direction: column; align-items: center;">
+      <img alt="Leaderboard" class="mb-2"
+        src="https://d125fmws0bore1.cloudfront.net/assets/svgs/icon_trophy_leaderboard-3442a4b2312e6cdd02aa9870e636dc082890277a6267c4ed986a750fef7cbb35.svg" />
+      <h2 style="color: white;">Top 50 Contributors Leaderboard</h2>
+    </div>
+    <section class="ranking" style="display: inline">
+      <div class="contain" style="margin-bottom: 10px">
+        <div class="ranking-table">
+          <div class="ranking-table-header-row" style="border:none">
+            <div class="ranking-table-header-data h6">Rank</div>
+            <div class="ranking-table-header-data h6">GitHub</div>
+            <div class="ranking-table-header-data h6">Profile Link</div>
+          </div>
+          <div class="top3" id="top3"></div>
+          <div class="ranking-table-body" id="rankingTableBody"></div>
         </div>
+      </div>
+    </section>
+
+
+
+
+
+
 
-        <div class="icons">
-          <button class="share-button">
-            <svg id="share-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-              stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
-              <path stroke="none" d="M0 0h24v24H0z" fill="none" class="box"></path>
-              <path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-              <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-              <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
-              <path d="M8.7 10.7l6.6 -3.4"></path>
-              <path d="M8.7 13.3l6.6 3.4"></path>
-            </svg>
-          </button>
-          <ul class="socials-menu">
-            <li class="social" id="discord" title="discord">
-              <a href="https://discord.com/">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord"
-                  viewBox="0 0 16 16">
-                  <path
-                    d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
-                </svg>
-              </a>
-            </li>
-            <li class="social" title="signal" id="signal">
-              <a href="https://signal.org/">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-signal"
-                  viewBox="0 0 16 16">
-                  <path
-                    d="m6.08.234.179.727a7.3 7.3 0 0 0-2.01.832l-.383-.643A7.9 7.9 0 0 1 6.079.234zm3.84 0L9.742.96a7.3 7.3 0 0 1 2.01.832l.388-.643A8 8 0 0 0 9.92.234m-8.77 3.63a8 8 0 0 0-.916 2.215l.727.18a7.3 7.3 0 0 1 .832-2.01l-.643-.386zM.75 8a7 7 0 0 1 .081-1.086L.091 6.8a8 8 0 0 0 0 2.398l.74-.112A7 7 0 0 1 .75 8m11.384 6.848-.384-.64a7.2 7.2 0 0 1-2.007.831l.18.728a8 8 0 0 0 2.211-.919M15.251 8q0 .547-.082 1.086l.74.112a8 8 0 0 0 0-2.398l-.74.114q.082.54.082 1.086m.516 1.918-.728-.18a7.3 7.3 0 0 1-.832 2.012l.643.387a8 8 0 0 0 .917-2.219m-6.68 5.25c-.72.11-1.453.11-2.173 0l-.112.742a8 8 0 0 0 2.396 0l-.112-.741zm4.75-2.868a7.2 7.2 0 0 1-1.537 1.534l.446.605a8 8 0 0 0 1.695-1.689zM12.3 2.163c.587.432 1.105.95 1.537 1.537l.604-.45a8 8 0 0 0-1.69-1.691zM2.163 3.7A7.2 7.2 0 0 1 3.7 2.163l-.45-.604a8 8 0 0 0-1.691 1.69l.604.45zm12.688.163-.644.387c.377.623.658 1.3.832 2.007l.728-.18a8 8 0 0 0-.916-2.214M6.913.831a7.3 7.3 0 0 1 2.172 0l.112-.74a8 8 0 0 0-2.396 0zM2.547 14.64 1 15l.36-1.549-.729-.17-.361 1.548a.75.75 0 0 0 .9.902l1.548-.357zM.786 12.612l.732.168.25-1.073A7.2 7.2 0 0 1 .96 9.74l-.727.18a8 8 0 0 0 .736 1.902l-.184.79zm3.5 1.623-1.073.25.17.731.79-.184c.6.327 1.239.574 1.902.737l.18-.728a7.2 7.2 0 0 1-1.962-.811zM8 1.5a6.5 6.5 0 0 0-6.498 6.502 6.5 6.5 0 0 0 .998 3.455l-.625 2.668L4.54 13.5a6.502 6.502 0 0 0 6.93-11A6.5 6.5 0 0 0 8 1.5" />
-                </svg>
-              </a>
-            </li>
-            <li class="social" title="Github" id="github">
-              <a href="https://github.com/GameSphere-MultiPlayer">
-                <i class="fa-brands fa-github" style="color: white"></i>
-              </a>
-            </li>
-            <li class="social" title="reddit" id="reddit">
-              <a href="https://www.reddit.com/?rdt=35900" title="Facebook">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reddit"
-                  viewBox="0 0 16 16">
-                  <path
-                    d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
-                  <path
-                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
-                </svg>
-              </a>
-            </li>
+
+
+
+    <!-- Horizontal line separator. -->
+    <section class="footer">
+      <!-- Footer section. -->
+      <div class="footer-row">
+        <!-- Row within the footer. -->
+        <div class="footer-col">
+          <!-- Column within the footer. -->
+          <h4>Info</h4>
+          <!-- Heading for info section. -->
+          <ul class="links">
+            <!-- Unordered list for links. -->
+            <li><a href="/index">Home</a></li>
+            <li><a href="/play">Play Games</a></li>
+            <li><a href="/product">Products</a></li>
+            <li><a href="/about">About Us</a></li>
+            <li><a href="https://chromegaming.github.io/Chrome-Gaming-Certification/">Certificate</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <!-- Second column within the footer. -->
+          <h4>Explore</h4>
+          <!-- Heading for explore section. -->
+          <ul class="links">
+            <!-- Unordered list for links. -->
+            <li><a href="#">Free Designs</a></li>
+            <li><a href="#">Latest Designs</a></li>
+            <li><a href="#">Themes</a></li>
+            <li><a href="#">Popular Designs</a></li>
+            <li><a href="#">Art Skills</a></li>
+            <li><a href="#">New Uploads</a></li>
+          </ul>
+        </div>
+        <div class="footer-col">
+          <!-- Third column within the footer. -->
+          <h4>Legal</h4>
+          <!-- Heading for legal section. -->
+          <ul class="links">
+            <!-- Unordered list for links. -->
+            <li><a href="#">Customer Agreement</a></li>
+            <li><a href="#">Privacy Policy</a></li>
+            <li><a href="#">GDPR</a></li>
+            <li><a href="#">Security</a></li>
+            <li><a href="#">Testimonials</a></li>
+            <li><a href="#">Media Kit</a></li>
           </ul>
         </div>
+        <div class="footer-col">
+          <!-- Fourth column within the footer. -->
+          <h4>Newsletter</h4>
+          <!-- Heading for newsletter section. -->
+          <p>
+            Subscribe to our newsletter for a weekly dose of news, updates,
+            helpful tips, and exclusive offers.
+          </p>
+          <!-- Text for newsletter subscription. -->
+          <form id="subscriptionForm" action="#">
+            <input id="emailInput" type="email" placeholder="Your email" required pattern="[^\s@]+@[^\s@]+\.[^\s@]+" />
+            <button id="submitButton" type="submit">SUBSCRIBE</button>
+          </form>
+          <div class="footer-column">
+            <h4>Follow us</h4>
+            <div class="social-links">
+              <a href="mailto:durgeshkumar4993@gmail.com" target="_blank" class="gmail-icon"><i
+                  class="fab fa-google"></i></a>
+              <a href="https://www.linkedin.com/company/chromegaming" target="_blank" <i
+                class="fab fa-linkedin"></i></a>
+              <a href="https://discord.com/" target="_blank" class="discord-icon fab fa-discord"></a>
+              <a href="https://www.medium.com/" target="_blank" class="fab fa-medium"></a>
+              <a href="https://www.instagram.com/chromegamingon/" target="_blank" class="fab fa-instagram"></a>
+            </div>
+          </div>
+          <div id="customAlert" class="alert">
+            <span id="alertText"></span>
+            <button id="closeAlert">&times;</button>
+          </div>
+
+          <div class="icons">
+            <button class="share-button">
+              <svg id="share-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                stroke-width="2" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" class="box"></path>
+                <path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M8.7 10.7l6.6 -3.4"></path>
+                <path d="M8.7 13.3l6.6 3.4"></path>
+              </svg>
+            </button>
+            <ul class="socials-menu">
+              <li class="social" id="discord" title="discord">
+                <a href="https://discord.com/">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-discord" viewBox="0 0 16 16">
+                    <path
+                      d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
+                  </svg>
+                </a>
+              </li>
+              <li class="social" title="signal" id="signal">
+                <a href="https://signal.org/">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-signal" viewBox="0 0 16 16">
+                    <path
+                      d="m6.08.234.179.727a7.3 7.3 0 0 0-2.01.832l-.383-.643A7.9 7.9 0 0 1 6.079.234zm3.84 0L9.742.96a7.3 7.3 0 0 1 2.01.832l.388-.643A8 8 0 0 0 9.92.234m-8.77 3.63a8 8 0 0 0-.916 2.215l.727.18a7.3 7.3 0 0 1 .832-2.01l-.643-.386zM.75 8a7 7 0 0 1 .081-1.086L.091 6.8a8 8 0 0 0 0 2.398l.74-.112A7 7 0 0 1 .75 8m11.384 6.848-.384-.64a7.2 7.2 0 0 1-2.007.831l.18.728a8 8 0 0 0 2.211-.919M15.251 8q0 .547-.082 1.086l.74.112a8 8 0 0 0 0-2.398l-.74.114q.082.54.082 1.086m.516 1.918-.728-.18a7.3 7.3 0 0 1-.832 2.012l.643.387a8 8 0 0 0 .917-2.219m-6.68 5.25c-.72.11-1.453.11-2.173 0l-.112.742a8 8 0 0 0 2.396 0l-.112-.741zm4.75-2.868a7.2 7.2 0 0 1-1.537 1.534l.446.605a8 8 0 0 0 1.695-1.689zM12.3 2.163c.587.432 1.105.95 1.537 1.537l.604-.45a8 8 0 0 0-1.69-1.691zM2.163 3.7A7.2 7.2 0 0 1 3.7 2.163l-.45-.604a8 8 0 0 0-1.691 1.69l.604.45zm12.688.163-.644.387c.377.623.658 1.3.832 2.007l.728-.18a8 8 0 0 0-.916-2.214M6.913.831a7.3 7.3 0 0 1 2.172 0l.112-.74a8 8 0 0 0-2.396 0zM2.547 14.64 1 15l.36-1.549-.729-.17-.361 1.548a.75.75 0 0 0 .9.902l1.548-.357zM.786 12.612l.732.168.25-1.073A7.2 7.2 0 0 1 .96 9.74l-.727.18a8 8 0 0 0 .736 1.902l-.184.79zm3.5 1.623-1.073.25.17.731.79-.184c.6.327 1.239.574 1.902.737l.18-.728a7.2 7.2 0 0 1-1.962-.811zM8 1.5a6.5 6.5 0 0 0-6.498 6.502 6.5 6.5 0 0 0 .998 3.455l-.625 2.668L4.54 13.5a6.502 6.502 0 0 0 6.93-11A6.5 6.5 0 0 0 8 1.5" />
+                  </svg>
+                </a>
+              </li>
+              <li class="social" title="Github" id="github">
+                <a href="https://github.com/GameSphere-MultiPlayer">
+                  <i class="fa-brands fa-github" style="color: white"></i>
+                </a>
+              </li>
+              <li class="social" title="reddit" id="reddit">
+                <a href="https://www.reddit.com/?rdt=35900" title="Facebook">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                    class="bi bi-reddit" viewBox="0 0 16 16">
+                    <path
+                      d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
+                  </svg>
+                </a>
+              </li>
+            </ul>
+          </div>
+
 
-        
 
+        </div>
       </div>
-    </div>
-  </section>
-  <footer class="footer-text" style="
+    </section>
+    <footer class="footer-text" style="
             text-align: center;
             color: rgba(0, 131, 245, 0.769);
             margin-bottom: 0px;
             font-size: 12px;
           
           ">
-    <!-- scroll to top -->
-    <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-long-arrow-up"></i></button>
-
-    <!-- Footer section. -->
-    &copy; 2024-All rights reserved.<br />
-    Made with ❤️ of <b>Chrome Gaming</b>
-  </footer>
-  <!--Share Button-->
-  <script>
+      <!-- scroll to top -->
+      <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-long-arrow-up"></i></button>
 
-    const shareButton = document.querySelector(".share-button");
-    const toggleSocials = () => {
-      const socialsWrapper = document.querySelector(".icons");
-      const shareButtonImage = shareButton.querySelector("img");
+      <!-- Footer section. -->
+      &copy; 2024-All rights reserved.<br />
+      Made with ❤️ of <b>Chrome Gaming</b>
+    </footer>
+    <!--Share Button-->
+    <script>
 
-      socialsWrapper.classList.toggle("active");
+      const shareButton = document.querySelector(".share-button");
+      const toggleSocials = () => {
+        const socialsWrapper = document.querySelector(".icons");
+        const shareButtonImage = shareButton.querySelector("img");
 
-      if (shareButtonImage.src.includes("share")) {
-        shareButtonImage.src = "/images/close.svg";
-      } else {
-        shareButtonImage.src = "assets/share.svg";
-      }
-    };
+        socialsWrapper.classList.toggle("active");
 
-    shareButton.addEventListener("click", toggleSocials);
+        if (shareButtonImage.src.includes("share")) {
+          shareButtonImage.src = "/images/close.svg";
+        } else {
+          shareButtonImage.src = "assets/share.svg";
+        }
+      };
 
-    document.querySelector('.toggler').addEventListener('click', function () {
-      document.querySelector('.social-icons').classList.toggle('show-icons');
-    });
+      shareButton.addEventListener("click", toggleSocials);
 
+      document.querySelector('.toggler').addEventListener('click', function () {
+        document.querySelector('.social-icons').classList.toggle('show-icons');
+      });
 
-  </script>
 
+    </script>
+
+
+    <!--=============== MAIN JS ===============-->
+    <script>
+      //Custom Cursor
+
+      const coords = { x: 0, y: 0 };
+      const circles = document.querySelectorAll(".circle");
+
+      const colors = [
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#55a5ea",
+        "#3fbcc0c6",
+        "#3fbcc0c6",
+        "#3fbcc0c6",
+        "#3fbcc0c6",
+        "#3fbcc0c6",
+        "#3fbcc0c6",
+        "fff",
+        "fff",
+        "fff",
+        "fff",
+        "fff",
+        "fff",
+        "fff",
+      ];
 
-  <!--=============== MAIN JS ===============-->
-  <script>
-//Custom Cursor
-
-    const coords = { x: 0, y: 0 };
-    const circles = document.querySelectorAll(".circle");
-
-    const colors = [
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#55a5ea",
-      "#3fbcc0c6",
-      "#3fbcc0c6",
-      "#3fbcc0c6",
-      "#3fbcc0c6",
-      "#3fbcc0c6",
-      "#3fbcc0c6",
-      "fff",
-      "fff",
-      "fff",
-      "fff",
-      "fff",
-      "fff",
-      "fff",
-    ];
-
-    circles.forEach(function (circle, index) {
-      circle.x = 0;
-      circle.y = 0;
-      circle.style.backgroundColor = colors[index % colors.length];
-    });
+      circles.forEach(function (circle, index) {
+        circle.x = 0;
+        circle.y = 0;
+        circle.style.backgroundColor = colors[index % colors.length];
+      });
 
-    window.addEventListener("mousemove", function (e) {
-      coords.x = e.clientX;
-      coords.y = e.clientY;
-    });
+      window.addEventListener("mousemove", function (e) {
+        coords.x = e.clientX;
+        coords.y = e.clientY;
+      });
 
-    function animateCircles() {
-      let x = coords.x;
-      let y = coords.y;
+      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";
+        circles.forEach(function (circle, index) {
+          circle.style.left = x - 12 + "px";
+          circle.style.top = y - 12 + "px";
 
-        circle.style.scale = (circles.length - index) / circles.length;
+          circle.style.scale = (circles.length - index) / circles.length;
 
-        circle.x = x;
-        circle.y = y;
+          circle.x = x;
+          circle.y = y;
 
-        const nextCircle = circles[index + 1] || circles[0];
-        x += (nextCircle.x - x) * 0.3;
-        y += (nextCircle.y - y) * 0.3;
-      });
+          const nextCircle = circles[index + 1] || circles[0];
+          x += (nextCircle.x - x) * 0.3;
+          y += (nextCircle.y - y) * 0.3;
+        });
 
-      requestAnimationFrame(animateCircles);
-    }
+        requestAnimationFrame(animateCircles);
+      }
 
-    animateCircles();
-    document.querySelector('.toggler').addEventListener('click', function () {
-    document.querySelector('.social-icons').classList.toggle('show-icons');
-    });
-  
-  </script>
-<script>
-
-
-   // const data = [
-//   { place: 1, name: "Steven A" },
-//   { place: 2, name: "Raghav M" },
-//   { place: 3, name: "Ryan Z" },
-//   { place: 4, name: "Joseph R" },
-//   { place: 5, name: "Muwaffaq I" },
-//   { place: 6, name: "Joshua L" },
-//   { place: 7, name: "Nick M" },
-//   { place: 8, name: "Ravindra R" },
-//   { place: 9, name: "Ricardo M" },
-//   { place: 10, name: "Shubham R" },
-//   { place: 11, name: "Flavio S" },
-//   { place: 12, name: "Igor S" },
-//   { place: 13, name: "Mycah H" },
-//   { place: 14, name: "hemant d" },
-//   { place: 15, name: "Santhosh S" },
-//   { place: 16, name: "Joseph D" },
-//   { place: 17, name: "Kevin C" },
-//   { place: 18, name: "yasser m" },
-//   { place: 19, name: "Miguel Ángel M" },
-//   { place: 20, name: "Peter K" },
-//   { place: 21, name: "Atikur R" },
-//   { place: 22, name: "Matthew Y" },
-//   { place: 23, name: "Anwar S" },
-//   { place: 24, name: "Jake Y" },
-//   { place: 25, name: "Lokesh R" },
-//   { place: 26, name: "Christopher P" },
-//   { place: 27, name: "Mingxin O" },
-//   { place: 28, name: "August E" },
-//   { place: 29, name: "Samsruti D" },
-//   { place: 30, name: "Harsh V" },
-//   { place: 31, name: "Keenan P" },
-//   { place: 32, name: "Rouz A" },
-//   { place: 33, name: "Ron R" },
-//   { place: 34, name: "Sean O" },
-//   { place: 35, name: "Michael D" },
-//   { place: 36, name: "Devishree R" },
-//   { place: 37, name: "Ali R" },
-//   { place: 38, name: "Alvin A" },
-//   { place: 39, name: "Arthur N" },
-//   { place: 40, name: "Choulhyouc L" },
-//   { place: 41, name: "Zeeshan H" },
-//   { place: 42, name: "Goran Đ" },
-//   { place: 43, name: "sovannarong k" },
-//   { place: 44, name: "Luke M" },
-//   { place: 45, name: "Chenzhe X" },
-//   { place: 46, name: "Jae Hee L" },
-//   { place: 47, name: "Jason P" },
-//   { place: 48, name: "Sebastiano D" },
-//   { place: 49, name: "Julia S" },
-//   { place: 50, name: "Sana" },
-// ];
-
-/*
-
-I commented this becoz this script is already being called in script.js (line 39) - Ayush-may
-
-function compare(a, b) {
-  if (a.contributions < b.contributions) {
-    return 1;
-  }
-  if (a.contributions > b.contributions) {
-    return -1;
-  }
-  return 0;
-}
-
-async function getContributors(repoName, page = 1) {
-  let request = await fetch(`https://api.github.com/repos/${repoName}/contributors?page=${page}&anon=true`, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    }
-  });
-
-  let contributorsList = await request.json();
-  contributorsList.sort(compare);
-  var data = [];
-  var size = contributorsList.length;
-  for (var i = 0; i < size; i++) {
-    data.push({
-      place: i + 1,
-      name: (contributorsList[i].login === undefined) ? contributorsList[i].name : contributorsList[i].login,
-      avatar: contributorsList[i].avatar_url,
-      profileUrl: contributorsList[i].html_url
-    });
-  }
-  console.log(data);
-
-  return data;
-}
-
-var medals = ['medal-gold', 'medal-silver', 'medal-bronze'];
-window.onload = async function () {
-  const data = await getContributors("GameSphere-MultiPlayer/Community-Page");
-
-  console.log(data.length);
-  var i = 0;
-  data.forEach(item => {
-    const avatarImg = document.createElement('img');
-    avatarImg.src = item.avatar;
-    avatarImg.className = 'avatar';
-
-    const profileLink = document.createElement('a');
-    profileLink.href = item.profileUrl;
-    profileLink.target = '_blank'; // Open in a new tab
-    profileLink.className = 'ranking-table-data';
-    profileLink.appendChild(avatarImg);
-
-    const nameText = document.createElement('span');
-    nameText.textContent = item.name;
-    profileLink.appendChild(nameText);
-
-    if (i > 2) {
-      const rankingTable = document.getElementById('rankingTableBody');
-      const row = document.createElement('div');
-      row.className = 'ranking-table-row';
-
-      const placeCell = document.createElement('div');
-      placeCell.className = 'ranking-table-data';
-      placeCell.textContent = item.place;
-
-      const progressCell = document.createElement('div');
-      progressCell.className = 'ranking-table-data';
-
-      const completeIndicator = document.createElement('div');
-      completeIndicator.className = 'complete';
-      progressCell.appendChild(completeIndicator);
-
-      row.appendChild(placeCell);
-      row.appendChild(profileLink);
-      row.appendChild(progressCell);
-
-      rankingTable.appendChild(row);
-    } else {
-      const rankingTable = document.getElementById("top3");
-      const row = document.createElement('div');
-      row.className = 'ranking-table-row-leader-' + (i + 1);
-
-      const placeCell = document.createElement('div');
-      placeCell.className = 'ranking-table-data-leader-' + (i + 1);
-
-      const medalCell = document.createElement('div');
-      medalCell.className = medals[i];
-
-      placeCell.appendChild(medalCell);
-
-      const profileCell = document.createElement('div');
-      profileCell.className = 'ranking-table-data';
-      profileCell.appendChild(profileLink);
-
-      const progressCell = document.createElement('div');
-      progressCell.className = 'ranking-table-data';
-
-      const completeIndicator = document.createElement('div');
-      completeIndicator.className = 'complete';
-      progressCell.appendChild(completeIndicator);
-
-      row.appendChild(placeCell);
-      row.appendChild(profileCell);
-      row.appendChild(progressCell);
-
-      rankingTable.appendChild(row);
-    }
-    i++;
-  });
-  console.log("RUNNED");
-};
-
-
-
-const nav = document.querySelector(".nav"),
-  searchIcon = document.querySelector("#searchIcon"),
-  navOpenBtn = document.querySelector(".navOpenBtn"),
-  navCloseBtn = document.querySelector(".navCloseBtn"),
-  searchResult = document.getElementById("searchResult"),
-  resultContainer = document.querySelector(".searching_results");
-
-searchResult.addEventListener("input", () => {
-  if (searchResult.value.length === 0) {
-    resultContainer.style.display = "none";
-  }
-  if (nav.classList.contains("openSearch") && searchResult.value.length > 0) {
-    resultContainer.style.display = "flex";
-    let result = data.filter((item) =>
-      item.name.toLowerCase().includes(searchResult.value.toLowerCase())
-    );
-    console.log(result)
-    resultContainer.innerHTML = "";
-    if (result.length !== 0) {
-      result.forEach((item, index) => {
-        const div = document.createElement("div");
-        const p = document.createElement("p");
-        const span = document.createElement("span");
-        p.textContent = item.name;
-        span.textContent = item.place;
-        div.appendChild(p);
-        div.appendChild(span);
-        resultContainer.appendChild(div);
+      animateCircles();
+      document.querySelector('.toggler').addEventListener('click', function () {
+        document.querySelector('.social-icons').classList.toggle('show-icons');
       });
-    }
-    else {
-      resultContainer.style.display = "none";
-    }
-  }
-});
-
-const toggleButton = document.getElementById("theme-toggle");
-const body = document.body;
-
-searchIcon.addEventListener("click", () => {
-  nav.classList.toggle("openSearch");
-  nav.classList.remove("openNav");
-  if (searchResult.value.length === 0) {
-    resultContainer.style.display = "none";
-  }
-  if (nav.classList.contains("openSearch")) {
-    return searchIcon.classList.replace("uil-search", "uil-times");
-  }
-  searchIcon.classList.replace("uil-times", "uil-search");
-});
-
-// page start with dark mode
-
-body.classList.add("dark-mode");
-// Toggle between "toggle off and toggle on"//
-
-toggleButton.addEventListener("click", () => {
-  body.classList.toggle("dark-mode");
-  body.classList.toggle("light-mode");
-
-  if (body.classList.contains("light-mode")) {
-    toggleButton.classList.remove("bi-toggle-off");
-    toggleButton.classList.add("bi-toggle-on");
-    document.getElementById("menuBarsColor").style.color = "black";
-    document.querySelectorAll("a").forEach((link) => link.style.color = "black");
-  } else {
-    toggleButton.classList.remove("bi-toggle-on");
-    toggleButton.classList.add("bi-toggle-off");
-    document.getElementById("menuBarsColor").style.color = "white";
-    document.querySelectorAll("a").forEach((link) => link.style.color = "white");
-  }
-});
-
-navOpenBtn.addEventListener("click", () => {
-  nav.classList.add("openNav");
-  nav.classList.remove("openSearch");
-  searchIcon.classList.replace("uil-times", "uil-search");
-});
-navCloseBtn.addEventListener("click", () => {
-  nav.classList.remove("openNav");
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-  const discordButton = document.getElementById("discord-button");
-  const discordPopup = document.getElementById("discord-popup");
-  const closeBtn = document.getElementById("close-btn");
-
-  discordButton.addEventListener("click", function () {
-    discordPopup.style.display = "block";
-  });
-
-  closeBtn.addEventListener("click", function () {
-    discordPopup.remove();
-  });
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-  const discordPopup = document.getElementById("discord-popup");
-  const closeBtn = document.getElementById("close-btn");
-
-  discordButton.addEventListener("click", function () {
-    discordPopup.style.display = "block";
-  });
-
-  closeBtn.addEventListener("click", function () {
-    discordPopup.style.display = "none";
-  });
-});
-const success = () => {
-  showAlert("You have successfully subscribed!", "success");
-};
-
-const showAlert = (message, type) => {
-  const alertBox = document.getElementById("customAlert");
-  const alertText = document.getElementById("alertText");
-
-  alertText.textContent = message;
-
-  if (type === "success") {
-    alertBox.style.borderColor = "#4CAF50";
-    alertText.style.color = "#4CAF50";
-  } else {
-    alertBox.style.borderColor = "#f44336";
-    alertText.style.color = "#f44336";
-  }
-
-  alertBox.classList.add("show");
-
-  document.getElementById("closeAlert").addEventListener("click", () => {
-    alertBox.classList.remove("show");
-  });
-};
-
-const subscriptionForm = document.getElementById("subscriptionForm");
-const emailInput = document.getElementById("emailInput");
-
-subscriptionForm.addEventListener("submit", function (event) {
-  if (!emailInput.checkValidity()) {
-    showAlert("Please enter a valid email address.", "error");
-    emailInput.focus();
-    event.preventDefault();
-  } else {
-    success();
-  }
-});
-*/
 
-  </script>
-<script>
-  const content = [
-    "Dot box",
-     "Packabunchas",
-     "Spaceship Escort",
-     "Physi-c-tech",
-     "Squard Line",
-     "Formation absent"
-  
-];
-
-document.getElementById('searchResult').addEventListener('input', function() {
-  const query = this.value.toLowerCase();
-  filterContent(query);
-});
-
-function filterContent(query) {
-  const results = content.filter(item => item.toLowerCase().includes(query));
-  displayResults(results);
-}
-
-function displayResults(results) {
-  const resultsContainer = document.querySelector('.searching_results');
-  resultsContainer.innerHTML = ''; // Clear previous results
-
-  if (results.length === 0) {
-      resultsContainer.innerHTML = '<p>No results found</p>';
-      return;
-  }
-
-  results.forEach(result => {
-      const resultItem = document.createElement('div');
-      resultItem.textContent = result;
-      resultsContainer.appendChild(resultItem);
-  });
-}
-
-</script>
+    </script>
+    <script>
+
+
+      // const data = [
+      //   { place: 1, name: "Steven A" },
+      //   { place: 2, name: "Raghav M" },
+      //   { place: 3, name: "Ryan Z" },
+      //   { place: 4, name: "Joseph R" },
+      //   { place: 5, name: "Muwaffaq I" },
+      //   { place: 6, name: "Joshua L" },
+      //   { place: 7, name: "Nick M" },
+      //   { place: 8, name: "Ravindra R" },
+      //   { place: 9, name: "Ricardo M" },
+      //   { place: 10, name: "Shubham R" },
+      //   { place: 11, name: "Flavio S" },
+      //   { place: 12, name: "Igor S" },
+      //   { place: 13, name: "Mycah H" },
+      //   { place: 14, name: "hemant d" },
+      //   { place: 15, name: "Santhosh S" },
+      //   { place: 16, name: "Joseph D" },
+      //   { place: 17, name: "Kevin C" },
+      //   { place: 18, name: "yasser m" },
+      //   { place: 19, name: "Miguel Ángel M" },
+      //   { place: 20, name: "Peter K" },
+      //   { place: 21, name: "Atikur R" },
+      //   { place: 22, name: "Matthew Y" },
+      //   { place: 23, name: "Anwar S" },
+      //   { place: 24, name: "Jake Y" },
+      //   { place: 25, name: "Lokesh R" },
+      //   { place: 26, name: "Christopher P" },
+      //   { place: 27, name: "Mingxin O" },
+      //   { place: 28, name: "August E" },
+      //   { place: 29, name: "Samsruti D" },
+      //   { place: 30, name: "Harsh V" },
+      //   { place: 31, name: "Keenan P" },
+      //   { place: 32, name: "Rouz A" },
+      //   { place: 33, name: "Ron R" },
+      //   { place: 34, name: "Sean O" },
+      //   { place: 35, name: "Michael D" },
+      //   { place: 36, name: "Devishree R" },
+      //   { place: 37, name: "Ali R" },
+      //   { place: 38, name: "Alvin A" },
+      //   { place: 39, name: "Arthur N" },
+      //   { place: 40, name: "Choulhyouc L" },
+      //   { place: 41, name: "Zeeshan H" },
+      //   { place: 42, name: "Goran Đ" },
+      //   { place: 43, name: "sovannarong k" },
+      //   { place: 44, name: "Luke M" },
+      //   { place: 45, name: "Chenzhe X" },
+      //   { place: 46, name: "Jae Hee L" },
+      //   { place: 47, name: "Jason P" },
+      //   { place: 48, name: "Sebastiano D" },
+      //   { place: 49, name: "Julia S" },
+      //   { place: 50, name: "Sana" },
+      // ];
+
+      /*
+      
+      I commented this becoz this script is already being called in script.js (line 39) - Ayush-may
+      
+      function compare(a, b) {
+        if (a.contributions < b.contributions) {
+          return 1;
+        }
+        if (a.contributions > b.contributions) {
+          return -1;
+        }
+        return 0;
+      }
+      
+      async function getContributors(repoName, page = 1) {
+        let request = await fetch(`https://api.github.com/repos/${repoName}/contributors?page=${page}&anon=true`, {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          }
+        });
+      
+        let contributorsList = await request.json();
+        contributorsList.sort(compare);
+        var data = [];
+        var size = contributorsList.length;
+        for (var i = 0; i < size; i++) {
+          data.push({
+            place: i + 1,
+            name: (contributorsList[i].login === undefined) ? contributorsList[i].name : contributorsList[i].login,
+            avatar: contributorsList[i].avatar_url,
+            profileUrl: contributorsList[i].html_url
+          });
+        }
+        console.log(data);
+      
+        return data;
+      }
+      
+      var medals = ['medal-gold', 'medal-silver', 'medal-bronze'];
+      window.onload = async function () {
+        const data = await getContributors("GameSphere-MultiPlayer/Community-Page");
+      
+        console.log(data.length);
+        var i = 0;
+        data.forEach(item => {
+          const avatarImg = document.createElement('img');
+          avatarImg.src = item.avatar;
+          avatarImg.className = 'avatar';
+      
+          const profileLink = document.createElement('a');
+          profileLink.href = item.profileUrl;
+          profileLink.target = '_blank'; // Open in a new tab
+          profileLink.className = 'ranking-table-data';
+          profileLink.appendChild(avatarImg);
+      
+          const nameText = document.createElement('span');
+          nameText.textContent = item.name;
+          profileLink.appendChild(nameText);
+      
+          if (i > 2) {
+            const rankingTable = document.getElementById('rankingTableBody');
+            const row = document.createElement('div');
+            row.className = 'ranking-table-row';
+      
+            const placeCell = document.createElement('div');
+            placeCell.className = 'ranking-table-data';
+            placeCell.textContent = item.place;
+      
+            const progressCell = document.createElement('div');
+            progressCell.className = 'ranking-table-data';
+      
+            const completeIndicator = document.createElement('div');
+            completeIndicator.className = 'complete';
+            progressCell.appendChild(completeIndicator);
+      
+            row.appendChild(placeCell);
+            row.appendChild(profileLink);
+            row.appendChild(progressCell);
+      
+            rankingTable.appendChild(row);
+          } else {
+            const rankingTable = document.getElementById("top3");
+            const row = document.createElement('div');
+            row.className = 'ranking-table-row-leader-' + (i + 1);
+      
+            const placeCell = document.createElement('div');
+            placeCell.className = 'ranking-table-data-leader-' + (i + 1);
+      
+            const medalCell = document.createElement('div');
+            medalCell.className = medals[i];
+      
+            placeCell.appendChild(medalCell);
+      
+            const profileCell = document.createElement('div');
+            profileCell.className = 'ranking-table-data';
+            profileCell.appendChild(profileLink);
+      
+            const progressCell = document.createElement('div');
+            progressCell.className = 'ranking-table-data';
+      
+            const completeIndicator = document.createElement('div');
+            completeIndicator.className = 'complete';
+            progressCell.appendChild(completeIndicator);
+      
+            row.appendChild(placeCell);
+            row.appendChild(profileCell);
+            row.appendChild(progressCell);
+      
+            rankingTable.appendChild(row);
+          }
+          i++;
+        });
+        console.log("RUNNED");
+      };
+      
+      
+      
+      const nav = document.querySelector(".nav"),
+        searchIcon = document.querySelector("#searchIcon"),
+        navOpenBtn = document.querySelector(".navOpenBtn"),
+        navCloseBtn = document.querySelector(".navCloseBtn"),
+        searchResult = document.getElementById("searchResult"),
+        resultContainer = document.querySelector(".searching_results");
+      
+      searchResult.addEventListener("input", () => {
+        if (searchResult.value.length === 0) {
+          resultContainer.style.display = "none";
+        }
+        if (nav.classList.contains("openSearch") && searchResult.value.length > 0) {
+          resultContainer.style.display = "flex";
+          let result = data.filter((item) =>
+            item.name.toLowerCase().includes(searchResult.value.toLowerCase())
+          );
+          console.log(result)
+          resultContainer.innerHTML = "";
+          if (result.length !== 0) {
+            result.forEach((item, index) => {
+              const div = document.createElement("div");
+              const p = document.createElement("p");
+              const span = document.createElement("span");
+              p.textContent = item.name;
+              span.textContent = item.place;
+              div.appendChild(p);
+              div.appendChild(span);
+              resultContainer.appendChild(div);
+            });
+          }
+          else {
+            resultContainer.style.display = "none";
+          }
+        }
+      });
+      
+      const toggleButton = document.getElementById("theme-toggle");
+      const body = document.body;
+      
+      searchIcon.addEventListener("click", () => {
+        nav.classList.toggle("openSearch");
+        nav.classList.remove("openNav");
+        if (searchResult.value.length === 0) {
+          resultContainer.style.display = "none";
+        }
+        if (nav.classList.contains("openSearch")) {
+          return searchIcon.classList.replace("uil-search", "uil-times");
+        }
+        searchIcon.classList.replace("uil-times", "uil-search");
+      });
+      
+      // page start with dark mode
+      
+      body.classList.add("dark-mode");
+      // Toggle between "toggle off and toggle on"//
+      
+      toggleButton.addEventListener("click", () => {
+        body.classList.toggle("dark-mode");
+        body.classList.toggle("light-mode");
+      
+        if (body.classList.contains("light-mode")) {
+          toggleButton.classList.remove("bi-toggle-off");
+          toggleButton.classList.add("bi-toggle-on");
+          document.getElementById("menuBarsColor").style.color = "black";
+          document.querySelectorAll("a").forEach((link) => link.style.color = "black");
+        } else {
+          toggleButton.classList.remove("bi-toggle-on");
+          toggleButton.classList.add("bi-toggle-off");
+          document.getElementById("menuBarsColor").style.color = "white";
+          document.querySelectorAll("a").forEach((link) => link.style.color = "white");
+        }
+      });
+      
+      navOpenBtn.addEventListener("click", () => {
+        nav.classList.add("openNav");
+        nav.classList.remove("openSearch");
+        searchIcon.classList.replace("uil-times", "uil-search");
+      });
+      navCloseBtn.addEventListener("click", () => {
+        nav.classList.remove("openNav");
+      });
+      
+      document.addEventListener("DOMContentLoaded", function () {
+        const discordButton = document.getElementById("discord-button");
+        const discordPopup = document.getElementById("discord-popup");
+        const closeBtn = document.getElementById("close-btn");
+      
+        discordButton.addEventListener("click", function () {
+          discordPopup.style.display = "block";
+        });
+      
+        closeBtn.addEventListener("click", function () {
+          discordPopup.remove();
+        });
+      });
+      
+      document.addEventListener("DOMContentLoaded", function () {
+        const discordPopup = document.getElementById("discord-popup");
+        const closeBtn = document.getElementById("close-btn");
+      
+        discordButton.addEventListener("click", function () {
+          discordPopup.style.display = "block";
+        });
+      
+        closeBtn.addEventListener("click", function () {
+          discordPopup.style.display = "none";
+        });
+      });
+      const success = () => {
+        showAlert("You have successfully subscribed!", "success");
+      };
+      
+      const showAlert = (message, type) => {
+        const alertBox = document.getElementById("customAlert");
+        const alertText = document.getElementById("alertText");
+      
+        alertText.textContent = message;
+      
+        if (type === "success") {
+          alertBox.style.borderColor = "#4CAF50";
+          alertText.style.color = "#4CAF50";
+        } else {
+          alertBox.style.borderColor = "#f44336";
+          alertText.style.color = "#f44336";
+        }
+      
+        alertBox.classList.add("show");
+      
+        document.getElementById("closeAlert").addEventListener("click", () => {
+          alertBox.classList.remove("show");
+        });
+      };
+      
+      const subscriptionForm = document.getElementById("subscriptionForm");
+      const emailInput = document.getElementById("emailInput");
+      
+      subscriptionForm.addEventListener("submit", function (event) {
+        if (!emailInput.checkValidity()) {
+          showAlert("Please enter a valid email address.", "error");
+          emailInput.focus();
+          event.preventDefault();
+        } else {
+          success();
+        }
+      });
+      */
+
+    </script>
+    <script>
+      const content = [
+        "Dot box",
+        "Packabunchas",
+        "Spaceship Escort",
+        "Physi-c-tech",
+        "Squard Line",
+        "Formation absent"
+
+      ];
+
+      document.getElementById('searchResult').addEventListener('input', function () {
+        const query = this.value.toLowerCase();
+        filterContent(query);
+      });
+
+      function filterContent(query) {
+        const results = content.filter(item => item.toLowerCase().includes(query));
+        displayResults(results);
+      }
+
+      function displayResults(results) {
+        const resultsContainer = document.querySelector('.searching_results');
+        resultsContainer.innerHTML = ''; // Clear previous results
+
+        if (results.length === 0) {
+          resultsContainer.innerHTML = '<p>No results found</p>';
+          return;
+        }
+
+        results.forEach(result => {
+          const resultItem = document.createElement('div');
+          resultItem.textContent = result;
+          resultsContainer.appendChild(resultItem);
+        });
+      }
+
+    </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file