bf.css

/*
blue (50%): rgb(0,102,255)
blue (75%): rgb(128,179,255)
blue (90%): rgb(204,224,255)
blue (95%): rgb(230,240,255)

red (30%): rgb(153,0,0)

grey (25%): rgb(64,64,64)

yellow (90%): rgb(255,255,204)

green (75%): rgb(128,255,128)
green (50%): rgb(0,255,0);
*/

html, body{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:0;
    margin:0;
    font-family:"Signika",sans-serif;
    font-size:16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body>.wrapper{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    position:relative;
}

body>.wrapper>*{
    display:block;
    overflow:hidden;
    position:relative;
    z-index:0;
}

#header{
    flex:0 0 50px;
    height:50px;
    background-color:rgb(128,179,255);
    font-size:22px;
    line-height:50px;
    cursor:default;
}

#header>.wrapper{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
}

#header>.wrapper>*{
    display:block;
    overflow:hidden;
    height:50px;
}

#header .title{
    flex:0 0 auto;
    padding:0px 20px;
    display:block;
    color:inherit;
    text-decoration:inherit;
}

#header .title .jelly{
    font-family:"Chewy","Signika",sans-serif;
    font-size:32px;
    color:rgb(153,0,0);
    position:relative;
}

#header .title::before{
    position:absolute;
    display:block;
    content:"Jelly";
    padding:0px 20px;
    left:0;
    top:0;
    font-family:"Chewy","Signika",sans-serif;
    font-size:32px;
    color:white;
    filter:blur(4px);
}

#header .headerbutton{
    flex:0 0 70px;
    text-align:center;
    width:70px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    cursor:pointer;
    background-color:rgba(255,255,255,0);
    transition:background-color 0.5s;
    color:inherit;
    text-decoration:inherit;
}

#header .headerbutton:hover{
    background-color:rgba(255,255,255,0.3);
}

#header .headerbutton:active{
    background-color:rgba(255,255,255,0.6);
    transition:background-color 0s;
}

#header .headerbutton::before{
    display:block;
    content:"";
    flex:1 1 auto;
}

#header .headerbutton::after{
    display:block;
    content:"";
    flex:1 1 auto;
}

#header .headerbutton>*{
    display:block;
}

#header .headerbutton .material-icons, #header .headerbutton .jelly-icon{
    flex:0 0 26px;
    line-height:26px;
    font-size:26px;
}

#header .headerbutton .button-name{
    flex:0 0 12px;
    line-height:12px;
    font-size:12px;
}

#header .headerbutton input[type="file"]{
    flex:0 0 0px;
    width:0px;
    height:0px;
    visibility:hidden;
}

#header>.wrapper>.vertical-bar{
    flex:0 0 30px;
    width:30px;
    overflow:visible;
}

#header>.wrapper>.vertical-bar::before{
    display:block;
    content:"";
    margin:0 auto;
    width:2px;
    height:100%;
    background-color:white;
    filter:blur(2px);
}

#header>.wrapper>.extraspace{
    flex:1 1 auto;
}

#header>.wrapper>.spaceend{
    flex:0 0 auto;
    width:10px;
}

#codeblock{
    flex:3 3 0px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
}

#codeblock .editor-wrapper{
    flex:1 1 0px;
}

#codeblock .editor{
    height:100%;
    width:100%;
}

#codeblock .editor .execution-line{
    background:rgba(255,255,0,0.5);
    color:rgba(255,255,0,0.5);
    position:absolute;
}

#codeblock .editor .breakpoint{
    background:red;
    color:red;
    position:absolute;
}

#codeblock .editor .execution-position{
    background:orange;
    color:orange;
    position:absolute;
}

#codeblock #memoryview{
    flex:0 0 50px;
}

#memoryview{
    background-color:rgb(255,255,204);
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    text-align:center;
}

#memoryview .left-goto{
    flex:0 0 60px;
}

#memoryview .right-goto{
    flex:0 0 60px;
}

#memoryview .left-arrow{
    flex:0 0 30px;
}

#memoryview .right-arrow{
    flex:0 0 30px;
}

#memoryview .memory-cells{
    flex:1 1 0px;
}

#memoryview .goto{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
}

#memoryview .goto .goto-label{
    flex:0 0 12px;
    font-size:12px;
    line-height:12px;
    cursor:default;
}

#memoryview .goto .goto-input-wrapper{
    flex:0 0 20px;
    font-size:14px;
    line-height:14px;
    box-sizing:border-box;
    padding:0 2px;
}

#memoryview .goto .goto-input-wrapper input{
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    text-align:inherit;
    height:20px;
    width:100%;
    box-sizing:border-box;
}

#memoryview .arrow{
    line-height:26px;
    font-size:26px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    cursor:pointer;
    background-color:rgba(255,165,0,0);
    transition:background-color 0.5s;
}

#memoryview .arrow .wrapper{
    height:26px;
    flex:0 0 auto;
}

#memoryview .arrow:hover{
    background-color:rgba(255,165,0,0.5);
}

#memoryview .arrow:active{
    background-color:rgba(255,165,0,1);
    transition:background-color 0s;
}

#memoryview .memory-cells{
    padding:3px;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
    overflow:hidden;
}

#memoryview .memory-cells .cellwrapper{
    height:30px;
    box-sizing:border-box;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    line-height:28px;
}

#memoryview .memory-cells .cellwrapper .cell{
    flex:1 1 2px;
    border:1px solid black;
    overflow:hidden;
}

#memoryview .memory-cells .cellwrapper .cell:not(:first-child){
    margin-left:-1px;
}

#memoryview .memory-cells .cellwrapper .cell.memory-ptr{
    border-color:red;
    border-width:2px;
    line-height:26px;
    flex:1 1 0px;
}

#memoryview .memory-cells .cellwrapper .cell.memory-ptr + .cell{
    border-left-color:red;
}

#memoryview .memory-cells .cellwrapper .cell input{
    width:100%;
    height:100%;
    font-family:inherit;
    font-size:inherit;
    text-align:center;
    box-sizing:border-box;
    outline:none;
    border:none;
    background-color:rgb(128,255,128);
}

#memoryview .memory-cells .cellwrapper .cell input::selection{
    background-color:rgb(0,128,0);
    color:white;
}

#memoryview .memory-cells .labelwrapper{
    height:14px;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    font-size:12px;
    line-height:12px;
}

#memoryview .memory-cells .labelwrapper .label{
    flex:1 1 0px;
    border:1px solid transparent;
    overflow:hidden;
}

#memoryview .memory-cells .labelwrapper .label:not(:first-child){
    margin-left:-1px;
}

#memoryview .memory-cells .labelwrapper .label.memory-ptr{
    font-weight:bold;
    color:red;
}



#compilationinfo{
    flex:0 0 20px;
    background-color:rgb(230,240,255);
    line-height:20px;
    font-size:14px;
}

#compilationinfo .compilationinfospan{
    padding:0 12px;
}

#compilationinfo #compilationspan{
    color:blue;
}

#compilationinfo #executionspan{
    color:green;
}

#options{
    flex:0 0 48px;
    background-color:rgb(204,224,255);
    font-size:14px;
}

#options>.wrapper{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
}

#options>.wrapper>*{
    display:block;
    overflow:hidden;
    height:48px;
    box-sizing:border-box;
    flex:0 0 auto;
}

#options>.wrapper>.executionoptions, #options>.wrapper>.compilationoptions{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
}



#options>.wrapper>.vertical-bar{
    flex:0 0 18px;
    width:18px;
    overflow:visible;
}

#options>.wrapper>.vertical-bar::before{
    display:block;
    content:"";
    margin:0 auto;
    width:2px;
    height:100%;
    background-color:white;
    filter:blur(2px);
}

#options .optiongroup{
    flex:0 0 auto;
    padding:4px 12px;
    border:none;
    outline:none;
    margin:0;
}

#options .optiongroup .radiooption{
    height:20px;
}

#options .optiongroup .radiooption input[type="radio"]{
    position:absolute;
    visibility:hidden;
}

#options .optiongroup .radiooption label{
    line-height:20px;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    cursor:pointer;
}

#options .optiongroup .radiooption label>span{
    display:block;
    flex:0 0 auto;
}

#options .optiongroup .radiooption label>span.fakeradiobutton{
    width:16px;
    height:16px;
    box-sizing:border-box;
    border:2px solid rgb(64,64,64);
    border-radius:100%;
    transition:border-color 0.5s;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
}

#options .optiongroup .radiooption label>span.fakeradiobutton::before{
    content:"";
    display:block;
    background-color:blue;
    border-radius:100%;
    flex:0 0 auto;
    width:0;
    height:0;
    transition:width 0.5s,height 0.5s;
}

#options .optiongroup .radiooption label>span.radiotext{
    padding-left:4px;
    color:rgb(64,64,64);
    transition:color 0.5s;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.radiotext{
    color:blue;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.fakeradiobutton{
    border-color:blue;
}

#options .optiongroup .radiooption input[type="radio"]:checked ~ label>span.fakeradiobutton::before{
    width:8px;
    height:8px;
}

#options>.wrapper>.extraspace{
    flex:1 1 auto;
}

#ioblock{
    flex:1 1 0px;
}

#ioblock .separate{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
    position:relative;
}

#ioblock .separate:not(.selected){
    display:none;
}

#ioblock .separate>*{
    display:block;
    overflow:hidden;
    position:relative;
    z-index:0;
}

#ioblock .separate .ioseparateindividualblock{
    flex:1 1 0px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
}

#ioblock .separate .ioseparateindividualblock>*{
    display:block;
    overflow:hidden;
}

#ioblock .separate .ioseparateindividualblock>.iotitle{
    flex:0 0 20px;
    height:20px;
    line-height:20px;
    padding:0 6px;
    background-color:rgb(230,240,255);
    font-size:14px;
    color:rgb(64,64,64);
}

#ioblock .separate .ioseparateindividualblock>.iocontent{
    flex:1 1 0px;
}

#ioblock .separate .vertical-spacer{
    flex:0 0 4px;
    width:4px;
    background-color:rgb(204,224,255);
    position:relative;
    overflow:visible;
    z-index:1;
}

#ioblock .separate .vertical-spacer .actual-spacer{
    position:absolute;
    top:0;
    bottom:0;
    left:-3px;
    right:-3px;
    cursor:col-resize;
}

#ioblock .separate .ioseparateindividualblock .editor{
    height:100%;
    width:100%;
}

#ioblock .combined{
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:stretch;
}

#ioblock .combined:not(.selected){
    display:none;
}

#ioblock .combined>.iotitle{
    flex:0 0 20px;
    height:20px;
    line-height:20px;
    padding:0 6px;
    background-color:rgb(230,240,255);
    font-size:14px;
    color:rgb(64,64,64);
}

#ioblock .combined>.iocontent{
    flex:1 1 0px;
    overflow:hidden;
}

#ioblock .combined>.iocontent .terminal{
    height:100%;
    width:100%;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
    font:16px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    padding:0 4px;
    box-sizing:border-box;
}

body>.wrapper>.horizontal-spacer{
    flex:0 0 0px;
    height:0px;
    position:relative;
    overflow:visible;
    z-index:1;
}

body>.wrapper>.horizontal-spacer .actual-spacer{
    position:absolute;
    top:-5px;
    bottom:-5px;
    left:0;
    right:0;
    cursor:row-resize;
}



#about{
    background-color:rgb(204,224,255);
    flex:1 1 0px;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
    overflow:auto;
}

#about p{
    padding-left:20px;
    padding-right:20px;
}

#about h1{
    font-size:24px;
    padding:0 20px;
}

#about h2{
    font-size:20px;
    padding:0 20px;
}


.displaynone, #header .displaynone, #memoryview.displaynone{
    display:none;
}