/* ---------------------------------------------------- */
/* FONT IMPORT: VT323 for the retro terminal look */
/* ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=VT323:wght@400;700&display=swap');

:root {
    --terminal-bg: #000000;         /* Pure Black background */
    --terminal-text: #00CC33;       /* Softer, darker green for main body text */
    --terminal-prompt: #FFFFFF;     /* White/Light text for commands/prompts */
    --terminal-header-bg: #111111;
    --window-border: #00FF41;       /* Bright Green border for the window frame */
    --highlight-color: #8BE9FD;     /* Cyan for important words (like names/skills) */
    --link-color: #8BE9FD;          /* Cyan links */
    --list-marker-color: #FFFFFF;   /* White for list markers */

    /* Colors for Mac-style buttons */
    --button-red: #FF605C;
    --button-yellow: #FFBD44;
    --button-green: #00CA4E;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'VT323', monospace;
    line-height: 1.6;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2vw;
    overflow: hidden; 
}

/* ---------------------------------------------------- */
/* TERMINAL WINDOW AND HEADER STYLES */
/* ---------------------------------------------------- */
.terminal-window {
    width: 95vw; 
    max-width: 1400px; 
    height: 95vh; 
    max-height: 1000px; 
    background-color: var(--terminal-bg);
    border: 3px solid var(--window-border); 
    overflow: hidden; 
    position: relative;
    border-radius: 0; 
    display: flex;
    flex-direction: column;
}

.terminal-header {
    background-color: var(--terminal-header-bg);
    padding: 1vw 1.5vw; 
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--window-border);
    justify-content: space-between;
}

.terminal-title {
    color: var(--window-border); 
    font-size: 1.5vw; 
    font-weight: bold;
    white-space: nowrap; 
}

.terminal-buttons {
    display: flex;
    gap: 1vw; 
}

/* Terminal button base style */
.terminal-button {
    width: 1.5vw; 
    height: 1.5vw;
    min-width: 16px; 
    min-height: 16px;
    max-width: 24px; 
    max-height: 24px;
    border-radius: 50%;
    border: 1px solid var(--window-border);
    transition: background-color 0.1s;
}

/* Mac-style button colors */
.terminal-button.close {
    background-color: var(--button-red);
    border-color: var(--button-red); 
}

.terminal-button.minimize {
    background-color: var(--button-yellow);
    border-color: var(--button-yellow); 
}

.terminal-button.maximize {
    background-color: var(--button-green);
    border-color: var(--button-green); 
}

/* ---------------------------------------------------- */
/* CONTENT AREA STYLES (Scaling and Readability) */
/* ---------------------------------------------------- */
.terminal-content {
    color: var(--terminal-text); 
    padding: 2.5vw; 
    font-size: 1.4vw; /* *** MAIN TEXT SIZE *** */
    flex-grow: 1;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.terminal-content::-webkit-scrollbar {
    display: none;
}

.terminal-content p {
    margin-bottom: 1.5vw; 
}

/* List Styling */
.terminal-content ul {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5vw; 
    margin-bottom: 2vw; 
}

.terminal-content li {
    margin-bottom: 1vw; 
    position: relative;
    padding-left: 2.2vw; 
}

.terminal-content li::before {
    content: "─"; 
    color: var(--list-marker-color); 
    position: absolute;
    left: 0;
    font-weight: bold;
}


/* Specific styling for commands and output */
.section {
    margin-bottom: 4vw; 
}

.command {
    color: var(--terminal-prompt); 
    font-weight: bold;
    display: block;
    margin-top: 2.5vw; 
    margin-bottom: 1.2vw; 
    font-size: 1.7vw; 
    white-space: nowrap;
}

.highlight-text {
    color: var(--highlight-color); 
    font-weight: bold;
}

/* The prompt line */
.prompt {
    color: var(--terminal-prompt); 
    margin-top: 3vw; 
    display: inline;
    font-size: 1.4vw; 
}

/* Cursor blink effect */
.prompt ._ {
    display: inline-block;
    width: 0.8vw; 
    height: 1.2em;
    background-color: var(--terminal-prompt); 
    vertical-align: middle;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { background-color: transparent }
    50% { background-color: var(--terminal-prompt) }
}

/* Links */
.terminal-link {
    color: var(--link-color); 
    text-decoration: underline; 
    font-weight: bold;
}

.terminal-link:hover {
    color: var(--highlight-color);
}


/* ---------------------------------------------------- */
/* FINAL FIX STYLES FOR STATUS SECTION (Image Below Text) */
/* ---------------------------------------------------- */
.status-output-inline {
    display: block !important; /* Forces stacking */
    margin-top: 1.5vw !important;
    margin-bottom: 2vw !important; 
    color: var(--terminal-text) !important;
    text-align: center; /* Center everything in the block */
}

.status-image-final {
    width: 15vw !important; /* Make the image wider */
    height: auto !important; /* Adjust height automatically */
    min-width: 150px; 
    max-width: 250px; 
    border-radius: 8px; /* Slight rounding for the image border */
    object-fit: cover; 
    border: 2px solid var(--highlight-color); 
    display: block !important; /* Ensure image is a block element */
    margin: 1.5vw auto 0 auto !important; /* Center the image with margin */
}

.status-text-final {
    color: var(--terminal-text) !important;
    font-size: 1.4vw !important;
    margin: 0 !important;
    display: block !important; /* Ensure text is on its own line */
    text-align: center; /* Center the text */
}

/* ---------------------------------------------------- */
/* MEDIA QUERIES FOR RESPONSIVENESS */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    .terminal-window { width: 98vw; height: 98vh; }
    .terminal-content { padding: 4vw; font-size: 2.5vw; }
    .terminal-title { font-size: 3vw; }
    .command { font-size: 4vw; }
    .prompt { font-size: 3.5vw; }
    
    .status-output-inline {
        margin-bottom: 4vw !important;
    }
    .status-image-final {
        width: 30vw !important;
        max-width: 150px;
    }
    .status-text-final {
        font-size: 2.5vw !important;
    }
}

@media (max-width: 480px) {
    .terminal-window { border: 2px solid var(--window-border); }
    .terminal-header { padding: 3vw 5vw; }
    .terminal-title { font-size: 4vw; }
    .terminal-content { padding: 5vw; font-size: 3.5vw; }
    .command { font-size: 5vw; margin-top: 4vw; margin-bottom: 2vw; }
    .prompt { font-size: 4vw; }
    
    .status-output-inline {
        gap: 4vw;
    }
    .status-image-final {
        width: 15vw !important;
        height: auto !important;
    }
    .status-text-final {
        font-size: 3.5vw !important;
    }
}