/* --- Global Variables --- */
:root {
    --background-color: #000;
    --text-color: #0f0;
    --link-color: #61dafb;
    --link-visited-color: #c792ea;
    --link-hover-color: #ffffff;
}

html, body {
    overflow: hidden;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    margin: 0;
    padding: 20px 20px 30px 20px;
}

/* --- Loading Screen Styles --- */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #ccc; /* Classic BIOS gray/white text */
    font-family: 'Courier New', Courier, monospace;
    z-index: 9999;
}

#energy-star-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    white-space: pre;
    font-size: 10px;
    line-height: 1.0;
    color: #00f; /* Blue logo */
}

#terminal {
    border: 2px solid var(--text-color);
    padding: 10px;
    height: calc(100vh - 50px);
    overflow-y: scroll;
    position: relative;
}

#bios-output {
    padding: 20px;
    white-space: pre;
}

#output {
    margin: 0;
    white-space: pre-wrap;
    /* Add padding to the right to avoid overlapping with the neofetch/scoreboard displays */
    padding-right: calc(var(--neofetch-width, 0px) + 20px);
}

/* --- Hyperlink Styles for Terminal --- */

/* This styles the default look of your links */
#output a {
  /* A bright, legible cyan. Stands out well on dark backgrounds. */  
  color: var(--link-color); 
  text-decoration: underline; /* Underlining makes links obvious */
}

/* This styles links that the user has already visited */
#output a:visited {
  /* A light purple to show the link has been clicked */
  color: var(--link-visited-color);
}

/* This styles links when a user hovers their mouse over them */
#output a:hover {
  /* Brightens to white on hover for clear feedback */  
  color: var(--link-hover-color);
  text-decoration: none; /* Optional: removes underline on hover */
}


#input-line {
    display: flex;
    align-items: center;
    /* Also apply padding here to keep the input line aligned with the output above it */
    padding-right: calc(var(--neofetch-width, 0px) + 20px);
}

#input-text {
    white-space: pre; /* Preserve spaces */
}

#cursor {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background-color: var(--text-color);
    animation: blink 1s step-end infinite;
    margin-left: 1px;
}

@keyframes blink {
    50% { background-color: transparent; }
}

#prompt {
    margin-right: 10px;
}

#input {
    /* This is the actual input field, but it's visually hidden */
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    width: 100%;
}

#input:focus {
    outline: none;
}

/* --- Accordion Styles --- */

.accordion-button {
    background-color: transparent;
    color: var(--text-color); /* Match your terminal text color */
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-top: 5px; /* Change this from 10px to a smaller value, or remove it */
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
}

.accordion-content {
    padding: 0;
    background-color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content p {
    margin: 10px 0; /* Add some space around the text */
    line-height: 1.8; /* Adjust this value for more or less space */
}

/* Arrow Icon Styles */
.icon-arrow {
    display: inline-block;
    margin-right: 10px;
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--text-color); /* Arrow color */
    transition: transform 0.3s;
}

/* Rotate arrow when active/open */
.accordion-button.active .icon-arrow {
    transform: rotate(90deg);
}

/* --- Link List Styles (for accordions) --- */
.link-list {
    padding: 5px 0; /* Add some vertical padding inside the accordion */
    text-align: left; /* Explicitly align text to the left */
}

.link-list a {
    display: block; /* Ensure each link takes its own line */
}

.link-list a + a {
    margin-top: 4px; /* Add space between links, but not before the first one */
}

/* --- Resume Styles --- */
.resume-container {
    margin-top: 15px;
    display: grid;
    justify-items: start; /* Align grid items (iframe, button) to the left */
    gap: 15px;
}

.resume-container iframe {
    border: 1px solid var(--text-color); /* Match terminal border */
    width: 90%; /* Take up 90% of the available space */
    max-width: 800px; /* But don't get wider than 800px */
    height: auto; /* Let aspect-ratio control the height */
    aspect-ratio: 8.5 / 11; /* Maintain a standard document aspect ratio */
}

.download-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    text-decoration: none;
    background-color: var(--background-color);
    transition: background-color 0.3s, color 0.3s;
}

.download-button:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}

/* --- Neofetch Display Styles --- */
#neofetch-display {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; /* Sits above the output scroll content */
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; /* Slightly smaller to be less intrusive */
    line-height: 1.2;
    pointer-events: none; /* Allows clicks to pass through to the terminal */
    opacity: 0.5; /* Make it more of a background element */
}

#neofetch-display pre { margin: 0; }

/* --- Scoreboard Display Styles --- */
#scoreboard-display {
    position: absolute;
    top: 200px; /* Positioned below the neofetch display */
    right: 10px;
    z-index: 10;
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0.7;
}

#scoreboard-display pre { margin: 0; }

/* --- Donut Background Styles --- */
#donut-background {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; /* Place it behind all other content */
    color: var(--text-color);
    opacity: 0.2; /* Make it subtle so terminal text is readable */
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px; /* Smaller font size allows for more detail */
    line-height: 1;
    white-space: pre;
    text-align: center;
}

/* --- DOOM Game Styles --- */
/* When the game is active, hide the normal terminal content */
.game-active > #output,
.game-active > #input-line,
.game-active > #neofetch-display {
    display: none;
}

#doom-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 100;
    cursor: crosshair;
    color: #ccc;
}

#doom-screen, #doom-enemies-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px; /* A smaller font size allows for a higher "resolution" ASCII display */
    line-height: 1.0;
    text-align: center;
    white-space: pre;
}

#doom-enemies-screen {
    /* This layer sits on top of the main screen to render enemies in a different color */
    color: #4169E1; /* Deep Demonic Blue (RoyalBlue) */
    pointer-events: none; /* Clicks pass through to the container */
}

#doom-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8b0000; /* Deep crimson */
    font-size: 24px;
    font-weight: bold;
    pointer-events: none; /* Make sure it doesn't interfere with mouse events */
}

#doom-map-container {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    line-height: 1.0;
    white-space: pre; /* Fixes the map rendering as a single line */
}

#doom-fps {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 20px;
}

#doom-timer {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 20px;
}

#doom-hud {
    position: absolute;
    bottom: 20px;
    color: #ff4136; /* Classic DOOM red for HUD */
    font-size: 24px;
    text-shadow: 2px 2px #000;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 8px;
}

#doom-exit-message {
    position: absolute;
    top: 50px; /* Positioned just below the timer */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    opacity: 0.7;
    pointer-events: none;
}

#doom-reload-indicator {
    position: absolute;
    top: 60%; /* Positioned below the crosshair */
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffdd00;
    font-size: 24px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    text-shadow: 1px 1px 2px #000;
    display: none; /* Hidden by default */
}