:root {
    --bg: #0c0c0c;
    /* --accent-bg: #170f10; */
    /* --accent-bg: #130a0b; */
    /* --accent-bg: #110909; */
    --accent-bg: #0d0707;
    /* --border: #965400; */
    --border: #614721;
    --header: #b5aea8;
    /* --text: #ffeaec; */
    --text: #d2d2d2;
    --text-light: #888888;
    /* --text: white; */
    --accent: #ffa430;
    --marked: #ffa430;
    --keyword: #ff7d67;
}

@media (prefers-color-scheme: dark) {
    img {
        opacity: 1;
    }
}

.icon {
    vertical-align: sub;
    padding-right: .25rem;
    display: inline-block;
    width: 1em;
    height: 1.3em;
    margin-right: 0.2rem;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

header > nav a,
header > nav a:visited {
  border: 2px solid var(--border);
}

header > nav a:visited:hover {
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
}

.bench-row {
    display: flex;
    margin-top: 3px;
}

.bench-key {
    line-height: 1;
    width: 90px;
    clear: both;
    color: var(--accent);
    font-size: 15px;
    margin-top: 4px;
}

.bench-time {
    background-color: #d37400;
    font-size: 14px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-text-size-adjust: none;
}

.bench-init-time {
    background-color: #444444;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bench-title {
    padding: 0.5rem 1rem 0.5rem 0rem;
    padding-top: 20px;
    border-bottom: 0.15rem solid #222222;
}

.bench-notes {
    padding-top: 10px;
    font-size: 14px;
    color: var(--text-light);
    padding-bottom: 5px;
}

.bench-chart {
    line-height: 1;
    flex: 1;
    display: block;
    text-align: right;
    color: white;
    font-size: 15px;
    margin-top: 4px;
    position: relative;
    /* Prevent mobile browsers from increasing the font size. */
    -webkit-text-size-adjust: none;
}

.bench-end {
    width: 80px;
    font-size: 15px;
    text-align: right;
    color: gray;
}

figcaption {
    margin-bottom: 0px;
}

.clear {
    clear: both;
}

mark {
    color: var(--marked);
    background-color: transparent;
    padding: 0px;
}

nav a.current {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

h3 {
    color: var(--header);
}

h5 {
    color: var(--header);
    padding: 0.5rem 1rem 0.7rem 0.75rem;
    border-bottom: 0.15rem solid #222222;
}

pre {
    padding: 10px;
    font-size: 15px;
    border: 1px solid transparent;
    background-color: #171717;
}

pre code.hljs {
    padding: 0px;
}

.hljs {
    background-color: transparent;
    color: var(--text);
}
.hljs-keyword {
    color: var(--keyword);
    font-weight: normal;
}
.hljs-type {
    color: #919aff;
    font-weight: normal;
}
.hljs-number,
.hljs-string {
    color: rgb(120, 206, 120);
}
.hljs-built_in {
    color: var(--text);
}
.hljs-comment {
    color: var(--text-light);
}

ul li {
    padding-top: 10px;
}

.cm-s-cyber.CodeMirror {
    background-color: transparent;
    border: 0px solid var(--border);
    height: 100%;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 16px;
}

.cm-s-cyber .CodeMirror-cursor {
    border-left: 2px solid var(--accent);
}

pre span {
    color: var(--text);
}

.cm-s-cyber .CodeMirror-line {
}

.cm-s-cyber .CodeMirror-linenumber {
    padding: 2px 10px 0 5px
}

.cm-s-cyber.CodeMirror-focused .CodeMirror-selected {
    background-color: #666;
}
.cm-s-cyber .CodeMirror-selected {
    background-color: #666;
}

.cm-s-cyber .CodeMirror-gutters {
    background-color: var(--bg);
    border-right: 2px solid #222;
}

.cm-s-cyber .CodeMirror-activeline-background {
    background-color: #222;
}

.cm-s-cyber .CodeMirror-activeline-gutter {
    background-color: var(--accent);
}
.cm-s-cyber .CodeMirror-activeline-gutter .CodeMirror-linenumber {
    color: #222;
}
.cm-s-cyber .cm-line,
.cm-s-cyber .cm-variable {
    color: var(--text);
}
.cm-s-cyber .cm-keyword {
    color: var(--keyword);
}
.cm-s-cyber .cm-string,
.cm-s-cyber .cm-number {
    color: rgb(120, 206, 120);
}
.cm-s-cyber .cm-comment {
    color: var(--text-light);
}

.examples {
    font-size: 16px;
    padding-bottom: 10px;
/*    color: var(--text-light);*/
}
.examples a {
/*    color: var(--text-light);*/
/*    text-decoration: none;*/
    margin-right: 5px;
}
.examples a.active {
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}
.examples a:hover {
    color: var(--accent);
    text-decoration: underline;
}

button.button {
    background-color: transparent;
    border: 1px solid var(--text-light);
    border-radius: 5px;
    color: var(--accent);
    height: 30px;
    padding: 0;
    width: 100px;
}
button.button:hover {
    border: 2px solid var(--accent);
    filter: none;
}
button.button:focus {
    filter: none;
}

main.full-width {
    grid-column: 1 / -1;
    padding-left: 20px;
    padding-right: 20px;
}

.editor-left {
    float: left;
    width: 55%;
    position: relative;
}

.editor-right {
    float: left;
    width: 44%;
    border-left: 1px solid #222;
    height: 100%;
    padding-left: 10px;
}

@media (max-width: 720px) {
    .editor-left {
        width: 100%;
    }
    .editor-right {
        width: 100%;
        float: none;
        clear: both;
    }
}

div#output {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 14px;
    white-space: pre;
}

div#output input {
    font-family: monospace;
}

span.error {
    color: rgb(255, 123, 123);
}

span.success {
    color: rgb(120, 206, 120);
}

div.header-bottom a + a {
    margin-left: 10px;
}