/* --- Configuración General (Colores y Fuentes) --- */
body {
  background-color: #1a1a24; /* Un fondo oscuro pero no negro puro para no cansar la vista */
  color: #e0e0e0;            /* Texto gris claro/crema, mucho más suave que el blanco puro */
  font-family: "Courier New", Courier, monospace; /* Fuente clásica de terminal/máquina de escribir */
  line-height: 1.6;          /* Espaciado de líneas cómodo para lectura */
  padding: 20px;
  margin: 0;
}

/* --- Contenedor Estilo Ventana/Consola --- */
.window-container {
  max-width: 700px;          /* Evita que las líneas de texto sean eternas y cansen al leer */
  margin: 0 auto;            /* Centra la página en la pantalla */
  background-color: #23232f; /* Fondo del contenedor ligeramente más claro que el fondo general */
  padding: 25px;
  border: 3px double #5c5c77; /* Borde doble clásico de interfaces antiguas */
  box-shadow: 5px 5px 0px #0c0c12; /* Sombra sólida, no difuminada (muy retro) */
}

/* --- Enlaces (Links) --- */
a {
  color: #81a1c1;            /* Azul pastel, visible y estético */
  text-decoration: none;     /* Quita el subrayado aburrido */
  font-weight: bold;
}

a:hover {
  color: #a3be8c;            /* Cambia a verde pastel al pasar el mouse */
  text-decoration: underline;/* Aparece el subrayado al interactuar */
}

/* --- Encabezado y Títulos --- */
h1 {
  color: #88c0d0;            /* Un tono cian/celeste retro */
  text-align: center;
  margin-top: 0;
}

.subtitle {
  text-align: center;
  color: #b48ead;            /* Morado tenue para el subtítulo */
  font-style: italic;
}

h2 {
  color: #ebcb8b;            /* Amarillo cálido para los títulos de las notas */
  font-size: 1.3rem;
  margin-bottom: 5px;
}

/* --- Líneas divisorias --- */
hr {
  border: 0;
  border-top: 2px dashed #5c5c77; /* Línea de guiones retro */
  margin: 20px 0;
}

/* --- Estructura de las Notas (Posts) --- */
.post {
  margin-bottom: 40px;       /* Separa una nota de la otra */
}

.post-date {
  font-size: 0.85rem;
  color: #707880;            /* Color apagado para la fecha */
  display: block;
  margin-bottom: 15px;
}

/* --- Elementos dentro del Blog --- */
ul {
  padding-left: 20px;
  list-style-type: "/* ";    /* Cambia los círculos de la lista por un estilo de comentario de código */
}

li {
  margin-bottom: 5px;
}

.blog-img {
  max-width: 100%;           /* Evita que las imágenes grandes rompan el diseño */
  height: auto;
  border: 1px solid #5c5c77;
  padding: 5px;
  background-color: #1a1a24;
  display: block;
  margin: 15px 0;
}

footer {
  text-align: center;
  font-size: 0.9rem;
  color: #707880;
}