body
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-size: 17px;
}
* { box-sizing: border-box; }
/* :root {
    color-scheme: light dark;
} */

body.hljs { margin:0; padding:0; }

section {
    padding: 5px 30px;
    padding-bottom:50px;
}

.hljs {
    font-family: 'Operator Mono', SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
    /* font-weight: 300; */
}

footer,
header {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(128,128,128,0.5);
    opacity: 0.8;
    background:rgba(0,0,0,0.5);
    font-size:1rem;
}
footer {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
    /* background:blue; */
    position:fixed;
    bottom:0;
    opacity: 1;
    width:100%;
    padding:20px 35px;
}
footer.hljs { padding:20px 20px; }

body.light header,
body.light footer.real {
    background:rgba(0,0,0,0.15);
}

footer .copyright {
    float:right;
}


header .item {
    display:inline-block;
    padding:3px 15px;
    border-right:1px solid rgba(128,128,128,0.5);
}

footer a,
header a {
    color:#69c;
}

header .tools {
    float:right;
    padding-top:2px;
}

body.light header .tools a {
    color:#36c;
}

header .tools .item {
    border:none;
}

code.hljs
{
    padding: 0.5em;
    line-height: normal;
}

/* editor */

form textarea.hljs {
    width: 100%;
    border:0;
    font-family: SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
    font-size:1rem;
    padding:20px 32px;
    outline-width: 0;
    outline:none;
    flex-grow:1
    /* background:rgb(0,128,0,0.5); */
}
form textarea.hljs::placeholder {
    opacity: 0.35;
}

.editor section { padding: 0; }

body.editor footer.hljs { display: none; }
body.editor  {
    display:flex;
    flex-direction: column;
    height:100vh;
}
body.editor section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#toolbar {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background:rgba(255,255,255,0.1);
    background:rgba(0,0,0,0.2);
    padding:12px 30px 13px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(128,128,128,0.4)
}
#toolbar .langPicker { padding-right:1em; }
#toolbar div:last-child { flex-grow: 1; text-align:right; }

body.editor footer {
    position: relative;
}

body.editor form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* header,
footer {
    background:steelblue;
}

footer a {
    color:#def;
} */

body.simple
{
    width:500px;
    margin:0 auto;
    padding:50px;
}

em,
sup { padding-left: 2px; opacity:0.8; }

section.code {
    display: flex;
}

section.code pre.lineNumbers {
    margin-right:1em;
    text-align: right;
    opacity: 0.35;
}
section.code pre.lineNumbers code { padding-left:0; }
section.code pre {

}