/*
 * style.css for neyoid.net - Retro Styling
 *
 * This CSS aims to give your website a clean, retro feel, drawing inspiration
 * from the early days of the internet (late 90s to early 2000s) without
 * being overly flashy or "gaudy." It focuses on classic typography,
 * subtle borders, and a desaturated color palette.
 */

/* --------------------
 * 1. CSS Variables
 * These variables define a color palette that's easy to change.
 * This makes it simple to experiment with different retro color schemes
 * without having to change every single color value individually.
 * -------------------- */
:root {
    --bg-color: #e0e8f0; /* A soft, light blue background */
    --text-color: #2c3e50; /* Dark blue-gray for body text, providing good contrast */
    --header-bg-color: #b0c4de; /* A medium, slightly desaturated blue for the header */
    --border-color: #607b8b; /* Deeper, cooler gray-blue for subtle borders and lines */
    --link-color: #007bff; /* Classic web blue for unvisited links */
    --link-hover-color: #0056b3; /* Slightly more saturated blue for links on hover */
    --accent-color: #7f8c8d; /* Mid-tone blue-gray for separators like HR */
    --container-bg: #ffffff; /* Pure white background for the main content area */
}

/* --------------------
 * 2. Base Body Styles
 * Applies a classic monospaced font and sets the overall page background.
 * The padding creates a visual margin around the entire site content.
 * -------------------- */
body {
    font-family: 'Courier New', Courier, monospace; /* A classic monospaced font, widely available */
    color: var(--text-color); /* Uses the defined text color */
    background-color: var(--bg-color); /* Uses the defined background color */
    margin: 0; /* Removes default body margin */
    padding: 20px; /* Padding around the entire page content */
    line-height: 1.6; /* Improves readability by spacing out lines of text */
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
    overflow-x: hidden; /* Prevents horizontal scrollbar on smaller screens */
}

/* --------------------
 * 3. Main Container
 * This styles the central content area, giving it a distinct border and shadow
 * to make it pop slightly from the background, like an old physical document.
 * -------------------- */
#container {
    max-width: 800px; /* Limits the content width, common for older sites */
    margin: 20px auto; /* Centers the container horizontally with vertical margins */
    padding: 20px; /* Inner padding for content */
    background-color: var(--container-bg); /* White background for the content box */
    border: 2px solid var(--border-color); /* A simple, solid border */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2); /* A subtle, offset drop shadow for depth */
    border-radius: 0; /* Keeps sharp, unrounded corners for a vintage feel */
}

/* --------------------
 * 4. Header Styling
 * Styles the top section of your website, including the site title and navigation links.
 * -------------------- */
#header {
    text-align: center; /* Centers the header text */
    padding-bottom: 10px; /* Space below the header content */
    border-bottom: 1px dashed var(--accent-color); /* A subtle dashed line separator */
    margin-bottom: 20px; /* Space between header and main content */
}

#header h2 {
    font-size: 2em; /* Larger font size for the main site title */
    margin-bottom: 5px; /* Small space below the title */
    text-transform: uppercase; /* Capitalizes the title, a common retro design element */
    letter-spacing: 2px; /* Adds spacing between letters for a distinct look */
}

#header h4 {
    font-size: 1.1em; /* Slightly larger than body text for the subtitle */
    color: #555555; /* A softer gray for the subtitle */
    margin-top: 0; /* Removes default top margin */
}

#header p a {
    text-decoration: none; /* Removes the default underline from navigation links */
    color: var(--link-color); /* Sets the link color */
    padding: 0 10px; /* Horizontal padding for navigation links */
    transition: color 0.2s ease-in-out; /* Smooth transition for color changes on hover */
}

#header p a:hover {
    color: var(--link-hover-color); /* Changes color on hover */
    text-decoration: underline; /* Adds an underline back on hover for clear indication */
}

/* --------------------
 * 5. Horizontal Rule (HR)
 * Styles the <hr> tag for a clean, minimalist separator.
 * -------------------- */
hr {
    border: none; /* Removes default border */
    border-top: 1px solid var(--accent-color); /* Creates a thin, solid line */
    margin: 20px 0; /* Vertical spacing around the line */
}

/* --------------------
 * 6. Article Content Styling
 * Styles the main content area, including headings, paragraphs, and lists.
 * -------------------- */
#content {
    margin-bottom: 30px; /* Space below the main content area */
}

#content h2 {
    font-size: 1.8em; /* Font size for section headings within the content */
    margin-bottom: 15px; /* Space below content headings */
    color: var(--text-color); /* Uses the main text color */
    text-transform: capitalize; /* Capitalizes the first letter of each word in headings */
}

#content p {
    margin-bottom: 1em; /* Standard paragraph spacing */
}

#content ul {
    list-style-type: square; /* Uses square bullet points, common in older web designs */
    padding-left: 20px; /* Indents the list items */
}

#content ul li p {
    margin: 0; /* Removes extra margin from paragraphs inside list items to prevent double spacing */
}

#content a {
    color: var(--link-color); /* Sets the color for links within the content */
    text-decoration: underline; /* Always underlines links in content for clear indication */
}

#content a:hover {
    color: var(--link-hover-color); /* Changes color on hover */
    background-color: rgba(0,0,0,0.05); /* Adds a very subtle light gray background on hover */
}

/* --------------------
 * 7. Image Styling
 * Gives images a simple border to mimic old digital photo frames or album covers.
 * -------------------- */
#content img {
    border: 1px solid var(--border-color); /* A thin border around images */
    padding: 5px; /* Padding between the image and its border */
    background-color: #eee; /* A light background within the border area */
    display: block; /* Makes images block-level elements so they take their own line */
    margin: 20px auto; /* Centers images horizontally with vertical spacing */
    max-width: 100%; /* Ensures images are responsive and don't overflow their container */
    height: auto; /* Maintains the image's aspect ratio */
}

/* --------------------
 * 8. Footer Styling
 * Styles the bottom section of your website.
 * -------------------- */
#footer {
    text-align: center; /* Centers footer text */
    padding-top: 10px; /* Space above footer content */
    border-top: 1px dashed var(--accent-color); /* Dashed line separator above the footer */
    margin-top: 20px; /* Space between main content and footer */
    font-size: 0.9em; /* Slightly smaller text for the footer */
    color: #666666; /* A slightly lighter gray for footer text */
}

#footer h4 {
    margin-bottom: 5px; /* Small space below the footer heading */
    color: var(--text-color); /* Uses the main text color */
}

#footer p.footer {
    margin: 5px 0; /* Small vertical spacing for footer paragraphs */
}

/* --------------------
 * 9. Responsive Adjustments
 * Ensures the site looks good on smaller screens (like mobile devices).
 * -------------------- */
@media (max-width: 600px) {
    body {
        padding: 10px; /* Less padding on smaller screens */
    }
    #container {
        margin: 10px auto; /* Smaller margins for the container */
        padding: 15px; /* Less inner padding */
    }
    #header h2 {
        font-size: 1.8em; /* Slightly smaller header title */
    }
    #header h4 {
        font-size: 1em; /* Slightly smaller header subtitle */
    }
}