html {
  height: 100%;
  width: 100%;
  font-family: arial;
  --accentcolor: #9d13ec;
  --accentcolordark: #7b0194;
  --accentcolor2: #ffd20c;
  --bordercolor: black;
  --bgcolor: whitesmoke;
  --gapsize: 10px;
}

/* APLICAR LA IMAGEN DE FONDO CORRECTAMENTE AL BODY */
body {
  background-image: url("imagenes/fondo.png"); /* Asegúrate de que la ruta sea correcta */
  background-repeat: no-repeat;        
  background-position: center center; 
  background-attachment: fixed;       
  background-size: cover;             
  background-color: #1a0033; /* Color de respaldo si no carga la imagen */
  margin: 0;
  padding: 20px 0;
}

@font-face {
  font-family: 'Jersey 10';
  src: url('https://fonts.gstatic.com/s/jersey10/v1/jA43IipyO6ZlP_ZpUclw066FkNo.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

h1, .header-title {
  font-family: 'Jersey 10', sans-serif;
  font-size: 3.5rem;   
  line-height: 1; 
  margin: 0;
  padding: 10px 0;
  text-align: center;
}

.header-container, header {
  height: auto;        
  min-height: 120px;   
  overflow: hidden;
}

.subtitle-container, .announcement-box {
  margin-top: 20px;    
  clear: both;
}

.navigation a, .nav-links, button {
  font-family: 'Jersey 10', sans-serif;
  font-size: 1.3rem;   
  text-transform: uppercase;
}

.main-content, p {
  font-family: 'Jersey 10', sans-serif;
}

.maindiv {
  width: 700px;
  margin: auto;
}

.header {
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  height: 130px;
  background-color: var(--bgcolor);
  background-image: url("imagenes/banner.png");
  background-size: cover;
  background-position: center;
  margin-bottom: var(--gapsize);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; 
}

.bar {
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  background-color: var(--bgcolor);
  margin-bottom: var(--gapsize);
  text-align: center;
  padding-top: 7px;
  padding-bottom: 7px;
}

h3 {
  margin: 0px;
}

p {
  margin: 0px;
}


.row {
  display: flex;
  gap: var(--gapsize);
  height: 300px;
}

.navigation {
  font-family: 'Jersey 10', sans-serif;   
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  background-color: var(--bgcolor);
  text-align: center;
  box-sizing: border-box;
  width: 30%;
  height: 300px;
  

  font-size: 1.5rem; 
  color: #ffbb00;    
}

.titlebar {
  background-color: var(--accentcolor);
  border-bottom: 2px solid var(--accentcolordark);
  padding: 4px;
}

.buttonholder {
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: auto;
  height: 263px;
}

.navigationbutton {
  margin: 5px;
  padding: 5px;
  border: 2px solid var(--bordercolor);
  background-color: var(--accentcolor2);
}

h4 {
  margin: 0px;
}

a {
  color: var(--accentcolor);
}

.box1 {
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  background-color: var(--bgcolor);
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 70%;
  overflow-y: auto;
}

.bigtext {
  font-size: large;
  font-weight: bold;
}

strong {
  color: var(--accentcolordark);
}

.box2 {
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  background-color: var(--bgcolor);
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 26.65%;
}

.column {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer {
  box-shadow: 6px 6px 0px -1px var(--accentcolor);
  border: 2px solid var(--accentcolordark);
  outline: 2px solid var(--bordercolor);
  background-color: var(--bgcolor);
  margin-top: var(--gapsize);
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  text-align: center;
}

/* AQUÍ SE CORRIGIÓ LA LLAVE QUE FALTABA CERRAZ */
.header-img {
  max-width: 100%;
  max-height: 160px; 
  height: auto;
  width: auto;
  image-rendering: pixelated; 
}