* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', sans-serif; 
}


.colors { color-scheme: #600319,  #d59e60, #e7d1db,  #f84450,  #0a1d48;} 

body { line-height: 1.6; color: #222; background-color: #fff; }
header, section { padding: 2rem 1rem; }

nav { background: #7B1B38; color: #fff; display: flex; justify-content: space-between; padding: 1rem; position: sticky; top: 0; z-index: 999; }
nav a { color: white; margin: 0 1rem; text-decoration: none; font-weight: bold; }

/***********************************/

.hero { 
  background: url('img/hero.jpeg') no-repeat center/cover; 
  height: 100vh; 
  background-color:  #d59e60;
  color: whitesmoke; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
}


.hero h1 { 
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
    font-size: 10rem; 
    color:whitesmoke;
}

/* Tablet: 601px to 1024px */
@media (max-width: 1024px) {
    .hero h1 {
      font-size: 5rem; /* e.g. 80px */
    }

    .hero h2 {
      font-size: 2rem; /* e.g. 80px */
    }

  }
  
  /* Mobile: 600px and below */
  @media (max-width: 600px) {
    .hero h1 {
      font-size: 4rem; /* e.g. 64px */
    }
    .hero h2 {
      font-size: 1.2rem; /* e.g. 64px */
    }
  }


/***********************************/

.section-title { text-align: center; margin-bottom: 1.5rem; font-size: 2rem; color: #7B1B38; font-family: "Barriecito", system-ui; }
.section-text { text-align: center; margin: 1.5rem; }
.section-text p { align: center; max-width: 800px; text-align: center; margin: auto; }

.band-members, .demos, .events { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 1.5rem; 
}

.card { 
    background: #E5D2D7; 
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
 

.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
.card img { width: 100%; height: 200px; object-fit: cover; }
.card-content { padding: 1rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.gallery img {
  width: 100%;
  height: 180px;             /* consistent height */
  object-fit: cover;         /* crop excess */
  transition: transform 0.3s ease, 
}

.gallery a:hover img {
  transform: scale(1.03);
}


footer { background: #7B1B38; color: white; text-align: center; padding: 1rem; position: relative; }
footer a { color: white; text-decoration: none; }

.social-bar { padding-top: 1rem; }
.social-bar a { color: white; margin: 0 0.5rem; font-size: 1.2rem; }

.contact-bar { text-align: center; margin: auto; }
.contact-bar a { color: #7B1B38; margin: 0 0.5rem; font-size: 2.5rem;  }

h2, h3, h4, p { 
  padding-top: 0.5rem; 
  padding-bottom: 0.2rem; 
} 

audio {padding-bottom: 0.5rem; }

.official ul { margin: 2rem; }