/* Estilos base */
body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

header {
  display: flex;
  background-color: #ffffff;
  color: #184b6b;
  padding: 1rem;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 15vh;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Contenedor principal del blog */
.blog-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  max-height: 300vh;
}

/* Cada entrada de blog */
.blog-entry {
  background-color: white;
  padding: 1rem;
  border-radius: 8px; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: justify;
  text-justify: inter-word;
}

.blog-entry:hover {
  background-color: #c6eaf4;
}

.blog-entry h2 {
  margin: 0;
}

.blog-entry .date,
.blog-entry .author {
  font-size: 0.9rem;
  color: gray;
}

.blog-entry p {
  margin-top: 0.5rem;
  color: #718096;
}

/* Paginación */
.pagination {
  text-align: center;
  margin-top: 1rem;
}

.pagination button {
  padding: 10px;
  margin: 5px;
  border: none;
  background-color: #5ba7bd;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.pagination button:disabled {
  background-color: #ccc;
}

/* Contenido de entrada completa */
.entry-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.entry-title {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

.entry-date,
.entry-author {
  font-size: 1.1rem;
  color: gray;
  margin-bottom: 0.5rem;
}

.entry-content {
  font-size: 1.1rem;
  margin-top: 1rem;
  line-height: 1.78;
  /*color: #184b6b;*/
}

/* Grid específico para la primera página */
.grid-first {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  height: 140vh;
  overflow: hidden;
}

.grid-first .div1  { grid-area: 1 / 1 / 3 / 3; }
.grid-first .div2  { grid-area: 1 / 3 / 3 / 4; }
.grid-first .div3  { grid-area: 3 / 1 / 4 / 2; }
.grid-first .div4  { grid-area: 3 / 2 / 4 / 3; }
.grid-first .div5  { grid-area: 3 / 3 / 4 / 4; }
.grid-first .div6  { grid-area: 4 / 1 / 5 / 2; }
.grid-first .div7  { grid-area: 4 / 2 / 5 / 3; }
.grid-first .div8  { grid-area: 4 / 3 / 5 / 4; }
.grid-first .div9  { grid-area: 5 / 1 / 6 / 2; }
.grid-first .div10 { grid-area: 5 / 2 / 6 / 3; }
.grid-first .div11 { grid-area: 5 / 3 / 6 / 4; }

/* Grid para el resto de las páginas */
.grid-rest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  height: 140vh;
}

/* Contenedor individual de cada blog-entry */
.grid-first > div,
.grid-rest > div {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.grid-first .div1 .extract , .grid-first .div2 .extract{
  line-height: 1.4;
  font-size: 1.105rem;
}

.extract {
  padding-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.blog-link {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Contenedor de paginación */
.pagination {
  text-align: center;
  margin-top: 1rem;
}

/* Estilos para los botones de la paginación (Anterior, Siguiente) */
.pagination form button {
  padding: 10px 15px;
  margin: 0 5px;
  border: none;
  background-color: #5ba7bd;
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1rem;
}

.pagination form button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Estilo para los enlaces de las páginas */
.pagination a {
  padding: 6px 12px;
  background-color: #eee;
  border-radius: 4px;
  margin: 0 5px;
  text-decoration: none;
  font-size: 1rem;
  color: #5ba7bd;
}

.pagination a:hover {
  background-color: #c6eaf4;
}

.pagination a.active {
  background-color: #5ba7bd;
  color: white;
}

/* Estilo para los puntos suspensivos */
.pagination span {
  padding: 6px 12px;
  background-color: #eee;
  border-radius: 4px;
  margin: 0 5px;
  color: #718096;
  font-size: 1rem;
}

/* Estilo general para el contenedor de los números de página */
.pagination div {
  display: inline-block;
  margin-left: 20px;
}

/* Estilo para los botones de paginación (deshabilitados) */
.pagination button[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 15vh;
  border-radius: 50%;
  margin: 15px;
}