@import url('https://fonts.cdnfonts.com/css/gothic-pixel');
/* CSS de ejemplo proporcionado por Neocities */
/* 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-color: #e0e0e0; /* Gris oscuro para que resalte la hoja */
  margin: 0;
  padding: 40px 0; /* Espacio arriba y abajo de la hoja */
  display: flex;
  justify-content: center; /* Centra la hoja horizontalmente */
  

}

/* Estilos del contenedor que simula la hoja */
.hoja {
  background-color: white; /* Color de la hoja */
  width: 90%; /* Ancho de la hoja (puedes usar píxeles, ej: 800px) */
  max-width: 1000px; /* Ancho máximo para que no se desarme en pantallas gigantes */
  min-height: 100vh; /* Altura mínima para que parezca una hoja larga */
  padding: 10px; /* Margen interno para que el texto no toque los bordes */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra para dar efecto de relieve */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

/* El contenedor Grid */
.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  
  /* Aquí activamos el espacio entre columnas y filas (cámbiaro si quieres más o menos) */
  grid-gap: 10px;
  min-height: 100vh;
}

/* 
  Coordenadas corregidas para que no se salten columnas 
  y el gap funcione de manera uniforme.
*/
.div1 { 
  grid-area: 1 / 1 / 3 / 4; 
}

.div2 { 
  grid-area: 1 / 4 / 13 / 10; 
}

.div3 { 
  grid-area: 1 / 10 / 13 / 13; 
}

.div1, .div2, .div3 {
  display: flex;
  flex-direction: column; /* Alinea el título arriba y el contenido abajo */
  text-align: center;
  padding: 15px;          /* Espacio interno para que el texto no pegue en los bordes del bloque */
  background-color: #f9f9f9; /* Un gris muy claro opcional para notar los bloques, puedes quitarlo */
  border-radius: 5px;     /* Bordes ligeramente redondeados */
}
/* Títulos Góticos Pixelados (Estilo Castlevania / Grimorio) */
/* Títulos con la fuente medieval/gótica y la sombra pixelada */
.div1 h2, .div2 h2, .div3 h2 {
  font-family: 'Pixelify Sans', serif;
  font-size: 2.0rem;
  text-align: center;
  color: black; /* Color hueso/dorado antiguo */ /* Sombra negra que le da el look retro/pixel */
  
  margin-top: 0;
  margin-bottom: 12px;
  border-bottom: 2px double #8a7355; 
  padding-bottom: 8px;
}

/* El texto de los párrafos con la fuente pixel limpia */
.div1 p, .div2 p, .div3 p {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2c1e11; /* Color tinta oscura */
}