:root {
    --primary-bg-color: rgba(13, 17, 23, 0.8);
    --text-color: #E6F1FF;
    --accent-color: #FFD700;
    --header-text-color: #FFFFFF;
    --border-color: rgba(255, 215, 0, 0.3);
    --sanskrit-color: #FFFFFF;
    --hindi-color: #ADD8E6;
    --romanized-hindi-color: #B2DFDB;
    --header-font: 'Poppins', sans-serif;
    --body-font: 'Georgia', 'Roboto', serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Roboto:wght@400;700&display=swap');

html { scroll-behavior: smooth; }

body {
    font-family: var(--body-font);
    background-color: #000; /* Fallback color */
    color: var(--text-color);
    margin: 0;
    line-height: 1.8;
    font-size: 18px;
    /* This makes the background image cover the screen and stay fixed */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* --- BACKGROUND IMAGES FOR EACH CHAPTER --- */
.home-bg { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/2150/sky-space-dark-galaxy.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Welcoming Cosmos */

.chapter-1-bg { background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('https://images.pexels.com/photos/87651/earth-blue-planet-globe-planet-87651.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); }
.chapter-2-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/39561/solar-flare-sun-eruption-energy-39561.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Burst of Light for Awakening Knowledge */
.chapter-3-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Dynamic Galaxy for Cosmic Action */
.chapter-4-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Deep Space for Transcendental Wisdom */
.chapter-5-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/1906658/pexels-photo-1906658.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Solitary Planet for Renunciation */
.chapter-6-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/1274260/pexels-photo-1274260.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Mesmerizing Nebula for Meditation */
.chapter-7-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/176851/pexels-photo-176851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* The Grandeur of the Milky Way for the Absolute */
.chapter-8-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/816608/pexels-photo-816608.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Celestial Pathway for Attaining the Supreme */
.chapter-9-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Abstract Light for Confidential Knowledge */
.chapter-10-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/998641/pexels-photo-998641.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Vibrant Nebula for Divine Glories */
.chapter-11-bg { background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/1136575/pexels-photo-1136575.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* An Exploding Supernova for the Universal Form */
.chapter-12-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/32237/pexels-photo.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Focused Ethereal Light for Devotion */
.chapter-13-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Abstract Field of Light for The Field and Knower */
.chapter-14-bg { background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/2832061/pexels-photo-2832061.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Nebula with Three Distinct Colors for the Three Gunas */
.chapter-15-bg { background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/2885320/pexels-photo-2885320.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* A Nebula with Root-like Structures for the Cosmic Tree */
.chapter-16-bg { background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.pexels.com/photos/47367/full-moon-moon-bright-sky-47367.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); } /* Contrast of Light and Dark on a Planet */
.chapter-17-bg { background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); }
.chapter-18-bg { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.pexels.com/photos/110854/pexels-photo-110854.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); }
.container { max-width: 960px; margin: 0 auto; padding: 20px; }

.main-header {
    background-color: rgba(10, 10, 10, 0.7);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.main-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; flex-wrap: wrap; }

.logo {
    font-family: var(--header-font);
    font-size: 1.8em;
    color: var(--header-text-color);
    text-decoration: none;
    font-weight: 700;
    text-shadow: 0 0 5px var(--accent-color);
}
.logo span { color: var(--accent-color); }

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.nav-links a:hover, .nav-links a.active { background-color: var(--accent-color); color: #000000; }

.page-section { padding: 80px 20px 40px; }

h1, h2 {
    font-family: var(--header-font);
    color: var(--header-text-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 0 10px var(--accent-color);
}
h1.main-title {
    font-size: 5em; /* Larger title for home page */
    border: none;
    line-height: 1.2;
}
h2 { font-size: 2.5em; border-bottom: 2px solid var(--border-color); }

.chapter-intro {
    font-size: 1.2em;
    text-align: center;
    margin: -20px auto 40px;
    max-width: 80%;
    color: var(--accent-color);
    font-weight: bold;
    font-style: italic;
}

.verse-card {
    background-color: var(--primary-bg-color);
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--accent-color);
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.verse-card h4 {
    font-family: var(--header-font);
    font-size: 1.3em;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.sanskrit { font-size: 1.25em; font-weight: bold; line-height: 1.8; color: var(--sanskrit-color); margin-bottom: 15px; }
.hindi { color: var(--hindi-color); margin-bottom: 15px; font-size: 1.1em; }
.romanized-hindi { color: var(--romanized-hindi-color); font-style: italic; margin-bottom: 15px; font-size: 1.05em; }
.english { color: var(--text-color); font-style: italic; font-size: 1.05em; }

.main-footer {
    text-align: center;
    padding: 40px 20px;
    background-color: rgba(10, 10, 10, 0.8);
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
}

/* --- HOME PAGE CHAPTER NAVIGATION --- */
.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 50px;
}
.chapter-link {
    background-color: rgba(13, 17, 23, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--header-font);
    font-size: 1.2em;
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.chapter-link:hover {
    background-color: var(--accent-color);
    color: #000;
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
}
.chapter-link span {
    display: block;
    font-size: 0.8em;
    font-family: var(--body-font);
    margin-top: 5px;
    opacity: 0.7;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    body {
        font-size: 16px;
        background-attachment: scroll; /* Fix mobile background issues */
    }
    
    .container {
        padding: 15px;
    }
    
    h1.main-title {
        font-size: 3em; /* Smaller on mobile */
        line-height: 1.1;
    }
    
    h2 {
        font-size: 2em;
    }
    
    .main-nav {
        padding: 0 15px;
        flex-direction: column;
        gap: 10px;
    }
    
    .logo {
        font-size: 1.5em;
    }
    
    .page-section {
        padding: 60px 15px 30px;
    }
    
    .chapter-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
        margin-top: 30px;
    }
    
    .chapter-link {
        padding: 15px;
        font-size: 1.1em;
    }
    
    .chapter-link:hover {
        transform: translateY(-5px); /* Less movement on mobile */
    }
    
    .verse-card {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .verse-card h4 {
        font-size: 1.2em;
    }
    
    .sanskrit {
        font-size: 1.1em;
    }
    
    .chapter-intro {
        font-size: 1.1em;
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1.main-title {
        font-size: 2.5em;
    }
    
    h2 {
        font-size: 1.8em;
    }
    
    .chapter-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
    }
    
    .chapter-link {
        padding: 12px;
        font-size: 1em;
    }
    
    .verse-card {
        padding: 15px;
    }
    
    .main-nav {
        text-align: center;
    }
    
    .nav-links {
        margin-top: 10px;
    }
}