<style>
/* General Reset & Body Styles */
ul, li {
    border: 0; /* '0px' is redundant, '0' is sufficient */
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    /* Corrected gradient syntax and color values */
    background: linear-gradient(to right top,
        #ffe4a3, #9a661f, #88ba3b, #8d7359, #765848, #7e5f63, #57daaf,
        #824acf, #ab8b74, #381259, #991e65, #991e37, #692415, #486915,
        #ddbf86, #132565, #5672d2
    );
    background-size: 520% 520%; /* Keep for animation effect */
    animation: gradient-animation 84s ease infinite; /* Existing animation */
    color: black;
    font-family: 'Inter', sans-serif;
    font-size: 16pt;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Header & Footer Styles */
header.site-header {
    background-color: #ab8b74; /* Muted brown */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added transition for box-shadow */
transition: all 0.3s ease-in-out;
    margin-bottom: 20px;
    border-radius: 0; /* Keep sharp corners as specified */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

header.site-header:hover {
    background-color: #C6B6A5; /* Slightly lighter brown for hover effect */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

header.site-header h1 {
    margin: 0;
}

footer {
    background-color: #ab8b74; /* Muted brown */
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin-top: auto; /* Pushes footer to the bottom */
    border-radius: 0; /* Keep sharp corners as specified */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 100%;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

footer:hover {
    background-color: #8d7359; /* Changed to a more harmonious darker brown */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}

footer p {
    margin-bottom: 10px;
}

/* Top/Footer Navigation Bar Styles (for buttons) */
.navigation-bar {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between nav buttons */
    padding: 10px 0;
}

/* Social Media Line Styles */
.social-media-line {
    margin-top: 15px;
    display: flex;
    gap: 11px;
}

.social-media-line a {
    color: black;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
}

.social-media-line a:hover {
    color: #ffd700; /* Example hover color (gold) */
}

/* Container to center content */
.container {
    max-width: 1200px;
    margin: 20px auto; /* Added margin-top to separate from header */
    padding: 0 20px;
    flex-grow: 1; /* Allows container to take up available space */
}

/* Basic Styles for W3Schools Example Adaptation */
.header { /* This applies to the div.header inside <main> */
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 1.5em; /* Adjusted to a readable size */
    margin-bottom: 20px; /* Space from content */
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row {
    margin-left: -15px; /* Compensate for column left margins */
    margin-right: -15px; /* Compensate for column right margins */
    margin-bottom: 20px;
    overflow: hidden; /* Contains floats */
}

.column {
    float: left;
    padding: 15px;
    box-sizing: border-box; /* Important for padding not to add to width */
    background-color: #f1f1f1; /* Default column background */
    margin-bottom: 20px; /* Space between columns when stacked */
    margin-left: 15px; /* Add horizontal spacing */
    margin-right: 15px; /* Add horizontal spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for each column */
    border-radius: 8px; /* Added for softer corners with shadow */
}

.column.side {
    width: calc(25% - 30px); /* 25% minus left and right margin */
}

.column.middle {
    width: calc(50% - 30px); /* 50% minus left and right margin */
}

/* Content inside columns */
.column h2 {
    margin-top: 0;
    color: #2c3e50;
}
.column p {
    line-height: 1.5;
    color: #555;
    margin-bottom: 10px; /* Added for paragraph spacing in sidebars */
}

/* Main Content Area Styling */
main {
    flex-grow: 1; /* Allows main content to take up available space */
    padding: 20px;
    min-height: 400px;
    background-color: #FAC500; /* Your existing background color (a warm yellow/orange) */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid rgba(0, 0, 0, 0.1); /* A subtle, light grey border to frame the main content */

    /* New multi-layer background images */
    background-image:
        linear-gradient(0deg, transparent 99%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(90deg, transparent 99%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(to right, transparent, purple 10%, purple 90%, transparent);
    background-size:
        15px 15px,
        15px 15px,
        80% 8px;
    background-repeat:
        repeat,
        repeat,
        no-repeat;
    background-position:
        0 0,
        0 0,
        center 120px;
}

/* Sidebar Specific Styles - adjusted for horizontal buttons */
.column.side.sidebar-content {
    background-color: #ecf0f1; /* Light gray for sidebar */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; /* Keep flex display */
    flex-direction: row; /* Change to row for horizontal layout of top-level items */
    flex-wrap: wrap; /* Allow content to wrap */
    justify-content: flex-start; /* Align content to the start (left) */
    align-items: flex-start; /* Align items to the start vertically */
    padding: 15px; /* Add padding to the sidebar content itself */
    gap: 10px; /* Space between the buttons and paragraphs */
}

/* Specific styling for elements directly within .sidebar-content */
.column.side.sidebar-content h2 { /* Ensure headings align left within the flex container */
    width: 100%; /* Make heading take full width */
    margin-bottom: 10px; /* Adjust spacing */
}

.column.side.sidebar-content p { /* Ensure paragraphs take full width */
    width: 100%; /* Make paragraphs take full width */
}

/* Button styles - adjusted for smaller size and horizontal layout */
.myButton {
    box-shadow: 0px 10px 18px -7px #276873;
    background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    background-color: #599bb3; /* Fallback for older browsers */
    border-radius: 7px;
    border: 1px solid #29668f;
    display: inline-block; /* For proper sizing within flex row */
    cursor: pointer;
    color: #e6d685;
    font-family: Arial, sans-serif; /* Added generic fallback */
    font-size: 14px; /* Smaller font size */
    font-weight: bold;
    padding: 8px 15px; /* Reduced padding for smaller size */
    text-decoration: none;
    text-shadow: 0px 4px 0px #3d768a;
    white-space: nowrap; /* Prevent text wrapping inside buttons */
    transition: background-color 0.3s ease, background 0.3s ease; /* Smooth transition for hover */
}

.myButton:hover {
    background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    background-color: #408c99; /* Fallback for older browsers */
}

.myButton:active {
    position: relative;
    top: 1px;
}

/* Sidebar buttons specifically */
.sidebar-button { /* Applied to buttons WITHIN the sidebar */
    display: inline-block; /* Allows buttons to sit side-by-side */
    padding: 8px 12px; /* Adjusted padding for smaller look */
    margin-bottom: 0; /* Ensures consistent vertical spacing with gap */
    background-color: #C6B6A5; /* Example color for sidebar buttons */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em; /* Slightly smaller font for compactness */
    transition: background-color 0.3s ease;
    text-align: center; /* Center button text */
}

.sidebar-button:hover {
    background-color: #A39688;
}

/* Audio/Video Section Styling */
.audio-video-section {
    padding-top: 15px;
    text-align: center; /* Centering the media elements */
    width: 100%; /* Ensure section takes full width in flex container */
}

.audio-video-section h3, .audio-video-section h2 {
    margin-bottom: 15px;
    color: #2c3e50;
    text-align: left; /* Align headings to the left */
    /* Padding reset is good here */
}

.audio-video-section audio,
.audio-video-section video {
    width: 100%; /* Adjust to full width of container */
    max-width: 640px; /* Restrict max width */
    height: auto;
    display: block; /* Ensures it takes up full width and centers with margin auto */
    margin: 0 auto 20px auto; /* Centers horizontally, adds bottom margin */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.video-container {
    width: 100%;
    max-width: 640px;
    margin: 20px auto;
}
.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Aside Section Styling */
aside {
    padding: 20px;
    margin-bottom: 20px;
    background-color: #ecf0f1;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

aside h2 {
    color: #2c3e50;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

aside h2:hover {
    color: #3498db;
}

 body {
    /* ... */
    background-color: #FFC500; /* <--- HERE */
    /* ... */
  }

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    /* Columns stack on top of each other instead of next to each other */
    .column.side,
    .column.middle {
        width: calc(100% - 30px); /* Full width minus left and right margin */
        margin-left: 15px; /* Ensure margins are present when stacked */
        margin-right: 15px;
        float: none; /* Remove float for stacking */
    }
    .row {
        margin-left: 0; /* Remove negative margins when columns stack */
        margin-right: 0;
    }
    body {
        flex-direction: column; /* Stack sidebar and content on smaller screens (already defined, but good to be explicit) */
    }
}
</style>