/* style/main.css */

/* --- Estilos Globales (BODY) --- */
body {
    font-family: 'Playfair Display', serif;
    color: #333;
    /* Color de fondo para el centro de la página (donde no hay imágenes),
       similar al 'bg-light' de Bootstrap (#f8f9fa) */
    background-color: #f8f9fa; 

    /* 1. Definir ambas imágenes de fondo y sus rutas (.jpg) */
    background-image: 
        url('../img/border_r.png'), /* Imagen de la izquierda */
        url('../img/border_l.png');  /* Imagen de la derecha */

    /* 2. Posición: pegadas a los extremos izquierdo y derecho */
    background-position: 
        left top,   
        right top;  

    /* 3. Repetición vertical */
    background-repeat: 
        repeat-y, 
        repeat-y;

    /* 4. Fijas al hacer scroll */
    background-attachment: fixed;
    
    /* 5. TAMAÑO RESPONSIVE: 5vw (5% del ancho de la ventana) y altura automática */
    background-size: 5vw auto, 5vw auto;
}

/* --- Media Queries (Opcional, para control fino en distintos dispositivos) --- */

/* Limitamos el tamaño del borde para que no sea excesivo en monitores grandes */
@media (min-width: 1200px) {
    body {
        background-size: 80px auto, 80px auto; 
    }
}

/* Reducimos un poco el borde en dispositivos muy pequeños */
@media (max-width: 576px) {
    body {
        background-size: 4vw auto, 4vw auto;
    }
}

/* --- Estilos de Tipografía --- */
h1, h2 {
    font-family: 'Pirata One', cursive;
}

/* --- Utilidad para Justificar Texto (Reemplazo de la clase Bootstrap) --- */
.text-justify {
    text-align: justify !important;
}