/* --- GLOBAL STYLES --- */
body {
    background-color: #000000; /* Deep black background */
    background-image: url('https://placehold.co/100x100/0a0a0a/222222?text=.'); /* Subtle dark grey pattern */
    color: #00FF00; /* Classic neon green text */
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for retro feel */
    margin: 0;
    padding: 0;
    text-align: center; /* Used to center the main layout table */
    font-size: 14px;
}

/* --- LINK STYLES --- */
a:link { color: #00FFFF; text-decoration: none; } /* Bright cyan for unvisited links */
a:visited { color: #800080; text-decoration: none; } /* Purple for visited links */
a:hover { color: #FF00FF; text-decoration: underline; } /* Magenta on hover, with underline */
a:active { color: #FFFF00; } /* Yellow when clicked */

/* --- MAIN LAYOUT TABLE --- */
.main-layout-table {
    width: 780px; /* Fixed width, common in late 90s */
    table-layout: fixed; /* Respect colgroup widths instead of letting content stretch columns */
    border: 3px outset #333333; /* 3D "outset" border effect */
    background-color: #1a1a1a; /* Dark grey inner background */
    margin: 20px auto; /* Centers the table horizontally */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5); /* Subtle shadow for depth */
    border-radius: 8px; /* Slightly rounded corners */
    overflow: hidden; /* Ensures borders are contained */
}

/* --- HEADER SECTION --- */
.header-cell {
    background-color: #003300; /* Dark green header background */
    padding: 15px 20px;
    border-bottom: 2px solid #00FF00; /* Green bottom border */
    text-align: left; /* Align content to the left within header */
    display: flex; /* Use flexbox for logo and title alignment */
    align-items: center; /* Vertically center items */
    gap: 65px; /* Space between logo and title */
}

.header-cell img {
    border: 1px solid #00FF00; /* Green border around logo */
    padding: 3px;
    background-color: #000000;
    border-radius: 4px; /* Slightly rounded logo border */
    max-width: 120px; /* Ensure logo is not too large */
    height: auto;
}

.header-cell h1 {
    font-size: 28px;
    color: #FFFFFF; /* White main title */
    margin: 0;
    text-shadow: 2px 2px 4px #000000; /* Black text shadow */
    line-height: 1.2;
}

.header-cell h1 span {
    font-size: 13px;
    color: #00FFFF; /* Cyan subtitle */
    display: block; /* Make subtitle appear on new line */
}

/* --- NAVIGATION SECTION (LEFT SIDEBAR) --- */
.nav-cell {
    width: 185px; /* Fixed width for navigation sidebar */
    vertical-align: top; /* Align content to the top */
    background-color: #001a00; /* Even darker green for nav */
    padding: 15px 0;
    border-right: 1px dashed #006600; /* Dashed green separator */
    border-top: 1px solid #00FF00; /* Top border to separate from header */
}

.nav-cell ul {
    list-style-type: none; /* No bullet points */
    padding: 0;
    margin: 0;
}

.nav-cell li a {
    display: block; /* Make the whole list item clickable */
    padding: 8px 15px;
    text-align: center; /* Equal space on both sides of the label */
    text-decoration: none;
    color: #00FF00; /* Neon green text */
    font-weight: bold;
    border-bottom: 1px dotted #003300; /* Dotted separator between links */
    transition: background-color 0.2s ease; /* Smooth hover transition */
}

.nav-cell li a:hover {
    background-color: #003300; /* Darker green on hover */
    color: #FFFFFF; /* White text on hover */
    text-decoration: none; /* Remove underline on hover for cleaner look */
}

.nav-cell li a {
    white-space: nowrap; /* Keep each label on a single line */
}

.nav-cell .retro-banner {
    margin-top: 25px;
    padding: 0 10px;
    text-align: center;
}

.nav-cell .retro-banner img {
    display: block; /* Ensure images stack */
    margin: 8px auto; /* Center images */
    border: 1px solid #00FF00; /* Green border for retro banners */
    border-radius: 3px;
}

/* --- CONTENT SECTION --- */
.content-cell {
    vertical-align: top; /* Align content to the top */
    background-color: #1a1a1a; /* Same as main container background */
    padding: 20px 20px 20px 40px; /* Extra left padding for air between nav and content */
    min-height: 450px; /* Ensure content area has a minimum height */
    text-align: left; /* Content aligns left */
    border-top: 1px solid #00FF00; /* Top border to separate from header */
}

.content-cell h2 {
    color: #00FFFF; /* Cyan headings */
    font-size: 22px;
    border-bottom: 1px dashed #006600; /* Dashed line under headings */
    padding-bottom: 5px;
    margin-top: 0;
}

.content-cell h3 {
    color: #FF00FF; /* Magenta subheadings */
    font-size: 18px;
    margin-top: 20px;
}

.content-cell p {
    margin-bottom: 1em;
    line-height: 1.5;
}

.content-cell .welcome-banner {
    background-color: #006600; /* Brighter green for welcome banner */
    border: 1px dotted #00FF00; /* Dotted green border */
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF; /* White text for banner */
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0,255,0,0.5); /* Inner glow effect */
}

.content-cell .animated-gif-placeholder {
    display: block;
    margin: 25px auto; /* Center the GIF placeholder */
    border: 2px solid #00FFFF; /* Cyan border for GIFs */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,255,255,0.7); /* Glow effect */
}

.content-cell .hit-counter-section {
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dotted #006600;
}

.content-cell .hit-counter-section img {
    margin-top: 10px;
    border: 1px solid #00FF00;
    padding: 2px;
    background-color: #000000;
}

/* --- FOOTER SECTION --- */
.footer-cell {
    background-color: #003300; /* Dark green footer background */
    color: #00FF00; /* Neon green text */
    padding: 10px 20px;
    font-size: 11px;
    border-top: 2px solid #00FF00; /* Green top border */
    text-align: center;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
}

.footer-cell p {
    margin: 5px 0;
}

/* --- RESPONSIVE ADJUSTMENTS (Basic for 90s style, no complex media queries) --- */
@media (max-width: 800px) {
    .main-layout-table {
        width: 95%; /* Make it fluid on smaller screens */
        margin: 10px auto;
        border-radius: 0; /* Remove rounded corners on small screens */
    }
    .header-cell, .footer-cell {
        padding: 10px;
    }
    .header-cell {
        flex-direction: column; /* Stack logo and title on small screens */
        text-align: center;
        gap: 5px;
    }
    .header-cell img {
        float: none; /* Remove float */
        margin-right: 0;
    }
    .nav-cell {
        width: 100%; /* Navigation takes full width */
        float: none;
        border-right: none;
        border-bottom: 1px dashed #006600; /* Add bottom border */
        border-top: none; /* Remove top border */
    }
    .content-cell {
        margin-left: 0; /* Remove margin */
        padding: 15px;
        border-top: none; /* Remove top border */
    }
}