:root{--light-color:#3c3a47;--color:#25232c;--dark-color:#121116;--editor-font-size:20px}.app,body,html{margin:0;padding:0;width:100vw;height:100vh}.app{flex-direction:column}.app,header{display:flex}header{background:#121116;background:var(--dark-color);align-items:center;padding:20px 0}.button{background:#3c3a47;background:var(--light-color);color:#fff;padding:12px 18px;font-size:22px;border:none;outline:none;border-radius:5px;transition:background .1s}.button:hover{background:#5a576d}.header-button{margin:0 15px}.header-spacer{flex:1 1}.file-dropdown{background:#121116;background:var(--dark-color);display:flex;flex-direction:column;align-items:center;position:absolute;top:120px;left:10px;padding:15px 20px;opacity:0;z-index:100;border-radius:10px;pointer-events:none;transition:opacity .15 ease-out}.file-dropdown-button p{margin:0}.file-dropdown-item{margin:10px 0;width:100%}.file-dropdown-button:focus-within .file-dropdown{opacity:1;pointer-events:auto}input{background:#3c3a47;background:var(--light-color);color:#fff;width:250px;height:50px;margin-left:15px;padding:0 10px;font-size:25px;border:none;outline:none;border-radius:10px}.tabs{background:#121116;background:var(--dark-color);height:65px}.tab,.tabs{display:flex}.tab{background:transparent;color:#fff;justify-content:center;align-items:center;padding:0 25px;height:100%;border:none;outline:none;cursor:pointer;border-radius:10px 10px 0 0;transition:background .1s}.tab:hover{background:#3c3a47;background:var(--light-color)}.tab-name{margin:0;font-size:22px;font-family:sans-serif;text-align:center}.close-tab-button{background:none;color:grey;width:40px;height:40px;margin:0 0 0 10px;padding:0;font-size:25px;font-family:sans-serif;border:none;outline:none;cursor:pointer;transition:color .1s}.close-tab-button:hover{color:#fff}.main-section{display:flex;flex-direction:column;height:100%}.horizontal-main-section{display:flex;flex:1 1}.editor-container{width:100%}.editor,.editor-container{display:flex;flex-direction:column}.editor{flex-grow:1}.CodeMirror{font-size:20px;font-size:var(--editor-font-size);flex-grow:1;text-indent:10px}.console{background:#434152;color:#fff;width:750px;padding:10px 15px 0;font-size:30px;font-family:sans-serif}.console-text{color:grey;margin:5px}.website-preview{flex:1 1;border-top:8px solid #121116;border-top:8px solid var(--dark-color)}iframe{background:#fff}.status-bar{background:#121116;background:var(--dark-color);position:relative;display:flex;align-items:center;height:75px}.current-file{position:absolute;color:grey;left:15px;font-size:25px;text-align:left;font-family:sans-serif}.status-bar-spacer{flex:1 1}.toggle-iframe-button{margin-right:10px;font-size:22px;padding:8px 20px}.black-overlay{background:rgba(0,0,0,.5);position:absolute;width:100vw;height:100vh;z-index:100}.help-modal{background:#555;position:relative;display:flex;flex-direction:column;width:40%;margin:300px auto;border-radius:20px;overflow:hidden}.help-modal-title{background:#252525;width:100%;padding:20px 0;font-size:50px;text-align:center}.close-button,.help-modal-title{color:#fff;margin:0;font-family:sans-serif}.close-button{background:none;position:absolute;width:65px;height:65px;top:5px;right:5px;padding:0;font-size:35px;border:none;outline:none;cursor:pointer;transition:transform .2s ease-in-out}.close-button:hover{transform:rotate(90deg)}.help{color:#fff;margin:40px 20px;font-size:30px;font-family:sans-serif;text-align:center}.settings-menu{background:#555;position:relative;display:flex;flex-direction:column;align-items:center;width:40%;margin:300px auto;border-radius:20px;overflow:hidden}.settings-menu-title{background:#252525;color:#fff;width:100%;margin:0;padding:20px 0;font-size:50px;font-family:sans-serif;text-align:center}.setting-text{color:#fff;margin:20px 0 0;font-size:25px;font-family:sans-serif}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#d3d3d3;width:50%;height:25px;margin:10px 0 20px;padding:0;outline:none;border-radius:100px;opacity:.7;transition:opacity .1s}.slider:hover{opacity:1}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#121116;background:var(--dark-color);width:35px;height:35px;cursor:pointer;border-radius:50%}.slider::-moz-range-thumb{background:#121116;background:var(--dark-color);width:25px;height:25px;cursor:pointer}.select-container{background:red;position:relative;margin:15px 0 25px}.select-container i{display:flex;justify-content:center;align-items:center;position:absolute;color:#fff;top:50%;right:5px;transform:translateY(-50%);width:50px;height:50px;font-size:25px;pointer-events:none}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#121116;background:var(--dark-color);color:#fff;padding:10px 60px 10px 20px;font-size:25px;border:none;outline:none;cursor:pointer}
/*# sourceMappingURL=main.777f2063.chunk.css.map */