/* 1. DEFINE THEMES USING VARIABLES */
        :root {
            --primary-color: #2d3436;
            --accent-color: #0984e3;
            --text-gray: #636e72;
            --border-light: #dfe6e9;
            --bg-body: #f9f9f9;
            --card-bg: #ffffff;
        }

        /* Dark Mode Override */
        [data-theme="dark"] {
            --primary-color: #f5f6fa;
            --accent-color: #74b9ff;
            --text-gray: #a4b0be;
            --border-light: #2f3542;
            --bg-body: #1e272e;
            --card-bg: #2f3542;
        }

        /* Sepia Mode Override */
        [data-theme="sepia"] {
            --primary-color: #433422;
            --accent-color: #a0522d;
            --text-gray: #5f4b32;
            --border-light: #d3c2a3;
            --bg-body: #f4ecd8;
            --card-bg: #fcf5e5;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: var(--bg-body);
            color: var(--primary-color);
            transition: all 0.3s ease; /* Smooth transition between themes */
            margin: 0;
        }

        /* 2. THEME BUTTON STYLES */
        .theme-switcher {
              position: sticky;  /* 👈 Sticks to the header, floating as you scroll */
              top: 0; 
              z-index: 1000; 
              display: flex; 
              justify-content: flex-end; /* 👈 Aligns all theme buttons cleanly to the right */
              gap: 10px;                 /* 👈 Adds space between each individual button */
              align-items: center; 
              /* Recommended: Add a background so content doesn't bleed through when scrolling */
              background-color: transparent; 
              padding: 10px 0;
        }

        .theme-btn {
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            background: var(--card-bg);
            color: var(--primary-color);
            font-size: 0.8rem;
            font-weight: bold;
        }

        /* 3. REUSE EXISTING LAYOUT STYLES (now using variables) */
        .container { display: grid; grid-template-columns: 1fr 300px; gap: 50px; max-width: 1100px; margin: 40px auto; padding: 0 20px; }
        
        header { text-align:center; padding: 60px 0; background: var(--card-bg); border-bottom: 1px solid var(--border-light); position: relative; }
        
        article { background: var(--card-bg); padding: 30px; margin-bottom: 30px; border-radius: 8px; border: 1px solid var(--border-light); }
        
        .history-sidebar { position: sticky; top: 20px; height: fit-content; }
        .history-sidebar h3 { border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; }
        
        .month-block { margin-left: 15px; padding-left: 15px; border-left: 1px solid var(--border-light); margin-bottom: 15px; }
        
        .day-number { font-weight: bold; color: var(--accent-color); min-width: 30px; display: inline-block; }
        
        a { text-decoration: none; color: inherit; transition: 0.2s; }
        a:hover { color: var(--accent-color); padding-left: 4px; }

        .day-list { list-style: none; padding: 0; }
        .day-item { margin-bottom: 8px; font-size: 0.9rem; }



/* Progress bar container (the background) */
.progress-container {
    width: 100%;
    height: 4px;
    background: transparent;
    position: fixed; /* Stays at the top while scrolling */
    top: 0;
    left: 0;
    z-index: 1000;
}

/* The actual bar (uses your theme's accent color) */
.progress-bar {
    height: 4px;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.1s ease-out;
}

.author-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-light);
    font-size: 0.85rem;
}

.author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}
        @media (max-width: 850px) { .container { grid-template-columns: 1fr; } }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Blog | History Navigation</title>
	<link rel="stylesheet" href="Blog.css">
</head>
<body>

<body data-theme="default">
<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div>
<header>
    <div class="theme-switcher">
        <button class="theme-btn" onclick="setTheme('default')">☀ Light</button>
        <button class="theme-btn" onclick="setTheme('sepia')">📜 Sepia</button>
        <button class="theme-btn" onclick="setTheme('dark')">🌙 Dark</button>
    </div>
    <h1>Journal Notes</h1>
    <p style="color: var(--text-gray);">Thoughts on Design & Development</p>
</header>

<div class="container">
    <main class="blog-posts">
        <article>
            <div style="color: var(--accent-color); font-size: 0.8rem; font-weight: bold; margin-bottom: 10px;">MARCH 04, 2026</div>
            <h2>The Art of the Theme Switcher</h2>
            <p>Allowing users to customize their reading environment is a sign of respect for their accessibility needs and aesthetic preferences...</p>
            <a href="#" style="color: var(--accent-color); font-weight: bold;">Read Article →</a>
			
           <div class="author-credit">
           <div class="author-avatar">JD</div>
           <span>Posted by <a href="Blog2.asp?Visitor=1" title="carrzkiss : Visitor Name | CFF Radio"><strong>carrzkiss</strong></a></span>
           </div>
        </article>

    </main>

    <aside class="history-sidebar">
  <aside class="history-sidebar">
<hr style="border: 0; border-top: 1px solid var(--border-light); margin: 20px 0;">
        <h3>Archive</h3>
        <!-- Year 2026 -->
        <div class="year-block">
		<details>
            <summary  class="year-label">2026</summary >
            
            <details class="month-block">
                <summary  class="month-label">March</summary >
                <ul class="day-list">
                    <li class="day-item"><span class="day-number">04</span> <a href="#">Building the Perfect Sidebar</a></li>
                    <li class="day-item"><span class="day-number">01</span> <a href="#">Spring Design Trends</a></li>
                </ul>
            </details>

            <details class="month-block">
                <summary  class="month-label">February</summary >
                <ul class="day-list">
                    <li class="day-item"><span class="day-number">12</span> <a href="#">Why Minimalist UI Matters</a></li>
                </ul>
            </details>
        </div>

        <!-- Year 2025 -->
        <div class="year-block">
		<details>
            <summary  class="year-label">2025</summary >
            <details class="month-block">
                <summary  class="month-label">December</summary >
                <ul class="day-list">
                    <li class="day-item"><span class="day-number">24</span> <a href="#">Year in Review</a></li>
                </ul>
            </details>
        </div>
    </aside>
</div>
</div>
<script src="Blog.js"></script> 
</body>
</html>

    function setTheme(themeName) {
        document.body.setAttribute('data-theme', themeName);
        localStorage.setItem('user-theme', themeName); // Save preference for next visit!
    }

    // Load saved theme on startup
    const savedTheme = localStorage.getItem('user-theme');
    if (savedTheme) setTheme(savedTheme);