@import url(https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap);@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap);nav{padding:0 .3rem;background-color:rgba(216,191,175,.5);font-weight:700;display:flex;align-items:center;justify-content:flex-end}nav .logo{margin-right:auto;font-size:.4rem;white-space:nowrap;letter-spacing:0}nav a{padding:.1rem;padding-bottom:.05rem;margin-bottom:.05rem;margin-right:.3rem}nav .page-link{position:relative}nav .page-link:before{content:"";position:absolute;top:100%;left:0;width:0;height:.05rem;border-radius:.2rem;background-color:#a97758;transition:all .2s}nav .page-link.router-link-exact-active:before,nav .page-link:hover:before{width:100%}nav .github-link{border:1px solid;border-radius:.3rem}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;font-size:.24rem;overflow:hidden;color:#a97758}.intro-wrapper{position:relative;padding-top:.7rem;z-index:1}.intro-wrapper .demo-box{position:relative;display:flex;flex-wrap:wrap;padding-bottom:.8rem;z-index:-1}.intro-wrapper .demo-box:hover img{filter:brightness(.7);opacity:.4}.intro-wrapper .demo-box:hover img:hover{filter:none;opacity:1;transform:translateY(-.2rem);box-shadow:0 0 .5rem rgba(0,0,0,.5)}.intro-wrapper .demo-box img{display:block;width:25%;min-height:4rem;transition:all .5s;opacity:.7;box-shadow:0 0 .3rem rgba(0,0,0,.3);cursor:crosshair}@media only screen and (max-width:992px){.intro-wrapper .demo-box img{width:50%;box-shadow:none}}.intro-wrapper .title-box{position:absolute;bottom:0;left:0;right:0;padding-bottom:.3rem;z-index:1}.intro-wrapper .title-box:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;background-image:linear-gradient(180deg,transparent,#f2e5dc);z-index:-1}@media only screen and (max-width:992px){.intro-wrapper .title-box{bottom:50%;transform:translateY(50%);padding-bottom:.5rem}.intro-wrapper .title-box:before{background-image:none;background-color:hsla(0,0%,100%,.5)}}.intro-wrapper h1{font-size:1rem;font-weight:700;letter-spacing:.1rem;color:#a97758;text-shadow:5px 5px #fff}.intro-wrapper h2{font-size:.3rem}.intro-wrapper .start-btn{width:5rem;margin-top:.5rem;font-size:.3rem;background-image:linear-gradient(45deg,#a97758 50%,#c19477 0)}.upload-wrapper{height:8rem;display:flex;justify-content:center;align-items:center}.upload-wrapper input{display:none}.tool-wrapper{margin-bottom:.5rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.tool-wrapper .tool-btn{margin:0 .15rem}.tool-wrapper .switch-btn{display:flex;align-items:center;border-radius:.8rem;box-shadow:5px 5px 0 #d8bfaf;overflow:hidden}.tool-wrapper .switch-btn .btn{background-color:rgba(169,119,88,.5);box-shadow:none}.tool-wrapper .switch-btn .btn.active{background-color:#a97758}.tool-wrapper .switch-btn .btn:first-of-type{border-radius:.8rem 0 0 .8rem}.tool-wrapper .switch-btn .btn:last-of-type{border-radius:0 .8rem .8rem 0}.tool-wrapper .range-box{margin:0 .3rem;display:flex;align-items:center}.tool-wrapper .range-box .num{width:.5rem}@media only screen and (max-width:992px){.tool-wrapper .range-box{order:2;margin-top:.5rem}}.canvas-wrapper[data-v-214d2b20]{position:relative;box-shadow:0 0 5px rgba(0,0,0,.5);margin:auto}.canvas-wrapper .canvas-bg[data-v-214d2b20]{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-size:100% auto;background-position:top}.canvas-wrapper canvas[data-v-214d2b20]{display:block;opacity:.7;cursor:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-wrapper .reupload-btn[data-v-214d2b20]{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin:.1rem auto;white-space:nowrap;cursor:pointer;border-bottom:1px dashed}.custom-cursor[data-v-214d2b20]{position:absolute;top:0;left:0;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:50%;background-color:hsla(0,0%,100%,.8);transform:translate(-50%,-50%);box-shadow:0 0 5px rgba(0,0,0,.5)}.custom-cursor.eraser[data-v-214d2b20]{border-radius:0;transform:none}.result-wrapper .img-wrapper{box-shadow:0 0 5px rgba(0,0,0,.5);margin:auto}.result-wrapper .result-img{width:100%;height:100%;background-repeat:no-repeat;background-size:100% auto;background-position:top}.result-wrapper input[type=color]{width:0;height:0;overflow:hidden;opacity:0;visibility:hidden}.result-wrapper .btn-box{display:flex;align-items:center;justify-content:center;margin-top:.2rem}.result-wrapper .check-wrapper{display:flex;align-items:center;margin-left:.3rem;font-weight:700;cursor:pointer}.result-wrapper .check-wrapper .switcher{position:relative;width:.5rem;height:.1rem;margin-right:.1rem;border-radius:.2rem;background-color:#fff;transition:all .2s}.result-wrapper .check-wrapper .switcher:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:.2rem;height:.2rem;border-radius:50%;background-color:#d8bfaf;transition:all .2s}.result-wrapper .check-wrapper .switcher.active{background-color:#d8bfaf}.result-wrapper .check-wrapper .switcher.active:before{left:calc(100% - .2rem);background-color:#a97758}.img-section{position:relative;transition:all .3s}.img-section.fadeout{opacity:0;visibility:hidden}.playground{padding:.3rem 0 1.2rem}blockquote,body,dd,div,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,select,td,textarea,th,ul{padding:0;margin:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,b,caption,cite,code,dfn,em,strong,th,var{font-weight:400;font-style:normal}li,ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:100%}q:after,q:before{content:""}abbr,acronym{border:0}a{text-decoration:none;color:inherit}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}button:focus,input:focus,textarea:focus{outline:none}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:16px}*{box-sizing:border-box}html{font-size:5.20833vmax;font-family:Quicksand,sans-serif;background-color:#f2e5dc}@media only screen and (max-width:992px){html{font-size:50px}}.logo{font-family:Gamja Flower,cursive}.btn{padding:.15rem .3rem;border-radius:.3rem;display:inline-block;color:#fff;background-color:#a97758;font-weight:700;box-shadow:5px 5px 0 #d8bfaf;cursor:pointer;transition:all .2s}.btn:active{transform:translate(.05rem,.05rem)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;background:none;border-radius:5px;background-color:#d8bfaf;height:.1rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:.3rem;height:.3rem;border-radius:50%;background-color:#a97758}input[type=range]::-moz-range-thumb{border:0;width:.3rem;height:.3rem;border-radius:50%;background-color:#a97758}