/*
 * FUZZY LOGIC SITE CSS - TERMINAL/GEOCITIES STYLE
 * This CSS enforces the black background, monospace font, and high-contrast colors 
 * established in the HTML file for maximum readability and aesthetic conformity.
 */

/* 1. Reset and Core Body Styles (Terminal Look) */
body {
    /* Overrides the provided 'white' background and 'black' text */
    background-color: #000000;
    color: #FFFFFF;
    /* Overrides 'Verdana' to use a generic monospace stack for terminal aesthetic */
    font-family: 'Courier New', Courier, monospace;
    margin: 0; /* Remove default body margin for full control */
    line-height: 1.6;
}

/* 2. Layout Structure (Flexbox for Nav and Content) */
.page-wrapper {
    display: flex;
}

/* 3. Navigation Bar (Left Hand Side) */
.nav-bar {
    width: 150px; /* Fixed width for the sidebar */
    height: 100vh; /* Full viewport height */
    padding: 20px 10px;
    background-color: #111111; /* Slightly dark gray to distinguish from black content */
    border-right: 2px solid #00FF00; /* Green highlight border */
    position: fixed; /* Keep it fixed on the left as the user scrolls */
    top: 0;
    left: 0;
}

.nav-bar p {
    color: #FFFFFF;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
}

.nav-link {
    display: block; /* Make the entire link clickable and blocky */
    padding: 5px 0;
    margin-bottom: 10px;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    transition: color 0.1s;
}

.nav-link:hover {
    color: #00FF00; /* Bright green on hover for attention */
    text-shadow: 0 0 5px #00FF00;
}

/* 4. Main Content Area */
.content-area {
    margin-left: 170px; /* Offset the content by the width of the nav bar + margin */
    padding: 20px;
    max-width: 800px; /* Limit content width for maximum readability */
}

/* 5. Header Styling (Big Block Text) */
.header-text {
    font-size: 48px;
    color: #00FF00;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00;
}

/* 6. Divider Style */
.divider {
    border-top: 2px solid #FFFFFF;
    margin: 20px 0;
}

/* 7. General Link Styling (For body text links) */
a {
    color: #FF00FF; /* Classic Geocities/Terminal link color (Magenta) */
    text-decoration: none; /* No underline by default */
}

a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
}