/* --- COLOR PALETTES --- */
:root {
    /* Light Mode (Default) */
    --bg-color: #FAFAF7;       /* Baby Blue */
    --text-color: #0E4F80;     /* Navy Blue */
    --accent-color: #D5EBF5;   /* Beige */
    --border-color: #0E4F80;   /* Navy Borders */
    --link-color: #1175BD;     /* Medium Blue for links */
	--bg-image: url('light-bg.jpg');
}

body.dark-mode {
    /* Dark Mode */
    --bg-color: #0E4F80;       /* Navy Blue */
    --text-color: #cce0ff;     /* Baby Blue */
    --accent-color: #11314A;   /* Deeper Navy for accents */
    --border-color: #cce0ff;   /* Baby Blue Borders */
    --link-color: #1175BD;     /* Lighter blue for readable links */
	--bg-image: url('dark-bg.jpg');
}

/* --- MAIN WEBSITE STYLE --- */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    margin: 20px auto;
    max-width: 1500px; /* Optimized for classic 800x600 monitors! */
    border: 3px solid var(--border-color);
    padding: 20px;
    background-image: var(--bg-image);
    background-repeat: repeat;
}

/* --- LINKS --- */
a {
    color: var(--link-color);
    text-decoration: none; /* Removes the underline */
    font-weight: bold;
}

a:hover {
    text-decoration: underline; /* Underline appears when you hover */
    background-color: var(--accent-color); /* Little highlight effect */
}

/* --- HEADERS & LINES --- */
h1, h2, h3 {
    font-family: "Lucida Console", Monaco, monospace;
    border-bottom: 2px dashed var(--border-color);
    padding-bottom: 5px;
}

hr {
    border: 0;
    border-top: 2px solid var(--border-color);
    margin: 20px 0;
}

/* --- SECTIONS & WIDGETS --- */
section, .widget, nav {
    background-color: var(--accent-color);
    border: 2px solid var(--border-color);
    padding: 10px;
    margin-bottom: 15px;
}

/* Makes the boxes change border color when hovered */
section:hover, .widget:hover, nav:hover {
    border-color: #FFFFFF !important; 
}

/* Make the navigation list look horizontal like a real menu */
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

nav li {
    display: inline;
    margin-right: 15px;
}

/* --- THE BUTTON --- */
button {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    font-weight: bold;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: var(--accent-color);
}

/* --- THE 3-COLUMN HOLY GRAIL LAYOUT --- */
.layout-container {
    display: flex;
    gap: 20px; /* Creates space between the columns */
    align-items: flex-start; /* Stops the columns from stretching downwards */
}

.sidebar {
    width: 350px; /* Width of the left and right widgets */
    flex-shrink: 0; /* Prevents sidebars from squishing when window gets small */
}

.center-content {
    flex-grow: 1; /* Tells the main content to stretch and fill all remaining space */
}

.multi-column-list {
  column-count: 2;
  column-gap: 20px;
  font-family: "Lucida Console", Monaco, monospace;
}

.multi-column-list li {
  margin-bottom: 8px;
  font-family: "Lucida Console", Monaco;
}

/* --- UPDATE NAVIGATION FOR SIDEBAR --- */
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: left; /* Changed from center */
}

nav li {
    display: block; /* Changed from inline, forces them into a vertical list */
    margin-bottom: 8px;
    border-bottom: 1px dotted var(--border-color);
    padding-bottom: 5px;
}

nav li:last-child {
    border-bottom: none; /* Removes the dot line under the last item */
}

/* --- CLICKABLE HEADERS --- */
h2 a {
    color: var(--text-color);
    text-decoration: none;
}

h2 a:hover {
    background-color: var(--accent-color);
    text-decoration: underline;
}

/* --- WIDGET SCALER HACK --- */
.widget-scaler {
    width: 100%; /* Matches your sidebar width */
    height: 95px; /* You may need to tweak this number so it doesn't leave a huge gap below */
    overflow: hidden;
}

.widget-scaler iframe {
    width: 450px !important;       /* 1. Force the widget to render its full width */
    max-width: none !important;    /* 2. Stop the browser from capping it at the sidebar width */
    transform: scale(0.55);        /* 3. NOW shrink the fully rendered widget */
    transform-origin: top left;
    border: none;                  /* Just to keep it clean */
}

/* --- VIRTUAL BOOKSHELF --- */
.bookshelf {
    background-color: var(--accent-color);
    border: 2px inset var(--border-color); /* Gives the whole cabinet a sunk-in 3D look */
    padding: 15px 15px 5px 15px;
    margin-top: 15px;
}

.shelf-row {
    display: flex;
    gap: 15px; /* The space between each book/DVD */
    align-items: flex-end; /* This forces all items to rest perfectly on the bottom shelf! */
    border-bottom: 8px solid var(--border-color); /* The actual "shelf" they sit on */
    padding-bottom: 2px;
    margin-bottom: 25px; /* The space between the shelves */
    overflow-x: auto; /* If you have too many items, it lets you scroll the shelf left to right! */
}

.media-item {
    text-align: center;
    width: 70px; /* Keeps all items small and uniform */
    flex-shrink: 0; /* Prevents the browser from squishing your covers */
}

.media-item img {
    width: 100%;
    height: auto;
    border: 1px solid var(--text-color);
    box-shadow: 2px 2px 0px var(--text-color); /* Adds a very retro, hard-edged drop shadow */
}

.media-title {
    display: block;
    font-size: 10px;
    font-weight: bold;
    margin-top: 5px;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* Adds "..." if the title is too long */
}

/* --- MOBILE RESPONSIVENESS (The Anti-Kayma Fix) --- */
@media (max-width: 800px) {
    /* 1. Stack the columns vertically instead of side-by-side */
    .layout-container {
        flex-direction: column; 
    }

    /* 2. Allow the sidebars to stretch across the whole phone screen */
    .sidebar {
        width: 100%; 
        margin-bottom: 20px; /* Adds breathing room between stacked items */
    }

    /* 3. Ensure the main content doesn't get squeezed */
    .center-content {
        width: 100%; 
    }

    /* 4. Fix the Spotify/Last.fm widget scaler for mobile */
    .widget-scaler iframe {
        transform: scale(0.70); /* Makes the widget slightly bigger on phones */
    }
}

/* --- BOX HOVER EFFECT --- */
section, .widget {
    transition: border-color 0.3s ease !important;
}

section:hover, .widget:hover {
    border-color: #F5F5DC !important; /* Bright orange-red so it is impossible to miss! */
    box-shadow: 2px 2px 0px #000000 !important; /* Adds a cool retro drop-shadow on hover too */
}