/* --- Global Styles: Body, Font, Colors --- */

body {
    /* 1. Set the background image using the raw GitHub URL */
    background-image: url('https://raw.githubusercontent.com/DaRealDanube/DaRealDanube.github.io/a660238fe10269fe940dd8446aba72009c412c98/GrassWithBlueSky.jpeg');
    /* 2. Tile (repeat) the image, which was the standard practice */
    background-repeat: repeat;
    /* Use a common system font */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    /* Default text color */
    color: #000000;
    /* Remove default margin/padding */
    margin: 0;
    padding: 0;
}

/* --- The Essential Fixed-Width Container --- */

#container {
    /* Center the layout and force a narrow width */
    width: 760px; /* A common resolution width from that era */
    margin: 20px auto;
    
    /* Use a slightly transparent white background so the image peeks through */
    background-color: rgba(255, 255, 255, 0.9); /* 90% opacity white */
    
    /* Basic padding */
    padding: 15px;
    /* Simple black border, common on content blocks */
    border: 1px solid #000000;
}

/* --- Hyperlinks: Underlines and Vivid Colors --- */

a:link {
    color: #0000FF;
    text-decoration: underline;
}

a:visited {
    color: #800080;
    text-decoration: underline;
}

a:hover {
    color: #FF0000;
    text-decoration: underline;
}

/* --- Headings: Bold and Simple --- */

h1, h2, h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #000000;
    padding-bottom: 2px;
}

/* --- Text Elements --- */

pre {
    background-color: #EEEEEE;
    border: 1px solid #999999;
    padding: 10px;
    font-family: 'Courier New', Courier, monospace;
}

ul, ol {
    padding-left: 20px;
}

/* --- The Classic '3D' Button Look --- */

.classic-button {
    background-color: #C0C0C0;
    color: #000000;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
    padding: 3px 10px;
    border: 1px solid;
    border-color: #FFFFFF #808080 #808080 #FFFFFF;
    cursor: pointer;
    box-shadow: none;
}

.classic-button:active {
    border-color: #808080 #FFFFFF #FFFFFF #808080;
    padding: 4px 9px 2px 11px;
}
/* Example Styling for a News Box */
.alert-box {
    /* Use a contrasting color */
    background-color: #FFFFCC; 
    border: 2px solid #FF0000; /* Bright red border */
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
}

/* Example Styling for a Floating Column */
#left-nav {
    width: 150px;
    float: left; /* The key to horizontal layout */
    padding: 5px;
}