mengubah mainboard

mainboard.css

@@ -1,132 +1,173 @@
-/* BODY */
+/* ================================
+   🌈 GLOBAL THEME (SAMA DENGAN LOGIN/REGISTER)
+================================== */
+
 body {
   margin: 0;
-  font-family: Arial, sans-serif;
+  font-family: Poppins, Arial, sans-serif;
-  background: #f7f6ff; /* warna lembut */
+  background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
-  color: #333;
   min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
   position: relative;
-  overflow: hidden;
 }
 
-/* Animated Background Elements */
+/* Glow Background Floating */
 .bg-circle {
   position: absolute;
   border-radius: 50%;
-  filter: blur(60px);
+  filter: blur(70px);
+  opacity: 0.7;
   animation: float 6s infinite ease-in-out;
 }
 
-.circle-one { top: 20%; left: 10%; width: 200px; height: 200px; background: rgba(255,255,255,0.15); }
+.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); }
-.circle-two { bottom: 15%; right: 10%; width: 280px; height: 280px; background: rgba(255,192,203,0.25); animation-delay: 1s; }
+.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; }
-.circle-three { top: 50%; left: 50%; width: 200px; height: 200px; background: rgba(200,120,255,0.25); animation-delay: 2s; }
+.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; }
 
 @keyframes float {
   0%,100% { transform: translateY(0); }
-  50% { transform: translateY(-20px); }
+  50% { transform: translateY(-25px); }
 }
 
-/* MAIN CONTAINER */
+/* ================================
+   🌟 CONTAINER CARD
+================================== */
+
 .container {
-  padding: 20px;
+  width: 750px;
-  max-width: 1100px;
-  margin: auto;
-  position: relative;
-  z-index: 10;
   background: rgba(255,255,255,0.7);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(15px);
-  padding: 40px;
+  padding: 45px;
-  border-radius: 25px;
+  border-radius: 28px;
-  width: 600px;
+  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
   z-index: 10;
-  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
+  animation: fadeIn 0.6s ease-out;
 }
 
-/* HEADER CARD */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ================================
+   👤 HEADER PROFILE 
+================================== */
+
 .header {
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.65);
   backdrop-filter: blur(15px);
-  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+  padding: 22px;
   border-radius: 20px;
-  padding: 20px;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 30px;
+  align-items: center;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+  margin-bottom: 35px;
 }
 
-.user-info { display: flex; align-items: center; gap: 15px; }
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
 
 .user-icon {
-  width: 55px;
+  width: 60px;
-  height: 55px;
+  height: 60px;
   border-radius: 50%;
-  background: linear-gradient(45deg, purple, hotpink);
+  background: linear-gradient(135deg, purple, hotpink);
-  color: white;
   display: flex;
-  justify-content: center;
   align-items: center;
-  font-size: 22px;
+  justify-content: center;
+  color: white;
+  font-size: 25px;
   font-weight: bold;
-  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+  box-shadow: 0 5px 18px rgba(0,0,0,0.22);
 }
 
-/* BUTTON STYLE */
+/* ================================
+   🎀 BUTTONS
+================================== */
+
 .btn {
-  padding: 12px 22px;
+  padding: 12px 25px;
   border: none;
-  border-radius: 12px;
+  border-radius: 14px;
   cursor: pointer;
-  font-size: 15px;
+  font-size: 16px;
-  transition: .3s;
+  transition: .25s;
 }
 
 .gold {
   background: linear-gradient(to right, gold, orange);
   color: white;
 }
-.gold:hover { transform: scale(1.05); }
+.gold:hover {
+  transform: scale(1.07);
+  box-shadow: 0 4px 12px rgba(255,165,0,0.4);
+}
 
 .gray {
   background: #444;
   color: white;
 }
-.gray:hover { background: #222; transform: scale(1.05); }
+.gray:hover {
-
+  background: #222;
-/* TITLE */
+  transform: scale(1.05);
-.title { text-align: center; margin: 40px 0; }
-.title h1 {
-  background: -webkit-linear-gradient(purple, hotpink);
-  -webkit-background-clip: text;
-  color: transparent;
-  font-size: 42px;
 }
 
-/* STAGE CARDS */
+/* ================================
+   📝 TITLE
+================================== */
+
+.title {
+  text-align: center;
+  margin: 40px 0;
+}
+
+.title h1 {
+  font-size: 46px;
+  background: linear-gradient(purple, hotpink);
+  background-clip: text;             /* Standar */
+  -webkit-background-clip: text;
+  color: transparent;
+  font-weight: bold;
+  text-shadow: 0 0 10px rgba(255,255,255,0.2);
+}
+
+/* ================================
+   🎮 STAGE SELECTION GRID
+================================== */
+
 .stage-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 25px;
+  gap: 30px;
 }
 
 .stage-btn {
-  background: rgba(255,255,255,0.6);
+  background: rgba(255,255,255,0.65);
   backdrop-filter: blur(10px);
   padding: 35px;
   border-radius: 25px;
   text-align: center;
   cursor: pointer;
-  transition: .3s;
+  transition: .25s ease;
-  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
 }
 
 .stage-btn:hover {
-  transform: scale(1.07);
+  transform: scale(1.08);
-  background: rgba(255,255,255,0.8);
+  background: rgba(255,255,255,0.88);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
 }
 
-/* ICON EMOJI */
 .icon {
-  font-size: 45px;
+  font-size: 48px;
   display: block;
   margin-bottom: 12px;
 }

mainboard.html

@@ -26,7 +26,7 @@
     </header>
 
     <div class="title">
-      <h1>🎮 Memory Flip Card Game</h1>
+      <h1 class="title">Memory Flip Card Game</h1>
       <p>Pilih tingkat kesulitan untuk memulai permainan</p>
     </div>