:root {
    /* --- Main Site Theme Variables (Customize Here) --- */
    --bg-color: #EEF2FF;          /* Page background */
    --content-bg: #FFFFFF;      /* Background of content boxes */
    --title-bar-bg: #C5C5E8;      /* NEW: Purple-blue title bar */
    --border-color: #333333;      /* NEW: Nearly-black border */
    --internal-border: #CCCCCC; /* Borders for tables, etc. */
    --table-header-bg: #F0F0F0; /* Table header bg */
    
    --text-color: #122221;        /* NEW: Nearly-black text */
    --link-color: #0000EE;
    
    --line-height: 1.3;           /* NEW: Reduced line height */
    --border-radius: 0px;         /* NEW: Square corners */
}

/* --- Global Styles --- */
body {
    background-color: var(--bg-color);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    color: var(--text-color);
    margin: 0;
    padding: 10px;
}

/* --- The Main Content Box Structure --- */
.content-box {
    background-color: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin: 0 auto 10px auto; /* Centered, with 10px gap below */
    max-width: 900px;
    overflow: hidden; /* Fixes any weird layout issues */
}

.box-title {
    background-color: var(--title-bar-bg);
    border-bottom: 1px solid var(--border-color);
    padding: 6px 10px;
    font-weight: bold;
}

.box-content {
    padding: 10px;
    line-height: var(--line-height);
}

.box-content p {
    margin:5px;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color:red;
}

/* --- Homepage Specific --- */
#ascii-art-container {
    text-align: center;
}

#ascii-art {
    font-family: "Consolas", "Courier New", monospace; /* Strict monospace */
    font-size: 10px; /* Complex art needs smaller text to fit the screen */
    line-height: 1.1; /* Very tight vertical spacing so lines connect */
    letter-spacing: 0px; /* Prevents horizontal stretching */
    white-space: pre; /* STRICTLY prevents the browser from wrapping lines */
    text-align: left; /* Forces alignment to the left */
    display: inline-block;
    margin: 0 auto;
}

#quote {
    font-size:0.8em;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.8;
    margin-top: 8px;
}

.welcome-section h2 {
    font-size: 1.1em;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--internal-border);
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.donation-image {
    display: block;
    max-width: 150px;
    margin-top: 15px;
    opacity: 0.8;
}

/* --- Blog Page Table (The Archive) --- */
.blog-archive {
    width: 100%;
    border-collapse: collapse;
}

.blog-archive th,
.blog-archive td {
    border: 1px solid var(--internal-border);
    padding: 8px 10px;
    text-align: left;
}

.blog-archive th {
    background-color: var(--table-header-bg);
}

/* Make date column narrower */
.blog-archive th:first-child,
.blog-archive td:first-child {
    width: 120px;
    white-space: nowrap;
}

/* --- Single Post Page --- */
#post-content h1, #post-content h2, #post-content h3 {
    margin-top: 1.5em;
    border-bottom: 1px solid var(--internal-border);
    padding-bottom: 4px;
}
#post-content code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 3px; /* Keep code snippets slightly rounded */
}
#post-content pre {
    background-color: #eee;
    padding: 10px;
    overflow-x: auto;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    body {
        padding: 5px;
    }
    .content-box {
        margin-left: 5px;
        margin-right: 5px;
    }
    .box-content {
        padding: 8px;
    }
    .blog-archive {
        font-size: 0.9em;
    }
    .blog-archive th:first-child,
    .blog-archive td:first-child {
        width: 80px;
    }
}

/* --- Sub-Navigation Bar --- */
.sub-nav {
    text-align: center;
    padding: 5px 10px; /* Reduced padding for a tighter box */
    font-size: 0.80em; /* Slightly smaller than main navigation */
    background-color: var(--content-bg);
}

.sub-nav a {
    color: var(--link-color); /* Matches exact color of main nav links */
    display: inline-block;
    margin: 0 4px; /* Squeezed horizontally */
    text-decoration: none; 
}

.sub-nav a:hover {
    text-decoration: underline; /* Standard underline hover, just like main nav */
}

.sub-nav .icon {
    /* Removed the custom color so it naturally inherits the link color */
    margin-right: 1px; /* Pushed very close to the text */
    font-size: 1em; /* Matches the new smaller text size */
}

.sub-nav-dot {
    color: var(--text-color); /* Matches basic text color to blend in */
    margin: 0 0.6px; /* Tightly squeezed dots */
    font-size: 0.9em;
    opacity: 0.7; /* Just slightly faded so it doesn't distract from the links */
}
/* --- BLEND GITHUB MARKDOWN WITH SITE THEME --- */

.markdown-body {
    background: transparent !important; /* Removes GitHub's default white background */
    font-family: inherit !important; /* Forces it to use your site's font */
    font-size: 1em !important; /* Shrinks the base text to match your site */
    color: inherit !important; /* Uses your site's text color */
}

/* Scale down the massive GitHub headings */
.markdown-body h1, 
.markdown-body h2 {
    font-size: 1.4em !important; 
    margin-top: 15px !important;
    padding-bottom: 5px !important;
}

.markdown-body h3 {
    font-size: 1.15em !important;
}

/* Make paragraph spacing a little tighter */
.markdown-body p {
    margin-bottom: 12px !important;
    font-size: 0.95em !important;
}

/* Slightly shrink the inline code highlights (like `fetch()`) so they don't look bloated */
.markdown-body code {
    font-size: 0.85em !important;
    padding: 0.2em 0.4em !important;
}

/* Ensure the first element doesn't have an awkward top gap */
.markdown-body > *:first-child {
    margin-top: 0 !important;
}