body {
    font-family: monospace;
    font-size: 0.9em;
    overflow: hidden;
}

#loader {
    z-index: 1212;
    position: fixed;
    width: 100%;
    height:100%;
    display: flex;
    align-items: center;
    top: 0;
    opacity: 1;
    background-color: #F8F8F8;
    transition: opacity 2s ease-out, z-index 3s step-end;
}
body:not(.preload) #loader {
    opacity: 0;
    z-index: -1;
}

#editor, #graph, #examples {
    position: absolute;
    top: 4em;
}
#editor {
    left: 0;
    width: 40%;
    bottom: 6em;
}
#graph {
    left: 40%;
    right: 0;
    width: 60%;
    overflow: auto;
    bottom: 4em;
}
#editor-bar {
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    bottom: 4em;
    width: 40%;
    height: 1em;
}
body.gallery #editor {
    top: 8em;
}
body.gallery #examples {
    top: 4em;
    width: 40%;
}
body.fiddle #savePNGonLine {
    display: block;
}
body:not(.fiddle) #savePNGonLine {
    display: none;
}

svg {
    margin: 15px;
}