/* Dark Professional Theme - Technical Midnight */
:root {
    /* Main Background & Text (Deep and Muted) */
    --background-light: #1E1E1E; /* Main Page Background (Near Black) */
    --text-dark: #918e8f;       /* Primary Text Color (Soft Gray) */
    --text-code: #7cd674;
    --text-bold: #f3812a;  /* Muted Gold/Yellow (Secondary Highlights) */
    --text-italic: #f32abd;  /* Muted Gold/Yellow (Secondary Highlights) */
    --text-em-strong: color-mix(in srgb, var(--text-bold) 33%, var(--text-italic));
    --text-strong-em: color-mix(in srgb, var(--text-italic) 33%, var(--text-bold));

    --background-blockquote: rgba(0, 100, 0, 0.3);
    --text-blockquote: #BDFABD;
    --text-blockquote-bold: #6ae26a;
    --text-blockquote-em: #259625;

    /* Content & Structure Backgrounds (Slight separation) */
    --background-header: #252526; /* Lighter Deep Gray (Header/Footer/Cards) */
    --background-content: #252526; /* Lighter Deep Gray (Main Content Area) */
    --background-code: #161f17; /* Lighter Deep Gray (Main Content Area) */
    /* (You can remove --background-accent and --background-accent2 as they are not needed here) */

    /* Accent Colors for Interactivity & Pop (Muted Neon/Pastel) */
    --primary-color: #84c2b3;   /* Soft Lavender/Purple (Links, Buttons, Key Headings) */
    --accent-color: #f32a6d;  /* Muted Gold/Yellow (Secondary Highlights) */
    --white: #ffffff;           /* Use only when absolutely necessary */
    --visited: #f32a6d;
    --dead: #f32a6d;

    --header-start-color: #10ffd7;
    --header-end-color: #84c2b3;

    --h1-color: color-mix(in srgb, var(--header-start-color) 0%, var(--header-end-color));
    --h2-color: color-mix(in srgb, var(--header-start-color) 25%, var(--header-end-color));
    --h3-color: color-mix(in srgb, var(--header-start-color) 50%, var(--header-end-color));
    --h4-color: color-mix(in srgb, var(--header-start-color) 75%, var(--header-end-color));
    --h5-color: color-mix(in srgb, var(--header-start-color) 100%, var(--header-end-color));
}

body {
  overflow-y: scroll;
}

header, footer {
    /* Apply the centering styles to the header and footer too */
    max-width: 1200px; 
    margin: 0 auto; /* Centers horizontally */
    background-color: #ffffff;
    padding: 10px 20px; 
}

/* Re-use the rule for the content container */
#content-container {
    max-width: 1200px; 
    margin: 0 auto; /* Centers horizontally */
    padding: 20px; 
}

/* Re-use the rule for the content container */
#content-extra {
    max-width: 1200px; 
    margin: 0 auto; /* Centers horizontally */
    padding: 20px; 
}

/* Apply Roboto to the entire body for general text */
body {
    /* ... color and background styles ... */
    font-family: 'Roboto', sans-serif; 
    line-height: 1.6; /* Improves readability by spacing lines out */
    font-size: 16px; /* Good base size */
}

/* Apply Montserrat to headings for emphasis */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}



/* Apply colors to the page structure */
body {
    background-color: var(--background-light);
    color: var(--text-dark); /* Default text color */
}

strong
{
    color: var(--text-bold);
}

em
{
    color: var(--text-italic);
}

em strong
{
    color: var(--text-em-strong);
}

strong em
{
    color: var(--text-strong-em);
}

header {
    background-color: var(--background-header);
    border-bottom: 1px solid var(--background-accent); /* Subtle line */
}

footer {
    background-color: var(--background-header);
    border-bottom: 1px solid var(--background-accent2); /* Subtle line */
}

/* Apply the primary color to links/buttons */
nav a {
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s ease; /* Smooth hover effect */
}

a {
    color: var(--primary-color);
}

a:hover
{
    color: var(--accent-color); /* Slightly darker blue on hover */
}

a:visited
{
    color: var(--visited);
}


header {
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.15);
}

#content-container {
    background-color: var(--background-content); 
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.15);
}

#content-extra {
    background-color: var(--background-content); 
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.15);
}

footer {
    box-shadow: 4px 8px 8px rgba(0, 0, 0, 0.15);
}

h1 {
    color: var(--h1-color); /* Soft Lavender */
    font-size: 2.5rem; 
    font-weight: 700;
}

/* h2: Use the secondary Accent color for major section titles */
h2 {
    color: var(--h2-color); /* Muted Gold */
    font-size: 2rem;
    font-weight: 600;
}

/* h3: Revert to the standard text color, rely on size/weight for hierarchy */
h3 {
    color: var(--h3-color); /* Soft Gray */
    font-size: 1.5rem;
    font-weight: 500;
    /* Optional: You could add a subtle text-shadow here if you want a subtle glow effect */
}

/* h4, h5: Standard text color, utilizing weight/size */
h4 {
    color: var(--h4-color); 
    font-size: 1.2rem;
    font-weight: 700; 
}

h5 {
    color: var(--h5-color);
    font-size: 1rem;
    font-weight: 600; 
}

blockquote {
    color: var(--text-blockquote);
    border: 5px rgba(0, 128, 0, 0.2) solid;
    background-color: var(--background-blockquote);
    padding: 16px;
    width: fit-content;
    margin: 0 auto 0 auto;
}

blockquote strong {
    color: var(--text-blockquote-bold);
}

blockquote em {
    color: var(--text-blockquote-em);
}

img {
    max-width: 100%;
    height: auto;
}

/* code highlighting */

pre {
    /* Styles for the container block */
    background-color: var(--background-code); /* Dark background */
    color: var(--text-code);             /* Light text color */
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto; /* Handles long lines */
    font-family: 'Consolas', 'Monaco', monospace; /* Monospaced font */
    line-height: 1.5;
}

code {
    /* Ensures the code takes up the full space in <pre> */
    display: block;
    white-space: pre;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2.0rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }
}