body {
  background-color: #000;
  color: white;
  font-family: "Poppins", 'Open Sans', Arial, sans-serif;
}

header {
  background-color: #000;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: linear-gradient(195deg, rgb(30 2 2 / 97%), rgb(0, 0, 0)), url(/assets/img/backgrounds/featureBG.webp);
  background-position: center center;
  background-size: cover;
  padding: 10vh 0;
}

header h1 {
  font-size: 5vh;
  color: white;
  margin-bottom: 3vh;
  font-weight: bold;
}

header h2 {
  font-size: 3vh;
  color: white;
  margin-bottom: 2vh;
}

header p {
  font-size: 2vh;
  color: #ddd;
  line-height: 1.6;
}

.subRow {
  display: flex;
  align-items: center;
  margin-top: 4vh;
}

#reglamento {
  background-color: #000;
  padding: 10vh 7vw;
  color: white;
  background: linear-gradient(195deg, rgb(30 2 2 / 97%), rgb(0, 0, 0)), url(/assets/img/backgrounds/featureBG.webp);
  background-position: center center;
  background-size: cover;
}

#reglamento h1 {
  font-size: 4vh;
  color: white;
  margin-bottom: 6vh;
  text-align: center;
  font-weight: bold;
}

.reglamentoSection {
  margin-bottom: 6vh;
  padding: 3vh;
  border-radius: 1vh 0 1vh 0;
  background: linear-gradient(35deg, rgba(78, 55, 55, 0.068), black);
  border: 0.1vh solid var(--primaryColor);
}

.reglamentoSection h2 {
  color: var(--primaryColor);
  font-size: 2.5vh;
  margin-bottom: 2vh;
  font-weight: bold;
}

.reglamentoSection p {
  margin-bottom: 2vh;
  line-height: 1.8;
  font-size: 1.8vh;
}

.reglamentoSection ul {
  padding-left: 3vw;
  margin-bottom: 2vh;
}

.reglamentoSection li {
  margin-bottom: 1vh;
  line-height: 1.8;
  font-size: 1.8vh;
}

.reglamentoSection a {
  color: var(--primaryColor);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.reglamentoSection a:hover {
  opacity: 0.7;
}

.headerButton {
  background-color: var(--primaryColor);
  color: white;
  padding: 1vh 2vw;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
  display: inline-block;
  margin-top: 2vh;
}

.headerButton:hover {
  background-color: var(--primaryColorDarker, #b71c1c);
  color: white;
}

@media (max-width: 768px) {
  .subRow {
    flex-direction: column;
    text-align: center;
  }
  
  .subRow .col-8,
  .subRow .col-4 {
    width: 100%;
    margin-bottom: 3vh;
  }
  
  header h1 {
    font-size: 4vh;
  }
  
  header h2 {
    font-size: 2.5vh;
  }
  
  .reglamentoSection {
    padding: 2vh;
  }
}