body {
    background-color: #1a1a1a; /* Dark background */
    color: #00ff00; /* Green text */
    font-family: 'Courier New', Courier, monospace; /* Monospace font */
    margin: 0;
    /* padding: 20px; */ /* Remove or set top/bottom padding to 0 */
    padding: 0 20px; /* Keep side padding if desired, remove top/bottom */
    font-size: 16px;
    line-height: 1.4;
    /* overflow: hidden; */ /* Remove this or move it to #terminal if needed after loading */
}

/* Loading Screen Styles */
#loading-screen {
    position: fixed; /* Cover the whole screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Black background */
    color: #00ff00; /* Green text */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    z-index: 1000; /* Ensure it's on top */
}

/* Utility class to hide elements */
.hidden {
    display: none !important; /* Use !important to override other display properties if necessary */
}

/* Style for the typing cursor */
.typing-cursor {
    display: inline-block;
    background-color: #00ff00; /* Green cursor */
    width: 10px; /* Adjust width as needed */
    height: 1.2em; /* Match line height */
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: bottom; /* Align with text bottom */
}

@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: #00ff00; } /* Green */
}


#terminal {
    background-color: #000; /* Black terminal background */
    border: 1px solid #333;
    padding: 15px; /* Keep internal padding */
    /* height: calc(100vh - 70px); */ /* Change height calculation */
    height: 100vh; /* Make terminal fill the viewport height */
    overflow-y: auto; /* Allow scrolling *inside* the terminal */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Initially hidden via class in HTML */
}

#output p {
    margin: 5px 0;
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}

.prompt-line {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.prompt {
    color: #00aaff; /* Blue prompt */
    margin-right: 8px;
    white-space: nowrap;
}

#commandInput {
    background-color: transparent;
    border: none;
    color: #00ff00; /* Green input text */
    font-family: inherit;
    font-size: inherit;
    outline: none;
    flex-grow: 1; /* Take remaining space */
    padding: 0;
    /* Remove autofocus from HTML and set it via JS after loading */
}

/* Style for command output */
.command-output {
    color: #ffffff; /* White output for clarity */
    margin-left: 10px; /* Indent command output slightly */
}

/* Style for help command output */
.help-command {
    color: #ffff00; /* Yellow for help commands */
    cursor: pointer; /* Indicate it's clickable */
    /* text-decoration: underline; */ /* REMOVE THIS LINE */
    /* text-decoration-style: dotted; */ /* REMOVE THIS LINE */
    position: relative; /* Needed for tooltip positioning */
}

.help-command:hover {
    /* text-decoration-style: solid; */ /* REMOVE THIS LINE */
    /* Optional: Add a different hover effect if desired, e.g., slight brightness change */
    filter: brightness(1.2);
}

/* Style for the "Copied!" tooltip */
.copy-tooltip {
    position: absolute;
    bottom: 100%; /* Position above the command */
    left: 50%;
    transform: translateX(-50%);
    background-color: #00ff00; /* Green background */
    color: #000000; /* Black text */
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Don't interfere with clicks */
    margin-bottom: 4px; /* Space between command and tooltip */
}

.copy-tooltip.visible {
    opacity: 1;
}


.help-description {
    color: #cccccc; /* Lighter gray for descriptions */
    margin-left: 20px;
}

/* Scrollbar styling (optional, for better aesthetics) */
#terminal::-webkit-scrollbar {
    width: 8px;
}

#terminal::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#terminal::-webkit-scrollbar-thumb {
    background-color: #00ff00;
    border-radius: 4px;
    border: 1px solid #1a1a1a;
}