/* General Styles - Dark Theme */
body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text */
}

main {
    max-width: 960px;
    margin: 20px auto;
    padding: 20px;
    background-color: #1e1e1e; /* Slightly lighter dark background */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Adjusted shadow for dark */
    border-radius: 8px; /* Optional: add some rounding */
}

h1, h2, h3 {
    color: #f5f5f5; /* Lighter headings */
    /* border-bottom-color: #444; /* Darker border for headings - removed if not desired */
}

a {
    color: #64B5F6; /* Light blue links */
    text-decoration: none;
}

a:hover {
    color: #90CAF9; /* Lighter blue on hover */
    text-decoration: underline;
}

/* Navigation */
nav {
    background-color: #1e1e1e; /* Match main background or slightly different */
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #333;
    width: 100%; /* Ensure nav takes full width */
}

nav a {
    color: #e0e0e0; /* Light text for nav links */
    margin: 0 15px;
    font-weight: bold;
}

nav a:hover {
    color: #fff;
    text-decoration: none;
}

/* Header centering using Flexbox */
header.home-header,
header.about-header,
header.projects-header,
header.contact-header /* Added contact-header */ {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    padding-top: 20px; /* Add some padding */
    padding-bottom: 10px;
    background-color: #1e1e1e; /* Ensure header has a background */
}

/* Sections / Info Boxes */
section, .info-box {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #333; /* Darker border */
    border-radius: 5px;
    background-color: #2c2c2c; /* Darker background for sections */
}

section h2, .info-box h2 {
    margin-top: 0;
    border-bottom: 1px solid #444; /* Darker border */
    padding-bottom: 5px;
}

/* Lists */
ul {
    list-style: disc;
    margin-left: 20px;
}

/* Preformatted Text / Code */
pre {
    /* General pre styles for non-ASCII art */
    background-color: #2c2c2c;
    color: #f0f0f0;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: monospace;
    border: 1px solid #444;
    margin-bottom: 1em; /* Added margin */
}

pre.ascii-art {
    /* Specific styles for ASCII art headers */
    white-space: pre;
    font-family: monospace;
    line-height: 1.2;
    margin-bottom: 1em;
    /* Reset general pre styles that conflict */
    background-color: transparent; /* Inherit header background */
    color: inherit; /* Use specific color classes */
    padding: 0; /* Remove padding */
    border-radius: 0;
    border: none;
    overflow-x: visible; /* Prevent scrollbars if possible */
    text-align: left; /* Let flexbox handle centering */
}

/* Project Cards */
.project-card {
    border: 1px solid #444; /* Darker border */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #333; /* Dark background for cards */
}

.project-card h3 {
    margin-top: 0;
    /* Color is handled by .color-red */
}

.project-card p {
    margin-bottom: 5px;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

thead {
    background-color: #333;
}

th, td {
    border: 1px solid #444; /* Darker borders */
    padding: 8px 12px;
    text-align: left;
}

th {
    color: #f5f5f5; /* Light text for table headers */
}

tbody tr:nth-child(odd) {
    background-color: #2c2c2c; /* Slightly different dark for odd rows */
}

tbody tr:nth-child(even) {
    background-color: #252525; /* Slightly different dark for even rows */
}

/* ANSI Color Palette - Ensure these look okay on dark backgrounds */
.color-red    { color: #E57373; } /* Light Red */
.color-green  { color: #81C784; } /* Light Green */
.color-yellow { color: #FFD54F; } /* Amber */
.color-blue   { color: #64B5F6; } /* Light Blue */
.color-cyan   { color: #4DD0E1; } /* Cyan */
.color-gray   { color: #B0BEC5; } /* Blue Grey Lighten-1 */
.color-purple { color: #9370DB; } /* Medium Purple */
/* Applying colors based on terminal versions */

/* index.html specific classes */
.home-header .ascii-art { color: #FFD54F; } /* Yellow */
.welcome-message { color: #B0BEC5; } /* Gray */
.home-about-heading { color: #81C784; } /* Green */
.home-projects-heading { color: #E57373; } /* Green */
.home-technologies-heading { color: #9370DB; } /* Green */
.home-about-link { color: #4DD0E1; } /* Cyan */

/* about.html specific classes */
.about-header .ascii-art { color: #81C784; } /* Green */
.about-section-title { color: #81C784; } /* Green */
.company-name { color: #E57373; } /* Red */
.job .label { color: #FFD54F; } /* Yellow */
.job-title, .job-period { color: #64B5F6; } /* Blue */

/* projects.html / project-template.html */
.project-card h3 { color: #E57373; } /* Red */
.project-card strong { color: #FFD54F; } /* Yellow for labels like URL:, Description: */
.project-card a { color: #64B5F6; } /* Blue for the URL link */

/* Responsive Design (Basic Example) */
@media (max-width: 768px) {
    main {
        padding: 15px;
    }
    nav a {
        margin: 0 10px;
    }
}

/* About Page Specifics */
.experience-item, .education-item {
    margin-bottom: 15px;
}

/* Ensure ASCII art colors are applied correctly */
.home-header .ascii-art { color: #FFD54F; } /* Yellow */
.about-header .ascii-art { color: #81C784; } /* Green */
.projects-header .ascii-art { color: #E57373; } /* Red */
.contact-header .ascii-art { color: #9370DB; } /* Medium Purple */