@keyframes bg{
    0%,100%{background:#866;}
    50%{background:#945;}
}
body{background:#945;animation:bg 60s infinite linear;}
#cm{position:fixed;width:calc(50% - 10px);top:7px;left:10px;right:calc(50% - 7px);bottom:10px;padding:0;margin:0;box-sizing:border-box;            /* border:solid 1px #aaa; */border-radius:5px;transition:all 0.5s ease;height:calc(100% - 17px)}
#output{position:fixed;top:7px;right:10px;left:calc(50% + 10px);bottom:10px;padding:0;margin:0;background:#fff;border-radius:5px;box-sizing:border-box;transition:all 0.5s ease;}
.CodeMirror{height:100%!important;border-radius:5px;}
@media all and (max-width:750px){
    #output{position:fixed;top:0;left:0;right:0;bottom:300px;border-radius:0!important;}
    #cm{bottom:0;left:0;right:0;top:calc(100% - 300px);border-radius:0!important;width:100%;height:300px;}
    #mtoggle{display:none!important}
}
.min #output{position:fixed;top:0;left:0;right:0;bottom:300px;border-radius:0!important;}
.min #cm{bottom:0;left:0;right:0;top:calc(100% - 300px);border-radius:0px!important;width:100%;height:300px;}
#mtoggle{position:fixed;bottom:5px;right:5px;display:block;z-index:999;background:linear-gradient(#aaa,#888);padding:5px 10px;border-radius:5px;text-decoration:none;color:#111;}
#mtoggle:active{box-shadow:0 0 15px inset}