:root {
    --color-bg-0: rgb(255, 255, 255);
    --color-bg-1: hsl(209, 36%, 86%);
    --color-bg-2: hsl(224, 44%, 95%);
    --color-theme-1: #000000;
    --color-theme-2: #4075a6;
    --color-text: rgba(23, 22, 22, 0.7);
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    min-height: 100vh;
    background-attachment: fixed;
    background-color: var(--color-bg-1);
    background-image: linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
}

.footer {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: 15px;
}

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

.editor-pane,
.viewport-pane {
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.viewport-pane canvas {
    width: 100% !important;
    height: 100% !important;
}

.editor-pane {
    border-right: 1px solid #ccc;
}

#editor {
    height: 100%;
}

#viewport {
    width: 100%;
    height: 100%;
}

.viewport-pane {
    width: 70%;
    /* Adjust as needed */
    height: 100%;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    width: 100%;
    height: 100%;
}

@media (prefers-color-scheme: dark) {
     :root {
        --color-bg-0: rgb(23, 22, 22);
        --color-bg-1: hsl(209, 36%, 16%);
        --color-bg-2: hsl(224, 44%, 5%);
        --color-theme-1: #ffffff;
        --color-theme-2: #4075a6;
        --color-text: rgba(255, 255, 255, 0.7);
    }
}

.CodeMirror {
    height: 100% !important;
    font-size: 14px;
    line-height: 1.6;
}

.CodeMirror-gutters {
    border-right: 1px solid #ddd;
    background-color: #f7f7f7;
}

.CodeMirror-linenumber {
    color: #999;
    padding: 0 3px 0 5px;
}

.cm-s-default .cm-keyword {
    color: #708;
}

.cm-s-default .cm-type {
    color: #085;
}

.cm-s-default .cm-variable-3 {
    color: #0a5;
}

.cm-s-default .cm-number {
    color: #164;
}

.cm-s-default .cm-string {
    color: #a11;
}

.cm-s-default .cm-comment {
    color: #940;
}

.cm-s-default .cm-variable {
    color: #00f;
}