Untitled

body {
    background-color: #0c0c0c;
    color: #cccccc;
    font-family: 'Courier New', monospace;
    padding: 20px;
    display: flex; /* Use Flexbox for layout */
    flex-direction: column; /* Stack elements vertically */
    height: calc(100vh - 40px); /* Full viewport height minus padding */
}

#output {
    white-space: pre-wrap;
    overflow: auto; /* Add scrolling if content overflows */
    flex-grow: 1; /* Allow #output to grow and fill available space */
    margin-bottom: 20px; /* Ensure there's space at the bottom */
}

#inputLine {
    display: flex;
    align-items: baseline;
    margin-top: auto; /* Push #inputLine to the bottom of the viewport */
}

#prompt, #input {
    font-size: 1em; /* Base font size */
}

#input {
    color: #cccccc;
    background-color: #0c0c0c;
    border: none;
    outline: none;
    width: 100%; /* Take up remaining space */
    font-family: 'Courier New', monospace;
}

@media only screen and (max-width: 900px) {
    #output {
        font-size: calc(1em + 1vw); /* Adjust font size based on viewport width */
    }
    #prompt, #input {
        font-size: calc(1em + 1vw); /* Adjust font size */
    }
}