body {
    background-color: #2b2b2b; /* Dark cool grey */
    color: #f8f8f2; /* Light grey for text */
    font-family: "Courier New", monospace;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.editor {
    display: flex;
    align-items: baseline; /* Align line numbers and code */
    width: 100%; /* Stretch to full width */
    height: auto; /* Full viewport height */
    overflow-x: hidden; /* Prevent the content from disappearing */
    flex-wrap: nowrap;
}

.line-numbers {
    height: auto;
    background-color: #1e1e1e; /* Slightly darker grey */
    color: #888888; /* Dimmed grey for numbers */
    text-align: right;
    padding: 0 5px; /* No top/bottom padding */
    margin: 0; /* Reset margins */
    border-right: 2px solid #444444;
    user-select: none;
}

.line-numbers div {
    line-height: 20px;
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
}

.code {
    flex-grow: 1;
    font-family: "Courier New", monospace;
    font-size: 14px;
    line-height: 20px; /* Match .line-numbers div */
    tab-size: 4;
    padding: 0 2px; /* Remove padding */
    margin: 0; /* Reset margins */
    overflow: auto;
    max-width: 60vw;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;

}

.code-indent1 {
    margin-left: 30px;
}

.code-indent2 {
    margin-left: 45px;
}

.code-indent3 {
    margin-left: 60px;
}

.keyword {
    color: #ff79c6;
    font-weight: 600;
}

.string {
    color: #f1fa8c;
    font-weight: 600;
}

.comment {
    color: #6272a4;
    font-style: italic;
}