:root {
    --text: #ff9900;
    --border: #b35900;
    --accent: #ffd633;
    --bg: #0d0600;
    --gradientTop: rgba(30, 15, 0, 0.8);
    --gradientBottom: rgba(15, 5, 0, 0.9);
    --glow: rgba(255, 153, 0, 0.6);
}

body.theme-green {
    --text: #d4f0df; /* Very soft, light green */
    --border: #8bb59d; /* Muted sage */
    --accent: #e8f7ee;
    --bg: #1a2620; /* Dusty dark green */
    --gradientTop: rgba(80, 110, 95, 0.7);
    --gradientBottom: rgba(40, 60, 50, 0.8);
    --glow: rgba(212, 240, 223, 0.5); /* Softer glow */
}

body.theme-pink {
    --text: #ffd4e5; /* Soft baby pink */
    --border: #c48b9f; /* Muted dusty rose */
    --accent: #ffe8f0;
    --bg: #2b1d22; /* Dusty dark mauve */
    --gradientTop: rgba(110, 75, 90, 0.7);
    --gradientBottom: rgba(60, 35, 45, 0.8);
    --glow: rgba(255, 212, 229, 0.5);
}

body.theme-blue {
    --text: #d4e4ff; /* Soft baby blue */
    --border: #8ba1c4; /* Muted slate */
    --accent: #e8f0ff;
    --bg: #1c212b; /* Dusty dark blue-grey */
    --gradientTop: rgba(75, 95, 125, 0.7);
    --gradientBottom: rgba(35, 50, 70, 0.8);
    --glow: rgba(212, 228, 255, 0.5);
}

* { box-sizing: border-box; }

body, button, input {
    padding: 10px;
    font-family: 'VT323', monospace;
    font-size: 24px; 
    color: var(--text);
    transition: background-color 0.5s, color 0.5s;
    background-color: var(--bg); 
    background-image: url('stars.gif'); 
    background-size: auto;
    background-repeat: repeat;
    background-attachment: fixed;
    background-blend-mode: luminosity;
    
.scanlines {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 999;
}

.container {
    max-width: 65rem;
    margin: 2vw auto 12px auto;
    border: 6px ridge var(--border);
    outline: 3px solid var(--border);
    outline-offset: 4px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;
    position: relative;
    z-index: 10;
    box-shadow: 0 0 20px var(--glow);
    background-color: var(--gradientBottom);
    background-image: repeating-radial-gradient( circle at 0 0, transparent 0, var(--gradientBottom) 9px ), repeating-linear-gradient( var(--bg), var(--bg));
}

.small { flex: 1 1 20%; min-width: 150px; } 
.large { flex: 1 1 50%; min-width: 300px; } 
.full { flex: 1 1 100%; }
.half { flex: 1 1 48%; }

header {
    width: 100%;
    height: 200px; 
    border: 2px ridge var(--border);
    border-radius: 5px;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    
    background-image: linear-gradient(var(--gradientTop), var(--gradientBottom)), url('buny.png');
    background-size: cover, auto; 
    background-position: center, right center; 
    background-repeat: no-repeat, no-repeat; 
}

header span {
    font-size: 2.4rem;
    font-weight: bold;
    text-shadow: 0 0 10px var(--glow);
    color: var(--text);
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.theme-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0,0,0,0.6);
    color: var(--text);
    border: 2px ridge var(--border);
    padding: 5px 10px;
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    font-size: 1rem;
    transition: 0.3s;
}

.theme-btn:hover {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 0 10px var(--glow);
}

nav, section {
    border: 2px ridge var(--border);
    border-radius: 5px;
    padding: 10px;
    background: linear-gradient(var(--gradientTop),var(--gradientBottom));
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

h1, h2, h3, h4, p {
    margin-top: 0; 
}

nav div, h2, h3, h4 {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 5px;
    margin-bottom: 10px; 
    text-shadow: 0 0 5px var(--glow);
}

nav div, h4 {
    font-size: 1.7rem; 
}

/* Main Container Titles */
h2 {
    font-size: 1.6rem; 
}

nav a {
    display: block;
    margin: 5px 0; 
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 4px 7px;
    text-decoration: none;
    font-size: 1.3rem;
    transition: 0.2s;
}

nav a:hover, nav a:focus {
    background: var(--border);
    padding-left: 12px;
    text-shadow: 0 0 8px var(--glow);
}

.iframe-container {
    padding: 0;
    height: 65vh; 
    overflow: hidden;
}

iframe { width: 100%; height: 100%; border: none; background: transparent; }

.glowing-bunny {
    font-size: 18px;
    line-height: 1.2;
    text-align: center; /* Now this will actually center it perfectly! */
    margin: 10px auto;
    color: var(--text);
    animation: bunnyPulse 2s infinite alternate;
}

@keyframes bunnyPulse {
    0% { text-shadow: 0 0 5px var(--glow); opacity: 0.8; }
    100% { text-shadow: 0 0 15px var(--text), 0 0 20px var(--glow); opacity: 1; }
}

footer { text-align: center; margin-top: 10px; font-size: 0.9rem; }

p, li, div { 
    font-size: 1.5rem; 
    line-height: 1.4; 
    margin-bottom: 12px; 
    text-shadow: 0 0 4px var(--glow); 
}

footer { 
    text-align: center; 
    margin-top: 15px; 
    font-size: 1.2rem; 
}

a, a:link, a:visited {
    color: var(--text);
    text-decoration: underline;
    text-decoration-style: dashed;
}

a:hover, a:focus {
    color: var(--bg);
    background-color: var(--text);
    text-decoration: none;
    text-shadow: none;
}

.status-table {
    width: 100%;
    font-size: 1.3rem; 
    margin-top: 5px;
}

#statuses > td {
    width: 50%; 
    vertical-align: top;
    line-height: 1.5;
}

.status-ok {
    color: #36fda0;
    text-shadow: 0 0 10px #36fda0;
    font-weight: bold;
}

.status-fail {
    color: #ff5858;
    text-shadow: 0 0 10px #ff5858;
    font-weight: bold;
    animation: terminal-alert 1.5s infinite; 
}

@keyframes terminal-alert {
    0%, 100% { opacity: 1; text-shadow: 0 0 15px #ff5858; }
    50% { opacity: 0.6; text-shadow: 0 0 5px #ff5858; }
}


.pkmn {
    /* 1. Inside of the box */
    color: var(--text);
    background: var(--bg);
    padding: 15px;
    margin: 15px 0;
    border: 4px solid var(--text);
    border-radius: 6px; 
    box-shadow: 
        inset 0 0 0 4px var(--bg),   
        inset 0 0 0 6px var(--text), 
        0 0 10px var(--glow);        
}