:root {
    /* DEFAULT THEME: Blue Tape Recorder */
    --bg-main: #121619;
    --bg-panel: #1A2228;
    --bg-panel-light: #0E1214;
    --nav-bg: #2C5E7A;
    --border-main: #394B59;
    --border-nav: #1C3E52;
    --border-panel: #5C768A;
    
    --text-main: #C7D3DC;
    --text-title: #A5C2D6;
    --text-highlight: #F28C38;
    --text-accent: #64E3A1;
    
    --btn-bg: #D9E2E8;
    --btn-border-light: #ffffff;
    --btn-border-dark: #8FA6B5;
    --btn-pressed-bg: #B9C6D1;
    --btn-text: #121619;
    --btn-shadow: #0D1013;
}

[data-theme="matrix"] {
    --bg-main: #050505;
    --bg-panel: #0a110a;
    --bg-panel-light: #0f1a0f;
    --nav-bg: #0a1a0a;
    --border-main: #113311;
    --border-nav: #0d260d;
    --border-panel: #1a4d1a;
    
    --text-main: #33ff33;
    --text-title: #66ff66;
    --text-highlight: #ffffff;
    --text-accent: #00ff00;
    
    --btn-bg: #051105;
    --btn-border-light: #33ff33;
    --btn-border-dark: #113311;
    --btn-pressed-bg: #0a1f0a;
    --btn-text: #33ff33;
    --btn-shadow: #000000;
}

[data-theme="vaporwave"] {
    --bg-main: #1b0e29;
    --bg-panel: #281440;
    --bg-panel-light: #371c56;
    --nav-bg: #f52589;
    --border-main: #702963;
    --border-nav: #cc186d;
    --border-panel: #05d9e8;
    
    --text-main: #f1e4fd;
    --text-title: #05d9e8;
    --text-highlight: #ffeb3b;
    --text-accent: #f52589;
    
    --btn-bg: #01012b;
    --btn-border-light: #05d9e8;
    --btn-border-dark: #702963;
    --btn-pressed-bg: #10103b;
    --btn-text: #f1e4fd;
    --btn-shadow: #000000;
}

[data-theme="persona5"] {
    --bg-main: #121212;
    --bg-panel: #1e1e1e;
    --bg-panel-light: #2c2c2c;
    --nav-bg: #d90000;
    --border-main: #d90000;
    --border-nav: #ffffff;
    --border-panel: #ffffff;
    
    --text-main: #e0e0e0;
    --text-title: #ffffff;
    --text-highlight: #fff200;
    --text-accent: #d90000;
    
    --btn-bg: #000000;
    --btn-border-light: #ffffff;
    --btn-border-dark: #8b0000;
    --btn-pressed-bg: #d90000;
    --btn-text: #ffffff;
    --btn-shadow: #000000;
}

[data-theme="persona3"] {
    --bg-main: #061121;
    --bg-panel: #0d2240;
    --bg-panel-light: #16345c;
    --nav-bg: #091a32;
    --border-main: #24588e;
    --border-nav: #38b2ce;
    --border-panel: #38b2ce;
    
    --text-main: #d5e5f5;
    --text-title: #ffffff;
    --text-highlight: #fcf6b1;
    --text-accent: #38b2ce;
    
    --btn-bg: #061121;
    --btn-border-light: #38b2ce;
    --btn-border-dark: #12305a;
    --btn-pressed-bg: #24588e;
    --btn-text: #ffffff;
    --btn-shadow: #000000;
}

[data-theme="legacy"] {
    --bg-main: #000000;
    --bg-panel: #111111;
    --bg-panel-light: #111111;
    --nav-bg: rgb(104, 148, 158);
    --border-main: #333333;
    --border-nav: rgb(104, 148, 158);
    --border-panel: #555555;
    
    --text-main: #cccccc;
    --text-title: #d4a6b2;
    --text-highlight: #d4a6b2;
    --text-accent: #7dbf8a;
    
    --btn-bg: lightblue;
    --btn-border-light: lightblue;
    --btn-border-dark: lightblue;
    --btn-pressed-bg: lightblue;
    --btn-text: #000000;
    --btn-shadow: transparent;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

.banner-img{
    width: 100%;
}

.nav-bar {
    display: flex;
    background-color: var(--nav-bg);
    border-bottom: 4px solid var(--border-nav);
    gap: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    position: relative;
    align-items: center;
}

.button-container{
    display: flex;
    gap: 10px;
}

.button-container a {
    text-decoration: none;
    color: var(--btn-text);
    font-weight: bold;
    font-family: 'Courier New', monospace;

    background-color: var(--btn-bg);
    padding: 6px 16px;
    border-top: 3px solid var(--btn-border-light);
    border-left: 3px solid var(--btn-border-light);
    border-bottom: 3px solid var(--btn-border-dark);
    border-right: 3px solid var(--btn-border-dark);
    box-shadow: 4px 4px 0px var(--btn-shadow);
    transition: all 0.1s;
}

.button-container a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--btn-shadow);
    filter: brightness(1.1);
}


.WIP-Marquee{
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.WIP-Marquee marquee {
    width: 100%;
    font-size: 1.1em;
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-main);
    text-shadow: 1px 1px 0px var(--border-main);
}

.theme-selector {
    background-color: var(--bg-panel);
    color: var(--text-title);
    border: 2px inset var(--border-panel);
    font-family: 'Courier New', Courier, monospace;
    padding: 5px 8px;
    margin-right: 15px;
    outline: none;
    font-weight: bold;
    cursor: pointer;
}

/* Global CD Player */
.cd-nav {
    display: flex;
    align-items: center;
    margin-left: auto; /* Pushes it and the theme selector to the right */
    margin-right: 15px;
    gap: 10px;
}

.refresh-btn {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 18px;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.3s;
}
.refresh-btn:hover {
    opacity: 1;
    transform: rotate(180deg);
}

.cd-img {
    width: 28px;
    height: 28px;
    cursor: pointer;
    transition: filter 0.3s;
}

.cd-img.spinning {
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* CD Theme Colors via Filters */
[data-theme="default"] .cd-img { filter: sepia(0.5) hue-rotate(180deg) saturate(1.5); }
[data-theme="matrix"] .cd-img { filter: sepia(1) hue-rotate(90deg) saturate(3) brightness(0.8); }
[data-theme="vaporwave"] .cd-img { filter: sepia(1) hue-rotate(270deg) saturate(3); }
[data-theme="legacy"] .cd-img { filter: grayscale(1); }
[data-theme="persona3"] .cd-img { filter: sepia(1) hue-rotate(200deg) saturate(2); }
[data-theme="persona5"] .cd-img { filter: sepia(1) hue-rotate(330deg) saturate(4); }
/* Callouts / Admonitions */
.callout {
    border-left: 4px solid var(--border-panel);
    background-color: var(--bg-panel);
    margin: 15px 0;
    padding: 10px 15px;
    border-radius: 0 4px 4px 0;
}
.callout-title {
    font-weight: bold;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Courier New', Courier, monospace;
}
.callout-icon {
    font-size: 1.1em;
}
.callout-content p:last-child {
    margin-bottom: 0;
}
.callout-content p:first-child {
    margin-top: 0;
}

/* Specific Callout Colors */
.callout-info, .callout-note {
    border-left-color: #38b2ce;
}
.callout-info .callout-title, .callout-note .callout-title { color: #38b2ce; }

.callout-warning, .callout-caution {
    border-left-color: #F28C38;
}
.callout-warning .callout-title, .callout-caution .callout-title { color: #F28C38; }

.callout-important, .callout-danger, .callout-error {
    border-left-color: #d45b5b;
}
.callout-important .callout-title, .callout-danger .callout-title { color: #d45b5b; }

.callout-tip, .callout-success {
    border-left-color: #7dbf8a;
}
.callout-tip .callout-title, .callout-success .callout-title { color: #7dbf8a; }

/* Mobile Responsive Layout */
@media (max-width: 768px) {
    .nav-bar {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 10px;
    }
    .button-container {
        flex-wrap: wrap;
        justify-content: center;
    }
}