/* 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('fondo.jpg'); 
    background-repeat: no-repeat;
    background-size: cover; /* La imagen cubre todo el fondo */
    background-attachment: fixed; /* La imagen se queda fija al hacer scroll */
    background-position: center center; /* Centra la imagen */
    
    /* Configuración de fuente y color base */
    font-family: 'Press Start 2P', cursive; /* Fuente pixel art importada */
    color: #333; /* Color de texto general: gris oscuro */
    line-height: 1.6; /* Espaciado entre líneas para mejor lectura */
    margin: 0; /* Elimina el margen predeterminado del body */
    padding: 0; /* Elimina el padding predeterminado del body */
}

/* --- Contenedor Principal (para centrar y limitar el ancho del contenido) --- */
.container {
    max-width: 800px; /* Ancho máximo del contenido. Ajusta si lo quieres más ancho o más estrecho */
    margin: 40px auto; /* Centra el contenedor horizontalmente y le da espacio arriba/abajo */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente blanco para el contenido */
    padding: 30px; /* Espacio interno del contenedor */
    border: 2px solid #555; /* Borde alrededor del contenedor */
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2); /* Sombra "pixelada" para un efecto retro */
    box-sizing: border-box; /* Asegura que padding y border no aumenten el ancho total */
}

/* --- Estilos para Encabezados (h1, h2, h3) --- */
h1, h2, h3 {
    text-align: center; /* Centra los títulos */
    color: #007bff; /* Color azul para los títulos */
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); /* Pequeña sombra de texto */
    margin-bottom: 20px;
}

/* --- Estilos para Párrafos --- */
p {
    margin-bottom: 15px;
    font-size: 1em; /* Tamaño de fuente normal */
}

/* --- Estilos para Enlaces (links) --- */
a {
    color: #007bff; /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado por defecto */
    font-weight: bold; /* Texto en negrita */
}

a:hover {
    color: #0056b3; /* Color del enlace al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}

/* --- Estilos para la Navegación (Header y Nav) --- */
header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #ccc; /* Línea de separación para el header */
}

nav {
    text-align: center;
    margin-top: 15px;
}

nav a {
    margin: 0 15px; /* Espacio entre los enlaces de navegación */
    font-size: 1.1em;
    display: inline-block; /* Permite aplicar márgenes */
}

/* --- Estilos para las Secciones de Posts Individuales --- */
.post {
    background-color: rgba(240, 240, 240, 0.8); /* Fondo semi-transparente para cada post */
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 25px; /* Espacio entre posts */
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1); /* Sombra para los posts */
}

.post h2 {
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
}

.post .date {
    font-size: 0.8em;
    color: #666;
    text-align: right;
    margin-top: -10px; /* Ajuste para que la fecha quede más cerca del título */
    margin-bottom: 15px;
}

/* --- Estilos para el Pie de Página (Footer) --- */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dashed #ccc; /* Línea de separación para el footer */
    font-size: 0.9em;
    color: #666;

}