/* --- Legacy Mode Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body.legacy-mode {
    background-color: #C0C0C0; /* Classic grey background */
    color: #000000;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transition: none; /* No smooth transitions */
}

body.legacy-mode header {
    background: #000080; /* Navy blue */
    color: #FFFFFF;
    border-bottom: 2px solid #000000;
    padding: 1rem 0;
    text-align: center;
}

body.legacy-mode #name-trigger:hover {
    text-shadow: 0 0 10px #FFFF00;
}

body.legacy-mode nav {
    background: #C0C0C0;
    padding: 0.5rem;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: inset 1px 1px 0px #808080;
}

body.legacy-mode nav ul li a {
    color: #0000FF; /* Bright blue links */
    text-decoration: underline;
}

body.legacy-mode nav ul li a:hover {
    color: #FF00FF; /* Magenta hover */
    background: #FFFF00; /* Yellow background hover */
}

body.legacy-mode main {
    background: #C0C0C0;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    box-shadow: none;
    border-radius: 0;
}

body.legacy-mode h1, body.legacy-mode h2 {
    color: #000000;
    font-size: 12px;
}

body.legacy-mode h2 {
    text-decoration: underline;
}

body.legacy-mode a {
    color: #0000FF;
}

body.legacy-mode a:hover {
    color: #FF00FF;
}

body.legacy-mode .content-section {
    border-bottom: 2px solid #808080;
}

body.legacy-mode footer {
    color: #000000;
    border-top: 2px solid #808080;
}

/* Style for the legacy mode toggle button */
#legacy-mode-toggle {
    position: fixed;
    top: 20px;
    right: 150px; /* Position next to modern mode button */
    background-color: #C0C0C0;
    color: #000000;
    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
    padding: 8px 12px;
    cursor: pointer;
    z-index: 2000;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
}

#legacy-mode-toggle:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}