*{
    font-family:unset;
    font-size:unset;
}

html,body{
    margin:0px;
    padding:0px;
}

.codecontainer{
    position: relative;
    overflow: scroll;
    font-size: 12px;
}

.CodeMirror{
    width:100%;
    height: 100%;  
    font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

.render{
    width:100%;
    height:100%;
    border:none;
    background-color:white;
}

/* Main display*/
.master{
    display:grid;
    grid-template-rows: 64px minmax(0,1fr) 64px;
    height:100vh;
    overflow:hidden;
}

.maindisplay{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:3px;
    background-color: #DDD
}

/* Toolbar */
.barheader{
    display: grid;
    grid-template-columns: repeat(auto-fill, 60px);
    align-items: center;
    gap:5px;
    height:100%;
}

.barheader button:not(.btn){
    all:unset;
    font-size: 1.5em;
}

.barheader button:active:not(.btn){
    color:tomato;
}

@media (prefers-color-scheme: dark) {
    .maindisplay{
        background-color:#666
    }
    /*.CodeMirror, .CodeMirror-gutter{
        background-color: #464a4c;
    }*/
}