@import url('./cli-section.css');
@import url('./display-section.css');
@import url('./scrollbar.css');
/*  <<< CSS RESET FILE >>>  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
 overflow: hidden;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquotebefore, blockquoteafter,
qbefore, qafter {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*  <<< \CSS RESET FILE >>>  */


:root{

    --font-size: clamp(16px, 18px, 22px);
    --font-family: 'Consolas', 'Menlo', monospace;


    /* Default colors */
    --body-background-color: #000000;
    --border-color: #67E480;
    --section-background-color: #191622;
    --user-type-color: #FF79C6;
    --user-name-color: #67E480;
    --symbols-color: #ABB2BF;
    --text-color: #B4E1FD;
    --link-color: #E96379;

    --scrollbar-0: #191622;
    --scrollbar-100: #83FF08;

    --cmatrix-color: rgba(103, 228, 128, 1);
    --cmatrix-background: #000000;

    /* Display section */
    --grid-template-rows: 1fr 0.6fr;
}
* {
    font-family: var(--font-family);
    font-weight: bold;
}
html{
    overflow: hidden;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--body-background-color);
    padding: clamp(20px,3rem,5vh);
    overflow: hidden;
}

#content{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 85vh;
    background-color: var(--section-background-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: clamp(20px,1rem,5vh);
    box-sizing: content-box;
    overflow: hidden;
    font-weight: bold;
}
section{
    background-color: var(--section-background-color);
}
#cli-section{
    border-right: 1px solid var(--border-color);
    padding-right: clamp(20px,1rem,5vh);
    overflow: auto;
    overflow-x: hidden;
}
#display-section{
    padding-left: clamp(20px,1rem,5vh);
    display: grid;
    grid-template-rows: var(--grid-template-rows);
    height: inherit;
}
#upper-section{
    background-color: transparent;
    overflow: auto
}
#lower-section{
    background-color: transparent;
    display: flex;
}
input{
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: var(--font-size);
    font-family: var(--font-family);
    margin: 0px;
    padding: 0px;
    outline: none;
    width: 100%;
    z-index: 2;
}
button{
    white-space: normal !important;
}
.cli-text{
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-size: var(--font-size);
    font-family: var(--font-family);
}
p.hero-subtext{
    word-wrap: break-word;
    white-space: initial !important;
}
.user-type{
    color: var(--user-type-color);
    margin-left: 2rem;
}
.symbols{
    color: var(--symbols-color);
}
.user-name{
    color: var(--user-name-color);
}
.cli-mar-left-2rem{
    margin-left: 2rem;
}
.align-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.display-margins{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.git-container{
    display: flex;
}
a{
    text-decoration: none;
    color: var(--link-color) !important; 
}
.link-style{
    color: var(--link-color) !important; 
}
.themes-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.print-themes-section{
    display: flex;
    flex-direction: column;
    align-items: start;
}

/* cmatrix command canvas */
#cmatrix{
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -2;
}
#cli-section:nth-child(2){
    background-color: red important!;
}
input#input-new-tree,
input#input-new-value,
input#remove-value,
input#input-balanced {
    margin-left: 1rem;
}

/* Responsive design settings */
@media screen and (max-width: 1350px) {
    #content{
        display: grid;
        grid-template-columns: 1fr;
        min-height: 85vh;
        overflow: auto;
    }
    #cli-section{
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 2rem;
        padding-right: clamp(20px,1rem,5vh);
        overflow: auto;
        min-height: inherit;
    }
    #display-section{
        overflow: auto;
        height: inherit;
        min-height: inherit;
    }
  }

@media screen and (max-width: 1000px) {
    body{
        padding: clamp(10px,1.5rem,5vh);
    }
    #content{
        display: grid;
        grid-template-columns: 1fr;
        min-height: 85vh;
        overflow: auto;
    }
    #cli-section{
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 2rem;
        padding-right: clamp(20px,1rem,5vh);
        word-wrap: break-word;
        overflow: hidden;
        min-height: inherit;
        white-space: initial;
    }
    #display-section{
        overflow: auto;
        height: inherit;
        min-height: inherit;
    }
    .hero-text{
        font-size: clamp(3px, 6px, 8px) !important;
    }
    div#bst-main-control-div{
        padding: 1rem;
    }
    div.bst-control-div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    div.bst-control-div:first-child{
        background-color: red !important;
    }
    .control-label{
        /* color: red !important; */
        grid-column: span 0.5;
    }
    button#btn-new-tree,
    button#btn-new-value,
    button#btn-remove-value,
    button#btn-balanced {
        /* margin-left: 0px !important; */
        grid-row: span 2;
    }
    input#input-new-tree,
    input#input-new-value,
    input#remove-value,
    input#input-balanced {
        grid-column: span 0.5;
    }
}

@media screen and (max-width: 680px) {
    body{
        padding: clamp(10px,1rem,5vh);
    }
    #content{
        display: grid;
        grid-template-columns: 1fr;
        min-height: 85vh;
        overflow: auto;
    }
    #cli-section{
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 2rem;
        padding-right: clamp(20px,1rem,5vh);
        word-wrap: break-word;
        white-space: initial !important;
        min-height: inherit;
        white-space: initial;
    }
    p.hero-subtext{
        word-wrap: break-word;
        white-space: initial !important;
    }
    #display-section{
        overflow: auto;
        height: inherit;
        min-height: inherit;
    }
    .hero-text{
        font-size: clamp(3px, 4px, 5px) !important;
    }
    div#bst-main-control-div{
        padding: 1rem;
    }
    div.bst-control-div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    div.bst-control-div:first-child{
        background-color: red !important;
    }
    .control-label{
        /* color: red !important; */
        grid-column: span 2;
    }
    button#btn-new-tree,
    button#btn-new-value,
    button#btn-remove-value,
    button#btn-balanced {
        /* margin-left: 0px !important; */
        grid-column: span 0.5;
    }
    input#input-new-tree,
    input#input-new-value,
    input#remove-value,
    input#input-balanced {
        grid-column: span 0.5;
    }

    div#traversals-div{
        grid-template-columns: 1fr 1fr !important;
    }
}
/* \Responsive design settings */