/* Color Palette and Variables */
        :root {
            --bg-color: #0f1419;    
            --text-color: #e0e0e0;  
            --arch-blue: #1793d1; 
            --border-color: #333333;
        }

        /* Global Styles */
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: "Fira Code", "Consolas", "Courier New", monospace;
            padding: 20px;
            margin: 0;
            line-height: 1.5;
            font-size: 16px;
        }

        ::selection {
            background: var(--arch-blue);
            color: var(--bg-color);
        }

        #terminal-window {
            max-width: 800px;
            margin: 0 auto;
        }

        /* Links */
        a {
            color: var(--arch-blue);
            text-decoration: none;
            border-bottom: 1px dashed var(--arch-blue);
            transition: all 0.2s ease;
        }

        a:hover {
            background-color: var(--arch-blue);
            color: var(--bg-color);
            border-bottom: 1px solid var(--arch-blue);
        }

        /* ASCII shit */
        .ascii-art {
            color: var(--arch-blue);
            font-weight: bold;
            line-height: 1.15;
            margin-bottom: 30px;
            white-space: pre;
        }

        /* terminal style stuff */
        .prompt-line {
            margin-top: 25px;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .user { color: var(--arch-blue); }
        .colon { color: var(--text-color); }
        .path { color: var(--text-color); }
        .char { color: var(--arch-blue); margin-right: 8px; }
        .command { color: #ffffff; font-weight: normal; }

        /* Output stuff */
        .output {
            margin-bottom: 20px;
            padding-left: 15px;
            border-left: 2px solid var(--border-color);
        }

        /* lists */
        ul {
            list-style-type: none;
            padding-left: 0;
        }
        
        li {
            margin-bottom: 8px;
        }

        li::before {
            content: "❯ ";
            color: var(--arch-blue);
        }

        /* blinking cursor (ties the room together) */
        .cursor {
            display: inline-block;
            width: 10px;
            height: 1.1em;
            background-color: var(--text-color);
            vertical-align: text-bottom;
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }
        
        
/* --- BLOG PAGE STYLES omg this is cobbled together from people and ai i'm not gonna lie i'm still trying to understand --- */

/* 1. Left Alignment */
/* If your #terminal-window has 'margin: 0 auto', it centers the page. 
   We can override that for the blog, or just rely on this container. */
.blog-container {
    max-width: 800px;
    margin-left: 0; /* Forces alignment to the left */
}

/* 2. Customizing the Expand/Contract Behavior */
details.terminal-folder {
    margin-bottom: 20px;
}

details.terminal-folder summary {
    color: var(--arch-blue);
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* Hides the default triangle in modern browsers */
    user-select: none; /* Prevents text highlighting when clicking */
}

/* Hides the default triangle in Webkit/Safari */
details.terminal-folder summary::-webkit-details-marker {
    display: none;
}

/* The Closed State: Adds a [+] before the title */
details.terminal-folder summary::before {
    content: "[+] ";
    color: var(--text-color);
    margin-right: 5px;
    font-family: monospace;
}

/* The Open State: Changes the [+] to a [-] */
details.terminal-folder[open] summary::before {
    content: "[-] ";
    color: var(--arch-blue);
}

/* 3. Block-Aligned Paragraphs */
.blog-post {
    padding-left: 20px; 
    border-left: 2px solid var(--border-color); /* Creates a visual "tree" line */
    margin-top: 10px;
    margin-left: 11px; /* Aligns the border perfectly under the [+] */
}

.blog-post p {
    text-align: justify; /* This forces the text to align on BOTH the left and right edges, creating a solid block */
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.6;
}
.blog-post p {
    text-align: justify; 
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.6;
    
    /* --- THE FIX --- */
    white-space: pre-wrap;      /* Preserves your terminal spacing but forces text to wrap at the edge */
    overflow-wrap: break-word;  /* Forces extremely long, unbroken strings (like URLs) to snap to the next line */
    max-width: 100%;            /* Ensures the paragraph never grows wider than its parent container */
}