:root{--padding:20px;--doublePadding:calc(var(--padding) * 2);--canvasShadow:0 0 30px rgb(0 0 0 / 10%)}*{box-sizing:border-box}body,html{margin:0;padding:0}body,html{width:100%;height:100%;margin:0}body{overflow:hidden}.hidden{display:none!important}body.about{overflow:auto;padding:20px;min-height:100vh;display:flex;gap:20px;padding-top:100px;align-items:center;flex-direction:column;font-family:"Cutive Mono",monospace}.about h1{margin-top:20px}.more{font-size:16px}.tip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:monospace;color:#000;font-style:italic;font-size:19px;opacity:.4;max-width:250px;line-height:23px;pointer-events:none}.about-image{width:100%}.ui{position:absolute;display:flex;flex-direction:column;gap:5px;top:8px}.top-left{left:8px}.top-right{right:8px}.icon{width:42px;height:42px;padding:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;background:#fff;border-radius:50%;box-shadow:var(--canvasShadow);cursor:pointer}.icon img{width:100%;height:100%}.icon .smaller{width:75%;height:75%}.primary{box-shadow:var(--canvasShadow);cursor:crosshair;-webkit-user-select:none;width:100%;height:100%;object-fit:contain;max-height:inherit}.primary path{transition:opacity 250ms;opacity:1}.tools{position:absolute;width:300px;top:calc(100% - 0px);height:200px;left:50%;margin-left:-150px}.tool{position:absolute;filter:drop-shadow(0 0 7px rgba(0, 0, 0, .2));border-radius:5px 5px 0 0;width:100%;height:100%;background:#fff;transition:transform .2s ease-out;transform:translateY(0);z-index:2;cursor:pointer}.text .tool-button-icon-inner{font-family:"Cutive Mono",monospace;background:#fff;text-align:center;vertical-align:top;line-height:16px;text-transform:uppercase}.tool.color.open{transform:translateY(0)}.tool.open{transform:translateY(-100%);z-index:1}.tool-button{background:0 0;position:absolute;top:0;left:50%;transform:translateY(-100%) translateX(-50%);width:56px;height:28px;display:flex;justify-content:center;border-radius:100%}.tool-button:after,.tool-button:before{content:"";position:absolute;height:10px;width:20px;bottom:0}.tool-1{margin-left:-25px}.tool-2{margin-left:25px}.tool-button:after{right:-12px;border-radius:0 0 0 19px;box-shadow:-10px 0 0 0 #fff}.tool-button:before{left:-12px;border-radius:0 0 19px 0;box-shadow:12px 0 0 0 #fff}.tool-button-icon{width:40px;height:40px;background:#fff;border-radius:50%;display:flex;justify-content:center}.controls{z-index:3;padding:10px;position:relative;height:100%}.controls input,.controls textarea{width:100%;height:100%}.controls textarea{border:3px solid #eee;padding:10px}input{border:0;outline:0}input:focus{outline:0!important}.tool-button-icon-inner{margin-top:4px;width:22px;height:22px;border:2px solid #eee;background:#fff;border-radius:100%;z-index:2;overflow:hidden}.tool-button-icon-inner input{opacity:0}.paint-app{display:flex;flex-direction:row-reverse}.mon{min-width:220px;padding:20px 0 20px 20px;display:flex;font-family:"Cutive Mono",monospace}.mon-inner{display:flex;flex-direction:column;justify-content:space-between;background:#fff;box-shadow:var(--canvasShadow);box-sizing:border-box;height:calc(100vh - 40px);width:100%;padding:10px 20px;overflow:scroll}.painting{position:relative;width:100%}.sidebar-head{font-size:20px;padding-bottom:10px}.sidebar-head img{width:26px}.sidebar-head a{text-decoration:none;color:#000;display:flex;flex-direction:row;justify-content:space-between;align-items:center;text-align:center}.sidebar-footer{display:flex;font-size:16px;text-align:center;justify-content:center;padding-top:10px}.canvas-wrapper{width:100%;height:100%;padding:20px}.sidebar-footer a{text-decoration:none;color:#000}.paint-app .top-left{display:none}@media screen and (max-width:670px){.mon{display:none}.paint-app .top-left{display:block}}