body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}body,code{font-family:DM Sans,sans-serif}#root,.App,body,html{height:100%}body,html{margin:0;padding:0}:root{--gap:20px;--width:500px;--darkgreen:#2d8b76;--grey:#fdedef;--lightgreen:#65cdb6;--darkgrey:#263238}.App{display:flex;flex-direction:column}.nav h1{margin:0}.cm-editor .cm-content{text-align:left}.cm-editor{border:1px solid #2d8b76;border:1px solid var(--darkgreen);border-radius:20px;font-size:20px;height:360px;margin:0 auto;overflow:hidden;width:100%}.cm-scroller{border-radius:20px;overflow:auto}.nav{align-items:center;background-color:#2d8b76;background-color:var(--darkgreen);color:#fdedef;color:var(--grey);display:flex;height:70px;justify-content:right;margin-top:0;padding-right:20px}.errorBanner{box-sizing:border-box;margin:14px auto 0;max-width:1020px;max-width:calc(var(--width)*2 + var(--gap));padding:0 12px;width:100%}.er-headers{align-items:center;background-color:#4bca81;color:#263238;color:var(--darkgrey);display:flex;gap:20px;gap:var(--gap);justify-content:center;padding-bottom:5px;padding-top:5px}.er-header{margin:0;text-align:center;width:500px;width:var(--width)}.er-header h1{margin:0}.editor-row h2{font-size:20px;font-weight:700}.editor-row{align-items:flex-start;display:flex;flex:1 1;flex-wrap:wrap;gap:20px;gap:var(--gap);justify-content:center;margin-top:40px}.codeEditor,.codeExplanation{text-align:left}.codeExplanation{background:#65cdb6;background:var(--lightgreen);border:2px solid #2d8b76;border:2px solid var(--darkgreen);border-radius:38px;justify-content:start;padding-bottom:20px;width:500px;width:var(--width)}.codeEditor,.codeExplanation{align-items:center;box-shadow:0 8px 24px #0000004d,0 2px 8px #0006;display:flex;flex-direction:column;height:90%}.codeEditor{border:2px solid #2d8b76;border:2px solid var(--darkgreen);border-radius:25px;flex:1 1;justify-content:center;overflow:hidden}.codeEditor>div{width:100%}.cm-editor{height:100%}.Explanation-header{align-self:flex-start;background:#2d8b76;background:var(--darkgreen);border-radius:999px;border-bottom-left-radius:0;border-top-right-radius:0;color:#fdedef;color:var(--grey);margin-left:-2px;margin-top:-1px;max-width:90%;padding:6px 20px;text-align:left;white-space:nowrap;width:-webkit-max-content;width:max-content}.Steps,.lineExplanation{background:#fff;border:1px solid #ccc;border-radius:20px;height:150px;margin-top:20px;text-align:center;width:80%}.Steps{overflow-y:scroll}.stepMessage{animation:fadeInUp .4s forwards;background:#b0ffde;margin:10px;opacity:0;padding:4px 8px;text-align:left;transform:translateY(10px)}.lineNumber{color:#2d8b76;color:var(--darkgreen);font-weight:700;margin-right:4px}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.controls{margin:12px 0 20px}.output-box{background:#f7f7f7;border:1px solid #ccc;height:500px;text-align:left;width:500px;width:var(--width)}.output-wrapper{padding:12px}.output-title{font-weight:600;margin-bottom:8px}.output-text{font-family:monospace;margin:0;white-space:pre-wrap}.output-error{color:#b00020}.highlight{animation:highlight-fade 3s ease-out;background:#10ff00!important}.cm-transformed{background-color:#65cdb6;background-color:var(--lightgreen);border-bottom:2px #10ff00;border-radius:2px;transition:background-color .2s}.com-transformed:hover{background-color:#10ff00}.highlight{background-color:#2d8b76;background-color:var(--darkgreen);box-shadow:0 0 5px #ffc107cc}@keyframes highlight-fade{0%{background:#10ff00!important}to{background:#0000!important}}
/*# sourceMappingURL=main.02015371.css.map*/