/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("images/fondo.png");
  background-repeat: repeat;
  background-color: #f2f2f2;

  color: black;
  font-family: Arial, sans-serif;
  padding: 20px;

  overflow-y: auto;   /* ← ESTO permite que la página se mueva */
}

/* Contenedor principal */
.page {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid #999;
  background: #fff;
  padding: 10px;
}

/* Layout de tres columnas */
.content {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 10px;
}

/* Columnas laterales */
.sidebar {
  border: 1px solid #999;
  padding: 10px;
}

/* Columna central */
main {
  border: 1px solid #999;
  padding: 15px;
}

header h1 {
  font-size: 100px;          /* tamaño del texto */
  color: #003366;          /* color (azul oscuro de ejemplo) */
  font-family: "Arial", sans-serif;  /* tipo de letra */
  text-align: center;      /* centrar texto */
  margin: 0;               /* quitar márgenes raros */
  letter-spacing: 4px;     /* espacio entre letras (opcional, estilo retro) */
}

/* Barra superior */
.top-bar {
  border: 1px solid #999;
  padding: 10px;
  margin-bottom: 10px;

  display: flex;
  justify-content: center;
  gap: 25px;

  background: #ffffff;
}