:root {
    --IDE_BG_COLOR: white;
    --IDE_FG_COLOR: black;
    --IDE_PARTITION_A: 600px;
    --IDE_PARTITION_B: 200px;
    --IDE_ADJUSTER_HANDLE_SIZE: 10px;
    --IDE_TWO_COLUMN_BOOL: 1;
}

@media (prefers-color-scheme: dark) {
    :root {
	--IDE_BG_COLOR: black;
	--IDE_FG_COLOR: orange;
    }

    ::-webkit-scrollbar {
	background-color: #101010;
    }

    ::-webkit-scrollbar-thumb {
	background: orange;
    }

    ::-webkit-scrollbar-corner {
	background: black;
    }
}

#ide_root {
    display: grid;
    padding: 0px 20px;
    min-height: 100vh;
    grid-template-areas:
	"M M M"
	"T A R"
	"E A R"
	"E A B"
	"E A L"
	"C C C";
    grid-template-columns: var(--IDE_PARTITION_A) 10px 1fr;
    grid-template-rows: repeat(2, min-content) var(--IDE_PARTITION_B) 10px 1fr 20px;
}

#ide_menu_bar {
    grid-area: M;
    z-index: 100;
}

#ide_title {
    grid_area: T;
    text-align: center;
    margin: 0px;
    padding: 25px;
    height: min-content;
    align-self: start;
}

#ide_editor {
    grid-area: E;
    height: 100%;
}

#ide_registers {
    grid-area: R;
    height: 100%;
}

#ide_logger {
    grid-area: L;
    height: 100%;
}

#ide_tab_view {
    grid-area: V;
    display: none;
}

#ide_partition_a {
    grid-area: A;
    border-right: 1px solid var(--IDE_FG_COLOR);
    cursor: col-resize;
}

#ide_partition_b {
    grid-area: B;
    border-top: 1px solid var(--IDE_FG_COLOR);
    cursor: row-resize;
}

#copyright {
    grid-area: C;
    text-align: center;
    border-top: 1px solid var(--INTERFACE_BORDER_COLOR);
    color: var(--EDITOR_SETTINGS_FG_COLOR);
    font-size: calc(var(--EDITOR_FONT_SIZE) - 2px);
}

@media screen and (max-width: 800px) {
    :root {
	--IDE_TWO_COLUMN_BOOL: 0;
    }

    #ide_root {
	grid-template-areas:
	    "M"
	    "T"
	    "V"
	    "C";
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, min-content) 1fr 20px;
    }

    #ide_partition_a {display: none;}
    #ide_partition_b {display: none;}
    #ide_tab_view {display: block;}
    #ide_editor {height: 100%;}
}