:root {
    --bg: #008080; /* Classic Windows 95 Teal */
    --win-gray: #c0c0c0;
    --win-shadow: #808080;
    --win-light: #ffffff;
    --text: #000;
    --accent-code: #000080; /* Navy Blue title bars */
}

body {
    background-color: var(--bg);
    /* Optional: Uncomment for a true 90s tiled look */
    /* background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); */
    font-family: "Times New Roman", Times, serif;
    color: var(--text);
    padding: 20px;
}

/* 90s Navigation - No more rounded pills */
nav {
    background: var(--win-gray);
    border: 3px outset var(--win-light);
    padding: 5px;
    margin-bottom: 30px;
    display: inline-block;
}

nav button {
    background: var(--win-gray);
    border: 2px outset var(--win-light);
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-size: 12px;
    margin: 2px;
    padding: 4px 10px;
    cursor: pointer;
}

nav button:active, .active-code, .active-run, .active-art {
    border: 2px inset var(--win-light) !important;
    background: #d0d0d0 !important;
    color: black !important;
}

/* The Container as a "Window" */
.container {
    background: var(--win-gray);
    border: 3px outset var(--win-light);
    width: 95%;
    max-width: 800px;
    padding: 0; /* Header takes care of padding */
}

/* Add a "Title Bar" to your sections */
h2 {
    background: linear-gradient(90deg, #000080, #1084d0);
    color: white;
    margin: 0;
    padding: 4px 8px;
    font-size: 14px;
    font-family: sans-serif;
    text-align: left;
}

.section {
    padding: 20px;
    border: 1px inset #fff;
}

/* Retro Cards */
.card {
    background: white;
    border: 2px inset var(--win-gray);
    padding: 10px;
    margin-bottom: 10px;
}

/* JJK Section - Let's make it look like a "Hack" */
.jjk-container {
    background: black;
    color: #00ff00; /* Matrix Green */
    border: 4px double #00ff00;
    font-family: "Courier New", Courier, monospace;
}

.grade-badge {
    background: yellow;
    color: black;
    border: 2px solid black;
    transform: none; /* Keep it boxy */
}

/* 90s Table */
.run-table {
    border: 2px solid #555;
}

.run-table th {
    background: #808080;
    color: white;
    border: 1px solid #fff;
}

/* Blink effect - the ultimate 90s tag */
.blink-cursor {
    animation: blink 0.5s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Scrollbar - Classic gray */
::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #dfdfdf; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px outset #eee; }