.code-container {
    /* resize: both; */
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
    width:94%;
    height: 250px;
    /* min-width: 420px;
    min-height: 255px; */
    position: relative;
    --glow-margin: 10px;
    filter: drop-shadow(0 0 5px rgba(223, 172, 6, 0.25));
}

.code-container::before {
    content: attr(content);
    position: absolute;
    bottom: 90px;
    right: 90px;
    z-index: 999;
    color: rgba(231, 161, 9, 0.5);
    text-shadow: 0 0 12px rgb(223, 147, 8);
    letter-spacing: 0.1em;
}


.glow-container {
    position: absolute;
    inset: 0;
    display: grid;
    z-index: 2;
    pointer-events: none;
    --glow: drop-shadow(0 0 0.5px rgb(228, 152, 10));
    filter: var(--glow) brightness(0.5) drop-shadow(0 0 5px rgb(236, 174, 4));
}

.augs {
    --aug-rect-l1: initial;
    --aug-l1-width: 110px;
    --aug-l1-height: 4px;
    --aug-l-center: 57px;

    --aug-rect-r1: initial;
    --aug-r1-width: (100% - 125px - 50px);
    --aug-r1-height: 4px;
    --aug-r-center: 57px;

    --aug-clip-tr1: initial;
    --aug-tr1-alt-join-out: initial;
    --aug-tr1: 17px;
    --aug-clip-tr2: initial;
    --aug-tr2: 17px;
    --aug-tr-extend1: 50px;

    --aug-round-tl1: initial;
    --aug-tl1: 8px;
    --aug-round-br1: initial;
    --aug-br1: 8px;
    margin: auto;
    width: calc(100% - var(--glow-margin) * 2);
    height: calc(100% - var(--glow-margin) * 2);
}

.glow-container .augs {
    --aug-border: initial;
    --aug-border-all: 2px;
    --aug-border-bg: linear-gradient(to bottom left, rgb(160, 118, 1), orange);
}

section.augs {
    position: absolute;
    inset: 0;
    margin: auto;
    --aug-inlay: initial;
    --aug-inlay-all: 2px;
    --aug-inlay-bg: url(https://cdn-icons-png.flaticon.com/512/6666/6666080.png) center 70% / auto 70% no-repeat;
    --aug-inlay-opacity: 0.25;
}

section.augs::before {
    filter: brightness(0.2) blur(10px);
}

.dots {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 110px;
    height: 50px;
    --red: #ff0202;
    --yellow: #ffcc00;
    --green: #22d0f7;
    --close: radial-gradient(circle, var(--red), var(--red) 7px, transparent 8px);
    --min: radial-gradient(circle, var(--yellow), var(--yellow) 7px, transparent 8px);
    --max: radial-gradient(circle, var(--green), var(--green) 7px, transparent 8px);
    background: var(--close) -28px no-repeat,
        var(--min) -2px no-repeat,
        var(--max) 24px no-repeat;
    filter: brightness(0.5);
    opacity: 0.75;
    cursor: pointer;
    border: none;
}

input {
    position: absolute;
    top: 17px;
    left: 40px;
    width: calc(100% - 150px);
    background: transparent;
    color:gold;
    text-shadow: 0 0 12px rgb(231, 161, 9);
    border: none;
    text-align: center;
    letter-spacing: 0.1em;
}

.code {
    position: absolute;
    inset: 80px 10px 10px 10px;
    font-size: 20px;
    color: white;
    filter: brightness(1.2);
}

.code * {
    font-size: 18px;
    font-weight: normal;
    color: #b5b4b6;
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}




/* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */
.bg {
    background-color: #000000;
    /*background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ea9214' fill-opacity='0.14' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");*/
}

.bg::after {
    content: '';
    height: 50%;
    width: 100%;
    display: block;
    background-image: linear-gradient(90deg, rgba(233, 172, 5, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(214, 132, 8, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
    background-position: bottom;
    background-repeat: repeat;
    background-size: 20px 20px;
    left: -25px;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    transform: perspective(100px) rotateX(60deg);
    z-index: 0;
}

.CodeMirror-gutters {
    background: transparent;
    border: none;
    margin-right: 15px;
}

.CodeMirror {
    height: 100%;
    background: transparent;
}

.CodeMirror-linenumber {
    padding-right: 1em;
}

.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
    background: rgba(228, 176, 6, 0.5);
}

.CodeMirror-scrollbar-filler {
    display: none !important;
}

/* codepen's highcontrast-dark theme */
.cm-header {
    font-weight: 700
}

.cm-strong {
    font-weight: 700
}

.cm-em {
    font-style: italic
}

:root {
    --editor-top-bar-background: black;
    --tab-bg: #131417;
    --tab-border-color: #e2c20d;
    --resizer-background: var(--editor-top-bar-background);
    --resizer-border: #242424
}

.sidebar-false .main-header,
.sidebar-false .main-header .header-wrap,
.editor-footer {
    background: var(--editor-top-bar-background)
}

.CodeMirror-cursor {
    border-left-color: #fff !important
}

.CodeMirror-selected {
    background: rgba(228, 157, 5, 0.05)
}

.CodeMirror-focused .CodeMirror-selected {
    background: rgba(216, 143, 6, 0.1)
}

.CodeMirror-matchingbracket {
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}

.CodeMirror-matchingtag {
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.cm-searching {
    background: #000;
    outline: 2px solid rgba(255, 255, 255, .25)
}

.CodeMirror-hints,
.emmet-abbreviation-preview {
    border: 1px solid #5a5f73;
    background: #1e1f26
}

.CodeMirror-hint {
    color: #fff
}

li.CodeMirror-hint-active {
    background: #c7c9d3;
    color: #000
}

.project-editor-warning {
    background: rgba(255, 255, 255, .1)
}

.editor-footer {
    border-top-color: var(--resizer-border, var(--cp-color-6))
}

.cm-keyword {
    color: #ffdd40
}

.cm-atom {
    color: #a3d65a
}

.box-html .cm-atom {
    color: #ff3c41
}

.cm-def {
    color: #0ebeff
}

.cm-variable {
    color: #c7c9d3
}

.cm-variable-2 {
    color: #47cf73
}

.cm-variable-3 {
    color: #fff
}

.cm-header {
    color: #ff3c41
}

.cm-number {
    color: #2bc7b9
}

.cm-property {
    color: #5e91f2
}

.cm-attribute {
    color: #e3e4e8
}

.cm-builtin {
    color: #ae63e4
}

.cm-qualifier {
    color: #ffdd40
}

.cm-operator {
    color: #47cf73
}

.cm-meta {
    color: #0ebeff
}

.cm-string {
    color: #2bc7b9
}

.cm-string-2 {
    color: #d75093
}

.cm-tag {
    color: #ffdd40
}

.box-css .cm-tag {
    color: #ff8d41
}

.cm-tag.cm-bracket {
    color: #9b9dad
}

.cm-comment {
    color: #88afbf
}

body.editor {
    background: #131417
}

.box.box.box,
.editor .top-boxes,
.CodeMirror-gutter-wrapper,
body.project .editor-pane,
body.project .editor {
    background: #131417
}

.box.box.box pre,
.editor .top-boxes pre,
.CodeMirror-gutter-wrapper pre,
body.project .editor-pane pre,
body.project .editor pre {
    color: #d5d7de
}

.CodeMirror-guttermarker-subtle,
.CodeMirror-linenumber {
    color: rgba(240, 224, 11, 0.6)
}

#output pre::-webkit-scrollbar,
#output iframe::-webkit-scrollbar {
    width: .5em;
    height: .5em
}

#output pre::-webkit-scrollbar-thumb,
#output iframe::-webkit-scrollbar-thumb {
    background: #494637
}

#output pre::-webkit-scrollbar-track,
#output iframe::-webkit-scrollbar-track {
    background: 0 0
}

.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
    background: #494437
}

.powers .mini-button {
    background: #575744
}

.powers .mini-button:hover,
.powers .mini-button:focus {
    background: #c7c9d3
}

.powers .mini-button:hover svg,
.powers .mini-button:focus svg {
    fill: #000
}

/* theme overrides original source */
/* https://marketplace.visualstudio.com/items?itemName=webrender.synthwave-x-fluoromachine */
/* I just ported it to codemirror */

.highcontrast-dark .cm-header {
    font-weight: bold
}

.highcontrast-dark .cm-strong {
    font-weight: bold
}

.highcontrast-dark .cm-em {
    font-style: italic
}

.highcontrast-dark .CodeMirror-cursor {
    border-left-color: white !important
}

.highcontrast-dark .CodeMirror-selected {
    background: rgba(255, 255, 255, 0.05)
}

.highcontrast-dark .CodeMirror-focused .CodeMirror-selected {
    background: rgba(255, 255, 255, 0.1)
}

.highcontrast-dark .CodeMirror-matchingbracket {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5)
}

.highcontrast-dark .CodeMirror-matchingtag {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
}

.highcontrast-dark .powers {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05)
}

.highcontrast-dark .cm-searching {
    background: black;
    outline: 2px solid rgba(255, 255, 255, 0.25)
}

.highcontrast-dark .CodeMirror-hints,
.highcontrast-dark .emmet-abbreviation-preview {
    border: 1px solid #73695a;
    background: #26251e
}

.highcontrast-dark .CodeMirror-hint {
    color: white
}

.highcontrast-dark li.CodeMirror-hint-active {
    background: #c7c9d3;
    color: black
}

.highcontrast-dark .project-editor-warning {
    background: rgba(255, 255, 255, 0.1)
}

.highcontrast-dark .cm-atom {
    color: #ec9e0d;
}

.highcontrast-dark .box-html .cm-atom {
    color: #ff3c41
}

.highcontrast-dark .cm-def,
.highcontrast-dark .cm-variable-2,
.highcontrast-dark .cm-variable,
.highcontrast-dark .box-js .cm-variable+.cm-property {
    color: #61e2ff;
    text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}

.highcontrast-dark .cm-header {
    color: #ff3c41
}

.highcontrast-dark .cm-builtin {
    color: #e4c663
}

.highcontrast-dark .cm-number {
    color: #ffd563;
}


.highcontrast-dark .cm-operator,
.highcontrast-dark .cm-variable-3,
.highcontrast-dark .cm-attribute,
.highcontrast-dark .cm-property,
.highcontrast-dark .cm-keyword,
.highcontrast-dark .presentation>.cm-def,
.highcontrast-dark .cm-qualifier {
    color: #fc199a;
    text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #fc199a, 0 0 2px #fc199a;
}

.highcontrast-dark .cm-operator,
.highcontrast-dark .cm-variable-3,
.highcontrast-dark .cm-attribute,
.highcontrast-dark .cm-property {
    font-style: italic;
}

.highcontrast-dark .cm-meta,
.highcontrast-dark .cm-meta+.cm-property,
.highcontrast-dark .cm-string,
.highcontrast-dark .cm-string-2 {
    color: #ffc163;
    text-shadow: none;
}

.highcontrast-dark .cm-tag,
.highcontrast-dark .cm-callee,
.highcontrast-dark .box-css .cm-tag,
.highcontrast-dark .cm-tag.cm-bracket,
.highcontrast-dark .box-js .cm-property {
    color: #ffcc00;
    text-shadow: 0 0 2px #100c0f, 0 0 3px #ffaa0099, 0 0 5px #ffaa0099, 0 0 10px #ffaa0099;
    font-style: italic;
}

.highcontrast-dark .cm-comment {
    font-style: italic;
    color: #e7ac0999;
    text-shadow: 0 0 2px #001716, 0 0 5px #03edf933, 0 0 10px #ffff6633;
}

body.editor.highcontrast-dark {
    background: #2f281b;
}

.highcontrast-dark .box.box.box,
.editor.highcontrast-dark .top-boxes,
.highcontrast-dark .CodeMirror-gutter-wrapper,
body.project.highcontrast-dark .editor-pane,
body.project.highcontrast-dark .editor {
    background: none;
}

.editor.highcontrast-dark .top-boxes {
    --swxfm__c: rgb(231, 143, 12);
    background: repeating-linear-gradient(to top,
            rgba(255, 255, 255, 0.03) 0px 2px,
            transparent 2px 4px),
        linear-gradient(to bottom, #332809 75%, #43310b);
}

.editor.highcontrast-dark .top-boxes:after {
    content: '';
    height: 300px;
    width: 100%;
    display: block;
    background-image: linear-gradient(90deg, rgba(252, 161, 25, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(252, 154, 25, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
    background-position: bottom;
    background-repeat: repeat;
    background-size: 20px 20px;
    left: -25px;
    position: absolute;
    pointer-events: none;
    bottom: 0;
    transform: perspective(100px) rotateX(60deg);
    z-index: 0;
}

.highcontrast-dark .box.box.box pre,
.editor.highcontrast-dark .top-boxes pre,
.highcontrast-dark .CodeMirror-gutter-wrapper pre,
body.project.highcontrast-dark .editor-pane pre,
body.project.highcontrast-dark .editor pre {
    color: #b5b4b6;
}

.highcontrast-dark .CodeMirror-guttermarker-subtle,
.highcontrast-dark .CodeMirror-linenumber {
    color: #8a2dc066;
    text-shadow: 0 0 2px #393a33, 0 0 35px #ffffff44, 0 0 10px #8a2dc066, 0 0 2px #8a2dc066;
}