body{
    text-align: center;
    background: radial-gradient(circle at center, #1e3c72, #2a5298, #202020);
    /* background: linear-gradient(to right, #ff5f6d, #ffc371); */
    /* background: radial-gradient(circle, #ffafbd, #ffc3a0); */
    
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #f8ffae 0%, #43c6ac 100%);
    min-height: 100vh;
    color: #222;
}
.btn{
    height: 200px;
    width: 200px;
    border-radius: 20%;
    border: 10px solid black;
    margin: 2.3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
}
.btn:active, .btn.flash, .btn.userFlash {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.btn-container{
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.yellow{
    background-color: #f99b45;
}
.red{
    background-color:#d95980;
}
.green{
    background-color: #819ff9;
}
.purple{
    background-color: #63aac0;
}

.flash{
    background-color: white;
}
.userFlash{
    background-color: green;
}
/* Heading styles */
h1, h2, h3 {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #222;
    text-shadow: 0 2px 8px rgba(67,198,172,0.12);
}

/* Add a subtle card effect for game area */
.game-area {
    background: rgba(255,255,255,0.7);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(67,198,172,0.15);
    padding: 2rem;
    margin: 2rem auto;
    max-width: 600px;
}
/* Responsive styles */
@media (max-width: 900px) {
  .btn {
    height: 120px;
    width: 120px;
    margin: 1.2rem;
    border-width: 7px;
  }
}

@media (max-width: 600px) {
  .btn-container {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .btn {
    height: 80px;
    width: 80px;
    margin: 0.7rem;
    border-width: 5px;
    font-size: 1.2rem;
  }
  body {
    font-size: 1rem;
    padding: 0.5rem;
  }
}



@media (max-width: 240px) {
  .btn-container {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .btn {
    height: 40px;
    width: 40px;
    margin: 0.2rem;
    border-width: 2px;
    font-size: 0.7rem;
  }
  body {
    font-size: 0.7rem;
    padding: 0.2rem;
  }
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');