/* Overall page background */
body {
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #00ff41; /* Bright green text color */
    font-family: 'Courier New', Courier, monospace; /* Monospace is essential */
    overflow: hidden; /* Hide scroll bars for cleaner look */
}

.terminal-container {
    /* Simulating the screen area */
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    width: 80%;
    max-width: 700px;
    min-height: 200px;
    border: 2px solid #00ff41;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.7); /* Add a neon glow */
    overflow-y: auto; /* Allow scrolling if text gets too long */
}

#typewriter-text {
    font-size: 1em;
    /* The "cursor" is now a block, not just a border */
    border-right: none; 
    white-space: pre-wrap; /* Allows text wrapping while keeping spacing */
    margin: 0;
    /* We use a different element for the cursor now */
}

/* We need to define a new look for the terminal cursor */
.cursor {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background-color: #00ff41; /* Solid green block cursor */
    vertical-align: middle;
    margin-left: 3px;
}

/* The blinking animation for the terminal cursor */
@keyframes terminal-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.blinking-cursor {
    animation: terminal-blink 1s step-end infinite;
}