/*
 * Web 1.0 Palette: Softer Version (Darks slightly deeper)
 * Main: Very Dark Gray (#101010) - Closer to black, but not pure black
 * Secondary: Muted Red (various shades: #902020, #781818, #400808, #300000) - Slightly deeper
 * Tertiary: Off-White / Light Gray (#E0E0E0) - Softer than pure white (unchanged)
 * Accent: Muted Gold (#C0A040) - Less vibrant, more antique gold (unchanged)
 */

/* Box Sizing Global Reset - Modern Best Practice */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* Basic Reset & Body Styles */
body {
    font-family: 'Arial', sans-serif; /* Common Web 1.0 font */
    background-color: #101010; /* Very dark gray background - slightly deeper */
    color: #E0E0E0; /* Primary text color: Off-White */
    margin: 0;
    padding: 20px; /* Some padding around the entire page */
    text-align: center; /* Center the container */

    /* Tiled background image */
    background-image: url('images/dark-noise.png');
    background-repeat: repeat; /* Ensures the image tiles */

    /* Custom Cursors - Make sure these GIF files are in your 'images' folder */
    /* Default static cursor for the entire page */
    cursor: url('images/cursor.gif'), auto;
}

/* Main Container - Fixed Width, Centered */
#container {
    width: 800px; /* Classic fixed width */
    margin: 0 auto; /* Center the container */
    /*background-color: #1A1A1A; /* Darker gray for the main content area to give depth */
    border: 3px dashed #C0A040; /* Muted Gold dashed border for flair */
    padding: 15px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); /* Slightly stronger dark shadow */
}

/* Header */
#header {
    background-color: #400808; /* Darker Muted Red for header background - slightly deeper */
    padding: 10px;
    border-bottom: 2px solid #C0A040; /* Muted Gold separator */
    margin-bottom: 15px;
}

#header h1 {
    font-family: 'Courier New', monospace; /* Classic monospace for title */
    color: #E0E0E0; /* Off-White title text */
    text-shadow: 2px 2px 0px #000000; /* Pure Black text shadow for definition */
    margin: 0;
    padding: 0;
    font-size: 3em; /* Large title */
}

#header p {
    font-style: italic;
    color: #C0A040; /* Muted Gold slogan */
    margin-top: 5px;
}

marquee {
    background-color: #300000; /* Darker Muted Red for marquee background - slightly deeper */
    color: #E0E0E0; /* Off-White text for marquee */
    padding: 5px;
    border: 1px solid #C0A040; /* Muted Gold border */
    margin-top: 10px;
}

/* Navigation Bar */
#navbar {
    background-color: #300000; /* Darker Muted Red navigation bar - slightly deeper */
    padding: 8px;
    border: 1px solid #C0A040; /* Muted Gold border */
    margin-bottom: 20px;
    text-align: center;
}

#navbar a {
    color: #E0E0E0; /* Off-White link text */
    text-decoration: none;
    font-weight: bold;
    padding: 0 15px;
    transition: color 0.1s; /* Subtle hover effect */

    /* Cursor for links - animated */
    cursor: url('images/ani_cursor.gif'), pointer;
}

#navbar a:hover {
    color: #C0A040; /* Muted Gold on hover */
    text-decoration: underline;
}

/* Main Content (formerly sharing space with sidebar) */
#content {
    background-color: #222222; /* Darker gray for content - slightly deeper */
    border: 1px dotted #902020; /* Muted Red dotted border - slightly deeper */
    text-align: left; /* Text within content area is left-aligned */
    width: 100%;
    min-height: 50px;
    padding: 20px;
}
#separator {
    height: 30px; /* Adjust this value to control the height of the transparent gap */
    background-color: transparent; /* Explicitly ensure it's transparent */
    /* Or, you could explicitly remove it if you know no other background is applied */
    /* background: none; */ /* another option */
    width: 100%; /* Ensure it spans the full width of its parent */
    clear: both; /* Important if you're using floats in adjacent elements */
    margin: 15px 0; /* Optional: adds a little extra space above and below the separator */
}
/* Clear float after content and sidebar, for the parent container */
#container::after {
    content: "";
    display: table;
    clear: both;
}

/* General Text & Link Styling */
h2, h3, h4 {
    color: #C0A040; /* Muted Gold headings */
    font-family: 'Verdana', sans-serif;
    border-bottom: 1px dotted #902020; /* Muted Red dotted underline - slightly deeper */
    padding-bottom: 5px;
    margin-top: 25px;
}

p {
    line-height: 1.6;
    margin-bottom: 10px;
}

a {
    color: #E0E0E0; /* Off-White links by default */
    text-decoration: underline;
    /* Cursor for general links - animated */
    cursor: url('images/ani_cursor.gif'), pointer;
}

a:hover {
    color: #C0A040; /* Muted Gold on hover */
    text-decoration: none;
}

/* General UL styling (for lists in main content) */
ul {
    list-style-type: square; /* Classic square bullets */
    margin-left: 20px; /* This indents lists in the main content area */
    margin-bottom: 15px;
    color: #E0E0E0; /* Off-White list items */
}

ul li {
    margin-bottom: 5px;
}

hr {
    border: none;
    border-top: 1px dotted #902020; /* Muted Red dotted line - slightly deeper */
    margin: 20px 0;
}

/* Project Boxes */
.project-box {
    border: 2px groove #C0A040; /* Muted Gold groove border */
    background-color: #101010; /* Very dark gray/black - slightly deeper */
    padding: 10px;
    margin: 15px 0;
    overflow: hidden; /* Clear floats inside */
}

.project-box h4 {
    color: #781818; /* Muted Red heading in project box - slightly deeper */
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.project-box p {
    color: #E0E0E0; /* Off-White text in project box */
}

/* Footer */
#footer {
    clear: both;
    background-color: #400808; /* Darker Muted Red for footer background - slightly deeper */
    color: #E0E0E0; /* Off-White footer text */
    padding: 10px;
    border-top: 2px solid #C0A040; /* Muted Gold separator */
    margin-top: 20px;
    font-size: 0.8em;
    width: 100%;
}

/* Under Construction GIF Styling */
img[alt="Under Construction"] {
    display: block;
    margin: 15px auto;
}

/* Neocities Badge (88x31 button) */
img[alt="Neocities"] {
    border: 1px solid #C0A040; /* Muted Gold border */
    vertical-align: middle;
    margin: 5px;
}

/* --- Buttons and Interactive elements --- */
button, input[type="submit"], input[type="button"] {
    background-color: #902020; /* Muted Red button background - slightly deeper */
    color: #E0E0E0; /* Off-White button text */
    border: 1px solid #C0A040; /* Muted Gold button border */
    padding: 8px 15px;
    font-weight: bold;
    cursor: url('images/ani_cursor.gif'), pointer;
    transition: background-color 0.2s, color 0.2s;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: #C0A040; /* Muted Gold button background on hover */
    color: #101010; /* Very dark gray text on hover for contrast */
    cursor: url('images/ani_cursor.gif'), pointer;
}

/* --- Bluesky Embed Specific Styles --- */
bsky-embed {
    display: block;
    margin: 30px auto;
    max-width: 550px;
    border: 2px dashed #C0A040; /* Muted Gold dashed border */
    background-color: #1A1A1A; /* Dark background - slightly deeper */
    padding: 15px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); /* Slightly stronger dark shadow */
    border-radius: 0;
    overflow: hidden;
}

/* Responsive adjustments for the embed itself */
@media (max-width: 768px) {
    bsky-embed {
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
        max-width: calc(100% - 20px);
    }
}