:root {
    color-scheme: light;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: Rubik, Inter, system-ui, sans-serif;
  }
  body {
    font-family: Nunito, Inter, system-ui, sans-serif;
  }

  /* Header specific styles */
.step-circle{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
height: 50px;
width: 50px;
}

/* game page */

.drum-header {
  background: linear-gradient(135deg, #2C3E50, #3498DB);
  position: relative;
  overflow: hidden;
  height: 24rem;
}
.drum-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
.drum-particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 6s infinite;
}
.game-container {
  background: rgba(44, 62, 80, 0.9);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  padding: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
}
.game-container img{
  max-width: 56rem;
  width: auto;
}
.play-button {
  background: linear-gradient(45deg, #E74C3C, #C0392B);
  transform-style: preserve-3d;
  transition: transform 0.2s, box-shadow 0.2s;
}
.play-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.drum-title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #f8f5f5, #eae6e6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
}


@media (max-width: 768px) {
  .drum-title {
    font-size: 2.25rem;
  }
  .drum-header {
  height: 12rem;
}
.game-container img{
  max-width: 100%;
  width: auto;
}
}