/* 1. Base Setup (The Body Concept)
   This targets the entire page. We use a dark background and a monospace font 
   which is standard for all terminals, ensuring the Cyrillic characters line up perfectly. */
body {
    background-color: #121212; 
    color: #cccccc; 
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    margin: 0;
    padding: 20px;
    line-height: 1.4;
}

/* 2. The Box Model Concept
   We wrap everything in a container so the text doesn't stretch too wide on huge screens.
   'margin: 0 auto;' is a classic trick to perfectly center this box on the page. */
.terminal-window {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* 3. Typography Concepts
   We remove the default heavy margins from the h1 tag to make it sit 
   flush with the text below it, just like a real server output. */
.http-status h1 {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 0;
    font-weight: normal;
}

.http-status p {
    color: #888888;
    margin-top: 5px;
    font-size: 0.9rem;
}

/* 4. Using Classes for Context
   We use specific colors to differentiate the "user typing" from the "server responding". */
.command-input {
    color: #4CAF50; /* Muted green for the admin's input */
    font-weight: bold;
}

.log-output p {
    margin: 2px 0;
    font-size: 0.95rem;
    word-wrap: break-word; /* Ensures long server strings don't break the layout */
}

/* 5. The Alert Concept
   A single class to turn any line of text into a critical warning. */
.alert {
    color: #ff5555; /* Realistic error red */
}

/* 6. The Animation Concept (@keyframes)
   This creates the blinking terminal cursor. It switches the opacity from 1 (visible)
   to 0 (invisible) cleanly without fading, thanks to the 'step-end' property. */
.cursor {
    color: #cccccc;
    animation: blink 1.2s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}