body {
    background-color: #1e1e1e;
    color: #d4d4d4;
}

.editor-container, .output-container {
    background-color: #252526;
    border: 1px solid #333333;
    border-radius: 4px;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

#editor {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    color: #d4d4d4;
    font-family: monospace;
    resize: none;
    padding: 1rem;
}

#output {
    flex-grow: 1;
    background-color: transparent;
    border: none;
    color: #d4d4d4;
    font-family: monospace;
    padding: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.btn-primary {
    background-color: #007acc;
    border-color: #007acc;
}

@media (max-width: 991.98px) {
    .split-container {
        flex-direction: column;
        height: auto;
    }

    .editor-container, .output-container {
        height: 50vh; /* Adjust as needed */
        margin-bottom: 1rem;
    }
}