From ecae5f56e97ec6e9990dfaeada064ff3a4fe9380 Mon Sep 17 00:00:00 2001
From: Evelyn Sucitro <eevelynsucitro@gmail.com>
Date: Tue, 16 Dec 2025 09:36:28 +0700
Subject: [PATCH] Update

---
 Homepage.css        | 632 +-------------------------------------------
 Homepage.html       |   6 +-
 Homepage_Button.css | 192 ++++++++++++++
 Homepage_Header.css |  34 +++
 Homepage_Hero.css   | 131 +++++++++
 Homepage_Modal.css  | 177 +++++++++++++
 6 files changed, 541 insertions(+), 631 deletions(-)
 create mode 100644 Homepage_Button.css
 create mode 100644 Homepage_Header.css
 create mode 100644 Homepage_Hero.css
 create mode 100644 Homepage_Modal.css

diff --git a/Homepage.css b/Homepage.css
index b0f8a2d..ebc9326 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -38,12 +38,8 @@ body::before {
 }
 
 @keyframes gridMove {
-  0% {
-    transform: translate(0, 0);
-  }
-  100% {
-    transform: translate(50px, 50px);
-  }
+  0% { transform: translate(0, 0); }
+  100% { transform: translate(50px, 50px); }
 }
 
 /* Neon Particles */
@@ -77,628 +73,4 @@ body::before {
     transform: translateY(-30px) translateX(15px) scale(1.2);
     opacity: 1;
   }
-}
-
-/* Header */
-header {
-  position: relative;
-  z-index: 10;
-  padding: 25px 50px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(15px);
-  border-bottom: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
-}
-
-.logo {
-  font-size: 36px;
-  font-weight: 900;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 5px;
-  text-transform: uppercase;
-  animation: gradientShift 4s ease infinite;
-  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
-}
-
-@keyframes gradientShift {
-  0%, 100% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-}
-
-.btn {
-  padding: 14px 35px;
-  border: none;
-  border-radius: 15px;
-  font-weight: 700;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  text-decoration: none;
-  display: inline-block;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 2.5px;
-  font-family: 'Orbitron', sans-serif;
-  position: relative;
-  overflow: hidden;
-}
-
-.btn::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  transform: translate(-50%, -50%);
-  transition: width 0.6s, height 0.6s;
-}
-
-.btn:hover::before {
-  width: 300px;
-  height: 300px;
-}
-
-.btn-primary {
-  background: linear-gradient(135deg, #00eaff, #ff00ff);
-  color: #fff;
-  font-weight: 900;
-  box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
-  position: relative;
-  z-index: 1;
-}
-
-.btn-primary:hover {
-  box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
-  transform: translateY(-4px) scale(1.05);
-}
-
-.btn-login {
-  background: linear-gradient(135deg, #00eaff, #0099ff);
-  color: #fff;
-  font-weight: 900;
-  box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
-  border: 2px solid rgba(0, 234, 255, 0.5);
-  position: relative;
-  z-index: 1;
-  animation: loginPulse 2s ease-in-out infinite;
-}
-
-@keyframes loginPulse {
-  0%, 100% {
-    box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
-  }
-  50% {
-    box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7);
-  }
-}
-
-.btn-login:hover {
-  background: linear-gradient(135deg, #7d0dde, #00aaff);
-  box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9);
-  transform: translateY(-5px) scale(1.1);
-  border-color: rgba(0, 255, 255, 0.8);
-}
-
-/* Hero Section */
-.hero {
-  position: relative;
-  z-index: 10;
-  text-align: center;
-  padding: 140px 20px 120px;
-  max-width: 100%;
-  width: 100%;
-  margin: 0 auto;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 70vh;
-  overflow: hidden;
-}
-
-.hero-title {
-  font-size: 140px;
-  font-weight: 900;
-  margin-bottom: 25px;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
-  background-size: 200% 200%;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 18px;
-  text-transform: uppercase;
-  animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
-  line-height: 1.1;
-  position: relative;
-}
-
-.hero-title::after {
-  content: '2048';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  filter: blur(20px);
-  opacity: 0.5;
-  z-index: -1;
-  animation: titleBlur 3s ease-in-out infinite alternate;
-}
-
-@keyframes titleAnimation {
-  0%, 100% {
-    background-position: 0% 50%;
-    transform: scale(1);
-  }
-  50% {
-    background-position: 100% 50%;
-    transform: scale(1.02);
-  }
-}
-
-@keyframes titleGlow {
-  0% {
-    filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) 
-            drop-shadow(0 0 50px rgba(0, 234, 255, 0.5));
-  }
-  100% {
-    filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) 
-            drop-shadow(0 0 80px rgba(255, 0, 255, 0.6));
-  }
-}
-
-@keyframes titleBlur {
-  0% {
-    opacity: 0.3;
-  }
-  100% { 
-    opacity: 0.7;
-  }
-}
-
-.hero-subtitle {
-  font-size: 24px;
-  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 55px;
-  font-weight: 400;
-  letter-spacing: 6px;
-  text-transform: uppercase;
-  font-family: 'Exo 2', sans-serif;
-  animation: subtitleFade 2s ease-in-out infinite alternate;
-}
-
-@keyframes subtitleFade {
-  0% {
-    opacity: 0.7;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(-3px);
-  }
-}
-
-.cta-buttons {
-  display: flex;
-  gap: 25px;
-  justify-content: center;
-  flex-wrap: wrap;
-  animation: buttonsSlideUp 1s ease-out;
-}
-
-@keyframes buttonsSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.btn-cta {
-  padding: 18px 45px;
-  font-size: 19px;
-  border-radius: 15px;
-  font-weight: 900;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-  border: none;
-  font-family: 'Orbitron', sans-serif;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.btn-cta::after {
-  content: '';
-  position: absolute;
-  top: -50%;
-  left: -50%;
-  width: 200%;
-  height: 200%;
-  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  transform: rotate(45deg);
-  animation: buttonShine 3s infinite;
-}
-
-@keyframes buttonShine {
-  0% {
-    transform: translateX(-100%) translateY(-100%) rotate(45deg);
-  }
-  100% {
-    transform: translateX(100%) translateY(100%) rotate(45deg);
-  }
-}
-
-.btn-play {
-  background: linear-gradient(135deg, #ff00ff, #ff0066);
-  box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
-  color: #fff;
-}
-
-.btn-play:hover {
-  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
-}
-
-.btn-leaderboard {
-  background: linear-gradient(135deg, #ffd700, #ffaa00);
-  color: #0c001a;
-  box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
-}
-
-.btn-leaderboard:hover {
-  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
-}
-
-/* Floating Decoration Elements */
-.hero::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: -100px;
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
-  border-radius: 50%;
-  filter: blur(60px);
-  animation: floatLeft 8s ease-in-out infinite;
-  z-index: -1;
-}
-
-.hero::after {
-  content: '';
-  position: absolute;
-  top: 30%;
-  right: -100px;
-  width: 350px;
-  height: 350px;
-  background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
-  border-radius: 50%;
-  filter: blur(60px);
-  animation: floatRight 10s ease-in-out infinite;
-  z-index: -1;
-}
-
-@keyframes floatLeft {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  50% {
-    transform: translate(30px, -30px) scale(1.1);
-  }
-}
-
-@keyframes floatRight {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  50% {
-    transform: translate(-30px, 30px) scale(1.1);
-  }
-}
-
-/* ===========================
-   LOGOUT BUTTON STYLES
-=========================== */
-.btn-logout {
-  background: linear-gradient(135deg, #ff0066, #cc0033) !important;
-  color: #fff !important;
-  font-weight: 900;
-  box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
-  border: 2px solid rgba(255, 0, 102, 0.5);
-  position: relative;
-  z-index: 1;
-  animation: logoutPulse 2s ease-in-out infinite;
-}
-
-@keyframes logoutPulse {
-  0%, 100% {
-    box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
-  }
-  50% {
-    box-shadow: 0 8px 40px rgba(255, 0, 102, 0.9), 0 0 35px rgba(204, 0, 51, 0.7);
-  }
-}
-
-.btn-logout:hover {
-  background: linear-gradient(135deg, #ff0088, #dd0044) !important;
-  box-shadow: 0 12px 50px rgba(255, 0, 102, 1), 0 0 50px rgba(204, 0, 51, 0.9);
-  transform: translateY(-5px) scale(1.1);
-  border-color: rgba(255, 0, 102, 0.8);
-}
-
-/* ===========================
-   LOGOUT CONFIRMATION MODAL
-=========================== */
-.logout-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.85);
-  backdrop-filter: blur(12px);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.logout-overlay.active {
-  opacity: 1;
-}
-
-.logout-modal {
-  background: linear-gradient(145deg, rgba(30, 0, 50, 0.98), rgba(45, 0, 70, 0.98));
-  backdrop-filter: blur(30px);
-  border: 3px solid rgba(255, 0, 102, 0.5);
-  border-radius: 28px;
-  padding: 50px 45px 40px;
-  max-width: 440px;
-  width: 90%;
-  text-align: center;
-  box-shadow: 
-    0 40px 100px rgba(0, 0, 0, 0.8),
-    0 0 80px rgba(255, 0, 102, 0.4),
-    inset 0 2px 60px rgba(255, 0, 102, 0.08);
-  animation: modalSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-@keyframes modalSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(50px) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.logout-icon {
-  width: 80px;
-  height: 80px;
-  margin: 0 auto 25px;
-  background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(204, 0, 51, 0.2));
-  border: 3px solid rgba(255, 0, 102, 0.6);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 
-    0 0 30px rgba(255, 0, 102, 0.4),
-    inset 0 0 20px rgba(255, 0, 102, 0.1);
-  animation: iconPulse 2s ease-in-out infinite;
-}
-
-@keyframes iconPulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 0 30px rgba(255, 0, 102, 0.4);
-  }
-  50% {
-    transform: scale(1.05);
-    box-shadow: 0 0 45px rgba(255, 0, 102, 0.6);
-  }
-}
-
-.logout-icon svg {
-  width: 40px;
-  height: 40px;
-  color: #ff0066;
-  filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.6));
-}
-
-.logout-title {
-  font-size: 28px;
-  font-weight: 900;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #ff0066 0%, #ff0088 50%, #ff0066 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 15px;
-  letter-spacing: 2px;
-  filter: drop-shadow(0 0 20px rgba(255, 0, 102, 0.5));
-}
-
-.logout-message {
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 16px;
-  margin-bottom: 35px;
-  line-height: 1.6;
-  font-family: 'Exo 2', sans-serif;
-}
-
-.logout-buttons {
-  display: flex;
-  gap: 15px;
-  justify-content: center;
-}
-
-.btn-logout-cancel,
-.btn-logout-confirm {
-  padding: 14px 32px;
-  border: none;
-  border-radius: 12px;
-  font-weight: 800;
-  font-size: 15px;
-  font-family: 'Orbitron', sans-serif;
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.btn-logout-cancel {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.9);
-  border: 2px solid rgba(255, 255, 255, 0.3);
-}
-
-.btn-logout-cancel:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.5);
-  transform: translateY(-2px);
-  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
-}
-
-.btn-logout-confirm {
-  background: linear-gradient(135deg, #ff0066, #cc0033);
-  color: #fff;
-  border: 2px solid rgba(255, 0, 102, 0.6);
-  box-shadow: 0 4px 20px rgba(255, 0, 102, 0.5);
-}
-
-.btn-logout-confirm:hover {
-  background: linear-gradient(135deg, #ff0088, #dd0044);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(255, 0, 102, 0.7);
-  border-color: rgba(255, 0, 102, 0.9);
-}
-
-/* ===========================
-   LOGOUT SUCCESS MODAL
-=========================== */
-.logout-success-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.9);
-  backdrop-filter: blur(15px);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.logout-success-overlay.active {
-  opacity: 1;
-}
-
-.logout-success-modal {
-  background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(35, 0, 60, 0.98));
-  backdrop-filter: blur(30px);
-  border: 3px solid rgba(0, 255, 136, 0.5);
-  border-radius: 28px;
-  padding: 50px 45px;
-  max-width: 400px;
-  width: 90%;
-  text-align: center;
-  box-shadow: 
-    0 40px 100px rgba(0, 0, 0, 0.8),
-    0 0 80px rgba(0, 255, 136, 0.4),
-    inset 0 2px 60px rgba(0, 255, 136, 0.08);
-  animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes successBounce {
-  0% {
-    opacity: 0;
-    transform: scale(0.3) rotate(-10deg);
-  }
-  50% {
-    transform: scale(1.1) rotate(5deg);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-  }
-}
-
-.success-icon {
-  width: 90px;
-  height: 90px;
-  margin: 0 auto 25px;
-  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.2));
-  border: 3px solid rgba(0, 255, 136, 0.6);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 
-    0 0 40px rgba(0, 255, 136, 0.5),
-    inset 0 0 25px rgba(0, 255, 136, 0.1);
-  animation: successIconPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes successIconPulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 0 40px rgba(0, 255, 136, 0.5);
-  }
-  50% {
-    transform: scale(1.08);
-    box-shadow: 0 0 60px rgba(0, 255, 136, 0.7);
-  }
-}
-
-.success-icon svg {
-  width: 50px;
-  height: 50px;
-  color: #00ff88;
-  filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
-}
-
-.success-title {
-  font-size: 26px;
-  font-weight: 900;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #00ff88 0%, #00cc66 50%, #00ff88 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 12px;
-  letter-spacing: 2px;
-  filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.5));
-}
-
-.success-message {
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 15px;
-  line-height: 1.6;
-  font-family: 'Exo 2', sans-serif;
 }
\ No newline at end of file
diff --git a/Homepage.html b/Homepage.html
index b73ae04..7b94191 100644
--- a/Homepage.html
+++ b/Homepage.html
@@ -5,8 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Homepage</title>
   <link rel="stylesheet" href="Homepage.css">
-  <link rel="stylesheet" href="Homepage_Credit.css">
   <link rel="stylesheet" href="Homepage_Scrollbar.css">
+  <link rel="stylesheet" href="Homepage_Header.css">
+  <link rel="stylesheet" href="Homepage_Credit.css">
+  <link rel="stylesheet" href="Homepage_Hero.css">
+  <link rel="stylesheet" href="Homepage_Button.css">
+  <link rel="stylesheet" href="Homepage_Modal.css">
   <link rel="stylesheet" href="Homepage_Responsive.css">
 </head>
 <body>
diff --git a/Homepage_Button.css b/Homepage_Button.css
new file mode 100644
index 0000000..b7c9c78
--- /dev/null
+++ b/Homepage_Button.css
@@ -0,0 +1,192 @@
+/* General Button Styles */
+.btn {
+  padding: 14px 35px;
+  border: none;
+  border-radius: 15px;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 2.5px;
+  font-family: 'Orbitron', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transform: translate(-50%, -50%);
+  transition: width 0.6s, height 0.6s;
+}
+
+.btn:hover::before {
+  width: 300px;
+  height: 300px;
+}
+
+/* Primary & Login Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #00eaff, #ff00ff);
+  color: #fff;
+  font-weight: 900;
+  box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
+  position: relative;
+  z-index: 1;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
+  transform: translateY(-4px) scale(1.05);
+}
+
+.btn-login {
+  background: linear-gradient(135deg, #00eaff, #0099ff);
+  color: #fff;
+  font-weight: 900;
+  box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5);
+  border: 2px solid rgba(0, 234, 255, 0.5);
+  position: relative;
+  z-index: 1;
+  animation: loginPulse 2s ease-in-out infinite;
+}
+
+@keyframes loginPulse {
+  0%, 100% { box-shadow: 0 6px 30px rgba(0, 234, 255, 0.7), 0 0 20px rgba(0, 153, 255, 0.5); }
+  50% { box-shadow: 0 8px 40px rgba(0, 234, 255, 0.9), 0 0 35px rgba(0, 153, 255, 0.7); }
+}
+
+.btn-login:hover {
+  background: linear-gradient(135deg, #7d0dde, #00aaff);
+  box-shadow: 0 12px 50px rgb(117, 3, 230), 0 0 50px rgba(0, 153, 255, 0.9);
+  transform: translateY(-5px) scale(1.1);
+  border-color: rgba(0, 255, 255, 0.8);
+}
+
+/* CTA Buttons (Play & Leaderboard) */
+.btn-cta {
+  padding: 18px 45px;
+  font-size: 19px;
+  border-radius: 15px;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  border: none;
+  font-family: 'Orbitron', sans-serif;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-cta::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transform: rotate(45deg);
+  animation: buttonShine 3s infinite;
+}
+
+@keyframes buttonShine {
+  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
+  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
+}
+
+.btn-play {
+  background: linear-gradient(135deg, #ff00ff, #ff0066);
+  box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
+  color: #fff;
+}
+
+.btn-play:hover {
+  transform: translateY(-5px) scale(1.08);
+  box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
+}
+
+.btn-leaderboard {
+  background: linear-gradient(135deg, #ffd700, #ffaa00);
+  color: #0c001a;
+  box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
+}
+
+.btn-leaderboard:hover {
+  transform: translateY(-5px) scale(1.08);
+  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
+}
+
+/* Logout Specific Buttons */
+.btn-logout {
+  background: linear-gradient(135deg, #ff0066, #cc0033) !important;
+  color: #fff !important;
+  font-weight: 900;
+  box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5);
+  border: 2px solid rgba(255, 0, 102, 0.5);
+  position: relative;
+  z-index: 1;
+  animation: logoutPulse 2s ease-in-out infinite;
+}
+
+@keyframes logoutPulse {
+  0%, 100% { box-shadow: 0 6px 30px rgba(255, 0, 102, 0.7), 0 0 20px rgba(204, 0, 51, 0.5); }
+  50% { box-shadow: 0 8px 40px rgba(255, 0, 102, 0.9), 0 0 35px rgba(204, 0, 51, 0.7); }
+}
+
+.btn-logout:hover {
+  background: linear-gradient(135deg, #ff0088, #dd0044) !important;
+  box-shadow: 0 12px 50px rgba(255, 0, 102, 1), 0 0 50px rgba(204, 0, 51, 0.9);
+  transform: translateY(-5px) scale(1.1);
+  border-color: rgba(255, 0, 102, 0.8);
+}
+
+.btn-logout-cancel, .btn-logout-confirm {
+  padding: 14px 32px;
+  border: none;
+  border-radius: 12px;
+  font-weight: 800;
+  font-size: 15px;
+  font-family: 'Orbitron', sans-serif;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-logout-cancel {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.btn-logout-cancel:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.5);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
+}
+
+.btn-logout-confirm {
+  background: linear-gradient(135deg, #ff0066, #cc0033);
+  color: #fff;
+  border: 2px solid rgba(255, 0, 102, 0.6);
+  box-shadow: 0 4px 20px rgba(255, 0, 102, 0.5);
+}
+
+.btn-logout-confirm:hover {
+  background: linear-gradient(135deg, #ff0088, #dd0044);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(255, 0, 102, 0.7);
+  border-color: rgba(255, 0, 102, 0.9);
+}
\ No newline at end of file
diff --git a/Homepage_Header.css b/Homepage_Header.css
new file mode 100644
index 0000000..1394ab0
--- /dev/null
+++ b/Homepage_Header.css
@@ -0,0 +1,34 @@
+/* Header Container */
+header {
+  position: relative;
+  z-index: 10;
+  padding: 25px 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(20, 0, 40, 0.7);
+  backdrop-filter: blur(15px);
+  border-bottom: 3px solid rgba(0, 234, 255, 0.4);
+  box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
+}
+
+/* Logo Styles */
+.logo {
+  font-size: 36px;
+  font-weight: 900;
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 5px;
+  text-transform: uppercase;
+  animation: gradientShift 4s ease infinite;
+  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
+}
+
+@keyframes gradientShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
\ No newline at end of file
diff --git a/Homepage_Hero.css b/Homepage_Hero.css
new file mode 100644
index 0000000..8bc5b12
--- /dev/null
+++ b/Homepage_Hero.css
@@ -0,0 +1,131 @@
+.hero {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 140px 20px 120px;
+  max-width: 100%;
+  width: 100%;
+  margin: 0 auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 70vh;
+  overflow: hidden;
+}
+
+.hero-title {
+  font-size: 140px;
+  font-weight: 900;
+  margin-bottom: 25px;
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 18px;
+  text-transform: uppercase;
+  animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
+  line-height: 1.1;
+  position: relative;
+}
+
+.hero-title::after {
+  content: '2048';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  filter: blur(20px);
+  opacity: 0.5;
+  z-index: -1;
+  animation: titleBlur 3s ease-in-out infinite alternate;
+}
+
+@keyframes titleAnimation {
+  0%, 100% { background-position: 0% 50%; transform: scale(1); }
+  50% { background-position: 100% 50%; transform: scale(1.02); }
+}
+
+@keyframes titleGlow {
+  0% { filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 234, 255, 0.5)); }
+  100% { filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) drop-shadow(0 0 80px rgba(255, 0, 255, 0.6)); }
+}
+
+@keyframes titleBlur {
+  0% { opacity: 0.3; }
+  100% { opacity: 0.7; }
+}
+
+.hero-subtitle {
+  font-size: 24px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-bottom: 55px;
+  font-weight: 400;
+  letter-spacing: 6px;
+  text-transform: uppercase;
+  font-family: 'Exo 2', sans-serif;
+  animation: subtitleFade 2s ease-in-out infinite alternate;
+}
+
+@keyframes subtitleFade {
+  0% { opacity: 0.7; transform: translateY(0); }
+  100% { opacity: 1; transform: translateY(-3px); }
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 25px;
+  justify-content: center;
+  flex-wrap: wrap;
+  animation: buttonsSlideUp 1s ease-out;
+}
+
+@keyframes buttonsSlideUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Floating Decoration Elements */
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: -100px;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatLeft 8s ease-in-out infinite;
+  z-index: -1;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  top: 30%;
+  right: -100px;
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatRight 10s ease-in-out infinite;
+  z-index: -1;
+}
+
+@keyframes floatLeft {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(30px, -30px) scale(1.1); }
+}
+
+@keyframes floatRight {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  50% { transform: translate(-30px, 30px) scale(1.1); }
+}
\ No newline at end of file
diff --git a/Homepage_Modal.css b/Homepage_Modal.css
new file mode 100644
index 0000000..7050e93
--- /dev/null
+++ b/Homepage_Modal.css
@@ -0,0 +1,177 @@
+/* Logout Confirmation Modal */
+.logout-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(12px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.logout-overlay.active { display: flex; opacity: 1; }
+
+.logout-modal {
+  background: linear-gradient(145deg, rgba(30, 0, 50, 0.98), rgba(45, 0, 70, 0.98));
+  backdrop-filter: blur(30px);
+  border: 3px solid rgba(255, 0, 102, 0.5);
+  border-radius: 28px;
+  padding: 50px 45px 40px;
+  max-width: 440px;
+  width: 90%;
+  text-align: center;
+  box-shadow: 
+    0 40px 100px rgba(0, 0, 0, 0.8),
+    0 0 80px rgba(255, 0, 102, 0.4),
+    inset 0 2px 60px rgba(255, 0, 102, 0.08);
+  animation: modalSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes modalSlideUp {
+  from { opacity: 0; transform: translateY(50px) scale(0.9); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.logout-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 25px;
+  background: linear-gradient(135deg, rgba(255, 0, 102, 0.2), rgba(204, 0, 51, 0.2));
+  border: 3px solid rgba(255, 0, 102, 0.6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 
+    0 0 30px rgba(255, 0, 102, 0.4),
+    inset 0 0 20px rgba(255, 0, 102, 0.1);
+  animation: iconPulse 2s ease-in-out infinite;
+}
+
+@keyframes iconPulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(255, 0, 102, 0.4); }
+  50% { transform: scale(1.05); box-shadow: 0 0 45px rgba(255, 0, 102, 0.6); }
+}
+
+.logout-icon svg {
+  width: 40px;
+  height: 40px;
+  color: #ff0066;
+  filter: drop-shadow(0 0 10px rgba(255, 0, 102, 0.6));
+}
+
+.logout-title {
+  font-size: 28px;
+  font-weight: 900;
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #ff0066 0%, #ff0088 50%, #ff0066 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 15px;
+  letter-spacing: 2px;
+  filter: drop-shadow(0 0 20px rgba(255, 0, 102, 0.5));
+}
+
+.logout-message {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 16px;
+  margin-bottom: 35px;
+  line-height: 1.6;
+  font-family: 'Exo 2', sans-serif;
+}
+
+.logout-buttons {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+}
+
+/* Logout Success Modal */
+.logout-success-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(15px);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.logout-success-overlay.active { display: flex; opacity: 1; }
+
+.logout-success-modal {
+  background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(35, 0, 60, 0.98));
+  backdrop-filter: blur(30px);
+  border: 3px solid rgba(0, 255, 136, 0.5);
+  border-radius: 28px;
+  padding: 50px 45px;
+  max-width: 400px;
+  width: 90%;
+  text-align: center;
+  box-shadow: 
+    0 40px 100px rgba(0, 0, 0, 0.8),
+    0 0 80px rgba(0, 255, 136, 0.4),
+    inset 0 2px 60px rgba(0, 255, 136, 0.08);
+  animation: successBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+@keyframes successBounce {
+  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
+  50% { transform: scale(1.1) rotate(5deg); }
+  100% { opacity: 1; transform: scale(1) rotate(0deg); }
+}
+
+.success-icon {
+  width: 90px;
+  height: 90px;
+  margin: 0 auto 25px;
+  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 200, 100, 0.2));
+  border: 3px solid rgba(0, 255, 136, 0.6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 
+    0 0 40px rgba(0, 255, 136, 0.5),
+    inset 0 0 25px rgba(0, 255, 136, 0.1);
+  animation: successIconPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes successIconPulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 40px rgba(0, 255, 136, 0.5); }
+  50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(0, 255, 136, 0.7); }
+}
+
+.success-icon svg {
+  width: 50px;
+  height: 50px;
+  color: #00ff88;
+  filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.8));
+}
+
+.success-title {
+  font-size: 26px;
+  font-weight: 900;
+  font-family: 'Orbitron', sans-serif;
+  background: linear-gradient(135deg, #00ff88 0%, #00cc66 50%, #00ff88 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 12px;
+  letter-spacing: 2px;
+  filter: drop-shadow(0 0 25px rgba(0, 255, 136, 0.5));
+}
+
+.success-message {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 15px;
+  line-height: 1.6;
+  font-family: 'Exo 2', sans-serif;
+}
\ No newline at end of file