*{margin:0;padding:0;box-sizing:border-box}:root{--mainColor: #1f1f1f;--secondColor: #00b2ff;--headerHeight: 80px}#app{width:100vw;height:100vh;font-family:"Roboto",sans-serif;background:gray;color:#fff}input{font-family:"Roboto",sans-serif}a{display:block;text-decoration:none}button{cursor:pointer}.center-page{padding:0 2rem}.icon{position:relative;background:none;outline:none;border:none;width:40px;height:40px;color:#fff;-webkit-tap-highlight-color:transparent}.icon svg{display:block;width:100%;height:100%;pointer-events:none}.icon-text{position:absolute;text-transform:capitalize;white-space:nowrap;background:var(--mainColor);border:1px solid #fff;border-radius:5px;padding:3px;font-size:1rem;display:none}.icon:hover{background:#383838;border-radius:10px}.icon:hover .icon-text{display:block}.panel{background:var(--mainColor);width:var(--headerHeight);padding:1rem 0;position:absolute;z-index:200;display:flex;flex-direction:column;align-items:center}.panel>*:not(:last-child){margin-bottom:1rem}@media all and (max-width: 768px){.panel{position:static;width:auto;height:var(--headerHeight);padding:5px 1rem;flex-direction:row}.panel:not(:last-child){border-bottom:1px solid #000}.panel>*:not(:last-child){margin-bottom:0}.panel>*{margin:0 auto}}.app-header{display:flex;width:100%;height:var(--headerHeight);align-items:center;background:var(--mainColor);position:fixed;top:0;left:0;color:#fff;z-index:999}.navbar-left{display:flex}.navbar-left .logo{display:block;width:150px;margin-right:1rem}.navbar-left .logo img{width:100%;display:block}.navbar-left #navbar-btn{display:none}.navbar-left #navbar-btn svg{border:2px solid #fff;border-radius:10px;font-size:2.5rem !important}.navbar-right{display:flex;justify-content:flex-end;align-items:center;width:100%}.navbar-right #filename-input{position:absolute;left:50%;transform:translateX(-50%);width:250px;height:2rem;border:none;outline:none;border-radius:5px;text-align:center;font-weight:normal;font-size:1rem}.navbar-right #settings-btn svg{font-size:37px}.navbar-item .icon-text{top:105%;left:50%;transform:translateX(-50%)}.navbar-item:not(:last-child){margin-right:1rem}@media all and (max-width: 768px){.navbar-left{width:100%}.navbar-left #navbar-btn{display:block;margin-left:auto}.navbar-right{position:absolute;top:100%;left:-100%;width:100%;background:var(--mainColor);height:100vh;flex-direction:column;justify-content:center;align-items:center;transition:transform .3s ease-in-out}.navbar-right.show{transform:translateX(100%)}.navbar-right #filename-input{position:static;transform:none;margin-bottom:1rem}.navbar-item{width:auto;display:flex;align-items:center;justify-content:space-between}.navbar-item .icon-text{margin-left:10px;display:block;position:static;border:none;background:none;transform:none}.navbar-item:not(:last-child){margin-right:0;margin-bottom:1rem}}.app-body{height:100%;width:100%;padding-top:var(--headerHeight)}#canvas-container{position:relative;width:100%;height:100%;overflow:hidden}#canvas-container #canvas-layers-container{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}#canvas-container #canvas-layers-container canvas{position:absolute;top:0;left:0;display:block;width:100%}#canvas-background{z-index:10}#canvas-drawing{z-index:20}#canvas-preview{z-index:30}.rendering-pixeled{image-rendering:-moz-crisp-edges;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;image-rendering:pixelated}@media all and (max-width: 768px){.app-body{display:flex;flex-direction:column}}@media all and (max-width: 500px){#canvas-container canvas{width:100vw}}.tools{border-radius:0px 10px 10px 0px;left:0;top:50%;transform:translateY(-50%)}.tool[data-name=circle] svg{width:90%;height:90%;margin:auto}.tool[data-name="color picker"] input{font-size:50px;width:100%;height:100%;outline:none;border:none}.tool[data-name=line] svg{transform:rotate(-45deg) !important}.tool.selected{background:#008cff;border-radius:10px}.tool .icon-text{left:110%;top:50%;transform:translateY(-50%)}@media all and (max-width: 768px){.tools{border-radius:0;transform:none}.tool .icon-text{top:auto;bottom:100%;left:50%;transform:translate(-50%, -50%)}.tool:first-child .icon-text{left:0;transform:translateY(-50%)}.tool:last-child .icon-text{left:auto;right:0;transform:translateY(-50%)}}#settings-container{position:absolute;top:0;left:0;z-index:9999;width:100vw;height:100vh;display:none}#settings-container.show{display:block}.settings-menu{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:50;background:var(--mainColor);width:90%;max-width:400px;padding:1rem;border:2px solid #fff}.settings-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.settings-menu-label{display:block}.settings-menu-label input{display:block;width:100%;height:2rem;padding:0 8px;margin-top:5px;border:none;outline:none;border-radius:2px}.settings-menu-label+.settings-menu-label{margin-top:1rem}#settings-form:invalid .settings-submit-btn{background:#7c0000}.settings-submit-btn{background:var(--secondColor);border:none;outline:none;font-size:1.2rem;color:#fff;width:100%;margin-top:1rem;padding:.5rem}#settings-close-btn{text-align:center;width:30px;font-size:18px}#settings-helper-layer{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5}.controllers{border-radius:10px 0px 0px 10px;right:0;top:50%;transform:translateY(-50%)}.controller{border:1px solid #fff;border-radius:5px}.controller .icon-text{right:110%;top:50%;transform:translateY(-50%)}@media all and (max-width: 768px){.controllers{border-radius:0;transform:none}.controller .icon-text{top:auto;right:auto;bottom:100%;left:50%;transform:translate(-50%, -50%)}.controller:first-child .icon-text{left:0;transform:translateY(-50%)}.controller:last-child .icon-text{left:auto;right:0;transform:translateY(-50%)}}

/*# sourceMappingURL=main.css.map*/