html, body {
  margin: 0; /* Elimina los márgenes por defecto del navegador */
  padding: 0; /* Elimina los rellenos por defecto */
  overflow: hidden;       /* solo oculta scroll HORIZONTAL, deja scroll vertical si hace falta */
  font-family: 'Lucida Console', sans-serif; /* Fuente principal usada en la página */
  font-size: 15px; /*Tamaño de las letras*/
  color: black; /* Color de texto por defecto */
  background: repeating-linear-gradient(
    45deg,
    #cc3333,
    #cc3333 20px,
    #ffffff 20px,
    #ffffff 40px
  );
  background-size: cover; /* Hace que el fondo cubra toda la pantalla */
  background-repeat: no-repeat; /* Evita que la imagen de fondo se repita */
  background-position: center; /* Centra el fondo */
  min-height: 100vh;        /* CAMBIO: ahora el cuerpo puede crecer si hay más contenido */
  width: 100vw;  /* Ancho total de la ventana del navegador */
}

h1 {
  background-color: #add8e6; /* Fondo celeste claro */
  color: #000; /* Texto en negro */
  text-align: center; /* Centra el texto horizontalmente */
  padding: 15px; /* Espacio interno arriba/abajo y a los lados */
  margin: 8px auto; /* Margen exterior vertical + centrado horizontal */
  width: fit-content; /* El ancho se ajusta al contenido */
  border-radius: 12px; /* Bordes redondeados */
  border: 2px solid white; /* Borde blanco sólido */
  font-size: 1.7rem; /* Tamaño de letra grande (2x lo normal) */
}

.contenido {
  margin-top: -15px; /* Espacio superior */
  display: flex; /* Usa flexbox para alinear el contenido */
  justify-content: center; /* Centra horizontalmente los hijos */
  flex-direction: row;
  flex-wrap: wrap;       /* Evita que se vayan a otra línea */
  align-items: flex-start;
  width: 100%; /* Ancho total de la ventana */
  box-sizing: border-box; /* Incluye padding y border en el ancho/alto */
  gap: 20px;
  padding:20px;
}