html,
body {
    height: 100%;
    margin: 0;
    font-family: monospace;
    /* For a code-like font */
    background-color: #282c34;
    /* Dark background for code editor feel */
    color: #abb2bf;
    /* Light text color */
    font-size: 20px;
}

.container {
    font-size: 14px;
    display: flex;
    /* Use flexbox for side-by-side layout */
    height: 100%;
}

.box {
    flex: 1;
    /* Each box takes equal width */
    padding: 15px;
    border-right: 2px solid lightgray;
    /* Border for visual separation */
    overflow: auto;
    /* Enable scrolling if content overflows */
    box-sizing: border-box;
    /* Include padding and border in element's total width and height */
}

.text-box {
    background-color: #3e4451;
    /* Slightly different background for text box */
}

.code-box {
    font-size: 14px;
    background-color: #282c34;
    /* Code box background */
}

.code-editor {
    width: 100%;
    height: 100%;
    border: none;
    /* Remove default textarea border */
    background-color: transparent;
    /* Make background transparent to show parent's background */
    color: inherit;
    /* Inherit text color from parent */
    font-family: inherit;
    /* Inherit font from parent */
    resize: none;
    /* Disable textarea resizing handle */
    outline: none;
    /* Remove outline on focus */
    padding: 0;
    /* Remove default textarea padding */
    font-size: 14px;
}

pre {
    margin: 0;
    /* Remove default pre margin */
    white-space: pre-wrap;
    /* Wrap long lines of text */
}

:root {
    --bg: #1e1f24;
    --panel: #2a2d37;
    --border: #3a3f4b;
    --text: #c7cbd4;
    --muted: #9aa1ab;
    --accent: #ffffff;
    /* caret/highlight */
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.container {
    display: flex;
    height: 100%;
}

.box {
    flex: 1;
    padding: 12px;
    overflow: auto;
    box-sizing: border-box;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--border);
}

.text-box {
    background: #333744;
    /* subtle contrast */
}

.code-box {
    background: var(--panel);
}
.text-box .ans {
    width: 600px;
    height: 30px;
    border-radius: 20px;
    background-color: #086692;
    border: none;              /* remove default button border */
    color: #fff;               /* make text visible */
    font: inherit;         
    cursor: pointer;           /* pointer on hover */
    display: none;
}

.ans:hover {
    background-color: #0a7fb5; /* nicer hover */
}

.cpp {
    background-color: #086692;
    width: 150px;
    height: 20px;
    border-radius: 5px;
    border: none;              /* remove default button border */
    color: #fff;               /* make text visible */
    font: inherit;         
    cursor: pointer;           /* pointer on hover */
}
.rust {
    background-color: #2f241c;
    width: 150px;
    height: 20px;
    border-radius: 5px;
    border: none;              /* remove default button border */
    color: #fff;               /* make text visible */
    font: inherit;         
    cursor: pointer;           /* pointer on hover */
}
.cs {
    background-color: #9b4f96;
    width: 150px;
    height: 20px;
    border-radius: 5px;
    border: none;              /* remove default button border */
    color: #fff;               /* make text visible */
    font: inherit;         
    cursor: pointer;           /* pointer on hover */
}