html, body {
    overflow-anchor: none;
}

/* --- 1. CONFIGURATION & FONTS --- */

/* Import the 'Original Surfer' font from Google Fonts */
         @import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400&family=Original+Surfer:wght@400&display=swap");


/* Define global variables for consistent font usage across the site */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-special: "Original Surfer", sans-serif;
    --font-title: "Merriweather", sans-serif;

    /* Light Theme (Default) */
    --bg-main: #fdfbf7;
    --text-main: #2c2c2c;
    --text-muted: rgb(65, 65, 65);
    --accent-color: coral;
    --border-color: #e0e0e0;
    --dropcap-color: #461D7C;
    --shadow-color: rgba(0, 102, 204, 0.18);
    --radius: 8px;

    /* Link Theme (Default) */
    --link-color: #461D7C;
    --link-glow: #461D7C;
    --link-hover-text: white;

    /* Shadows & Glows */
    --shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    --glow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* --- 2. GLOBAL RESET & TYPOGRAPHY --- */
body {
    margin: 0;
    width: 100%;
    position: relative;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-serif);
    font-size: 1.2rem; /* 18px base */
    line-height: 1.8;
    padding-top: 50px; /* Space for fixed header */
    padding-bottom: 51px; /* Space for fixed footer */
    overflow-x: hidden;

    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

a {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

@media (hover: hover) {
    a:hover {
        color: var(--link-hover-text);
        /* Layered glow: tight bright center, soft outer spread */
        text-shadow:
            0 0 4px var(--link-glow),
            0 0 6px var(--link-glow),
            0 0 8px var(--link-glow);
    }
}

/* Active State (Touch users feedback) */
a:active {
    opacity: 0.7;
}



/* --- 3. TYPOGRAPHY UTILITIES --- */

.cap-letter:first-letter {
    float: left;
    font-family: var(--font-sans);
    font-size: 2.2rem;
    line-height: 0.9;
    padding-top: 2px;
    color: var(--dropcap-color);
    font-weight: 600;
}

h2 {
    font-family: var(--font-serif);
    margin: 0;
    font-size: 1.8rem;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3), 0px 0px 1px rgba(255, 255, 255, 0.5);
}

p {
    line-height: 1.5;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin: 0 0 15px 0;
}

p.large {
    line-height: 1.7;
    font-family: var(--font-sans);
    font-size: 1.4rem;
    margin: 0 auto 80px auto;
    color: var(--text-muted);
    width: 85%;
    text-align: center;
     display: block;
    margin-bottom: 20px; /* Adjust this value to increase/decrease the gap */
}

p.small {
    line-height: 1.2;
    font-family: var(--font-sans);
    font-size: 1.0rem;
    color: var(--text-muted);
}


/* --- 4. BRAND COLORS (LSU) --- */
.lsu-gold { color: #fdd023; font-weight: bold; }
.lsu-purple { color: #461d7c; font-weight: bold; }

.lsu-color { color: #461d7c; font-weight: bold; transition: color 0.3s ease;     font-family: var(--font-sans);
 }

/* --- 5. HORIZONTAL LINES --- */
/* Horizontal rule with a fading gradient effect */

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    margin: 25px auto;
    width: 100%;
}

hr.red {
    background: linear-gradient(to right, transparent, rgba(255, 0, 0, 0.5), transparent);
}

/* Border styles */
hr.thin   { border-top: 1px solid #ccc; background: none; margin: 30px 0; }
hr.thick  { border-top: 4px solid #003366; background: none; margin: 40px 0; }
hr.dotted { border-top: 2px dotted #888; background: none; margin: 35px 0; }

/* --- 10. Subtitle --- */

.subtitle {
   color: #461D7C;
    font-size: 1.5rem;
   text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
   font-family: var(--font-sans);
}

/* --- 11. RESPONSIVE / MOBILE --- */
@media (max-width: 768px) {
     :root {
        --dropcap-color-mobile: #FDD023;
        --bg-main: #0f172a;
        --text-main: #e2e8f0;
        --text-muted: rgb(215, 215, 215);
        --link-color: #FFFAA0;
        --link-glow: #FFFAA0;
        --link-hover-text: #461D7C;
    }

    .cap-letter:first-letter { color: var(--dropcap-color-mobile); }

     .lsu-color { color: #fdd023; transition: color 0.3s ease; }

/* Fixed naming mismatch: changed from .hr-thin to hr.thin to match desktop */
    hr.thin   { border-top-color: #666; }
    hr.thick  { border-top-color: #999; }
    hr.dotted { border-top-color: #777; }

    .content-section {
        width: 100% !important;
        padding: 40px 20px !important; 
        color: var(--text-main);
        box-sizing: border-box;
    }

     .content-section:hover,
     .content-section:active {
        transform: none !important;
        box-shadow: none !important;
        background-color: black !important;
    }

      .subtitle {
        color: #FFFDD0;
       font-size: 1.5rem;
    }

}

/* --- 7. LAYOUT UTILITIES --- */
.indent_5  {margin-left: 5px; }
.indent_10 {margin-left: 10px; }
.indent_15 {margin-left: 15px; }
.indent_30 {margin-left: 30px; }
.indent_50 {margin-left: 50px; }



/* --- Delete below --- */