/*Root access style for root element (html tag for html) and is useful for 
defining global variables in css*/
:root {
    --new-line-width: 5px;
    --new-line-height: 5px;
    /* --tab-ident: 50px; */
    --tab-ident: 2em;
}

@media (max-width: 660px) {
    :root {
        --new-line-width: 4px;
        --new-line-height: 4px;
        /* --tab-ident: 40px; */
    }
}

@media (max-width: 480px) {
    :root {
        --new-line-width: 3px;
        --new-line-height: 3px;
        /* --tab-ident: 30px; */
    }
}

@media (max-width: 410px) {
    :root {
        --new-line-width: 2px;
        --new-line-height: 2px;
        /* --tab-ident: 2em; */
    }
}


input,
.terminal,
.terminal-error,
.terminal-success,
.terminal-warn,
.code-font,
.code-default,
.code-default-keyword,
.code-special-keyword,
.code-local-variable,
.code-object,
.code-enum,
.code-method,
.code-string,
.code-number,
.code-comment {
    /* font-family: 'Monaco', 'Consolas', monospace; */
    font-weight: bold;
    margin-left: 0%;
    margin-right: 0%;
}

button,
select,
input,
.default-font {
    font-family: 'Courier New', Courier, monospace;
}

.code-display-font {
    font-family: 'Monaco', 'Consolas', monospace;
}

.code-new-line {
    width: var(--new-line-width);
    height: var(--new-line-height);
    margin-top: 0%;
    margin-bottom: 0%;
}

.code-2-new-line {
    width: calc(var(--new-line-width));
    height: calc(var(--new-line-height)*8);
    margin-top: 0%;
    margin-bottom: 0%;
}

.code-4-new-line {
    width: calc(var(--new-line-width));
    height: calc(var(--new-line-height)*16);
    margin-top: 0%;
    margin-bottom: 0%;
}

.code-tab-space {
    margin-left: var(--tab-ident);
}

.code-2-tab-space {
    margin-left: calc(2*var(--tab-ident));
}

.code-3-tab-space {
    margin-left: calc(3*var(--tab-ident));
}

.unfocused-code {
    opacity: 0.7;
}

.terminal {
    color: #abadaf;
}

.terminal-error,
.table-wrong {
    color: rgb(134, 32, 32);
}

.terminal-warn,
.table-half-correct {
    color: rgb(163, 142, 24);
}

.terminal-success,
.table-correct {
    color: rgb(27, 133, 27);
}

.code-default {
    color: #a5a5a5;
}

.code-default-keyword {
    color: #2b67a0;
}

.code-special-keyword {
    color: #c083b6;
}

.code-local-variable {
    color: #67afc5;
}

.code-object {
    color: #35865e;
}

.code-enum {
    color: #7ea776;
}

.code-method {
    color: #c4be76;
}

.code-string {
    color: #946446;
}

.code-number {
    color: #B5CE9B
}

.code-comment {
    color: #646363;
}

.dark-on-hover::before {
    opacity: 1;
    transition: 250ms ease-in-out;
}

.selected-color,
.dark-on-hover:hover {
    background-color: rgb(74, 75, 77);
}

.dark-on-hover:disabled,
button[disabled] {
    background-color: #1E1E1E;
    opacity: 0.5;
}