body {
  margin:0;
  font-family:Poppins;
  text-align:center;
}

/* HERO */
#hero {
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: linear-gradient(135deg,#d0f4de,#fce1e4,#ede7f6,#e0f7fa);
}

.hero-content h1 {font-size:3rem;}
.hero-content p {font-size:1.2rem;}

.category-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:15px;
}

.category-btn {
  padding:20px;
  border-radius:15px;
  cursor:pointer;
  background:white;
}

/* QUIZ */
#quiz-container {
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* CATEGORY BACKGROUNDS */
.science-bg {background:#e0f7fa;}
.maths-bg {background:#fff3e0;}
.english-bg {background:#f3e5f5;}
.gk-bg {background:#e8f5e9;}

#question-text {font-size:2rem;}

.option-btn {
  margin:10px;
  padding:15px;
  width:250px;
  border-radius:10px;
}

.correct {background:green;color:white;}
.wrong {background:red;color:white;}

#progress-container {
  width:80%;
  height:10px;
  background:#ddd;
}
#progress-bar {
  height:100%;
  background:orange;
  width:0%;
}

/* GAME CONTROLS */
.game-controls {
  position:fixed;
  bottom:20px;
  display:flex;
  gap:20px;
}

.game-controls button {
  padding:15px;
  border-radius:50%;
  border:none;
  font-size:18px;
}

/* COMPLETION */
#completion-screen {
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

/* BUTTONS */
#music-toggle,#install-btn {
  position:fixed;
  top:10px;
  padding:8px;
}
#music-toggle {right:10px;}
#install-btn {right:60px;}