:root {
    --background-color: #1e1e1e;
    --text-color: #d4d4d4;
    --header-footer-color: #333;
    --button-bg-color: #222;
    --button-hover-bg-color: #333;
	--textarea-bg-color: #2b2b2b;
    --canvas-bg-color: #2E8B57;
    --border-color: #555;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    height: 100%;
    background-color: var(--background-color);
    color: var(--text-color);
}

body {
    display: flex;
    flex-direction: column;
}

header, footer {
    background-color: var(--header-footer-color);
    color: #fff;
    padding: 10px;
    text-align: center;
}

header h1, footer p {
    margin: 5px 0;
    font-size: 1.5em;
}



nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline-block;
    margin-right: 10px;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 10px;
    flex-grow: 1;
}

#editor-container, #canvas-container, #text-io-wrapper, #console-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 45%;
    margin: 10px;
    background-color: #111;
    padding: 10px;
    border: 1px solid var(--border-color);
}

textarea {
    width: 100%;
	height: 100%;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    background-color: var(--textarea-bg-color);
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
    background-size: cover;
    color: #fff;
    font-family: monospace;
}

#code-input {
   color: #00ff00;
}

canvas {
    width: 100%;
	height: 100%;
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    background-color: var(--canvas-bg-color);
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
    background-size: cover;
    color: #fff;
    font-family: monospace;
}


textarea {
    // resize: vertical;
	height: 100%;
}

#output {
    width: 100%;
    height: 150px;
    background-color: #111;
    border: 1px solid var(--border-color);
    font-family: monospace;
    overflow-y: auto;
}


.left-textboxes {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure full width */
}

.left-textboxes textarea {
    width: 100%;
    height: 50px; /* Reduced height */
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #555;
    background-color: #2b2b2b; /* Dark green blackboard */
    background-image: url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); /* Blackboard texture */
    background-size: cover;
    color: #fff;
    font-family: monospace;
}

.left-textboxes button {
    background-color: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 5px 10px;
    cursor: pointer;
}

.left-textboxes button:hover {
    background-color: #333;
}

.left-textboxes .button-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.left-textboxes .button-group button {
    width: 48%;
    height: auto;
    padding: 5px 10px;
}

/* ---- */

.button-group {
    display: flex;
    justify-content: space-between;
}

button {
    background-color: var(--button-bg-color);
    color: #fff;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: var(--button-hover-bg-color);
}

input[type="file"], input[type="text"] {
    background-color: var(--button-bg-color);
    color: #fff;
    border: 1px solid var(--border-color);
    padding: 5px;
    margin-top: 5px;
}