.home{height:100vh;overflow:hidden;position:relative;-webkit-transition:all 1s ease;transition:all 1s ease;z-index:1}.home:after{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;position:absolute;z-index:-1}.palette:after{-webkit-animation:c2toc1 .3s normal forwards;animation:c2toc1 .3s normal forwards;right:55%}.dropper:after,.palette:after{height:54px;width:54px;top:90%;border-radius:50%}.dropper:after{-webkit-animation:c1toc2 .3s normal forwards;animation:c1toc2 .3s normal forwards;right:45%}@-webkit-keyframes c1toc2{0%{background-color:#ba6d57}to{background-color:#7fb0af;width:100vw;height:100vh;top:0;right:0;border-radius:0}}@keyframes c1toc2{0%{background-color:#ba6d57}to{background-color:#7fb0af;width:100vw;height:100vh;top:0;right:0;border-radius:0}}@-webkit-keyframes c2toc1{0%{background-color:#7fb0af}to{background-color:#ba6d57;width:100vw;height:100vh;top:0;right:0;border-radius:0}}@keyframes c2toc1{0%{background-color:#7fb0af}to{background-color:#ba6d57;width:100vw;height:100vh;top:0;right:0;border-radius:0}}main{position:relative;height:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;overflow:hidden}main .name-group{position:absolute;top:20px;left:20px}main .name-group svg{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);fill:#7fb0af;cursor:pointer}main .name-group #app-name{position:relative;font-size:1.8rem;margin:0;text-transform:uppercase}main .name-group #app-name:after{position:absolute;left:-5px;width:3.2rem;background:rgba(127,176,175,.7);z-index:1;height:35%}.mainBordered{margin:5rem 3rem;height:calc(100% - 10rem)}.mainBordered,.mainBorderedDragging{background-color:#f3f3f3;border-radius:4px;-webkit-box-shadow:0 4px 13px -2px rgba(0,0,0,.6);box-shadow:0 4px 13px -2px rgba(0,0,0,.6)}.mainBorderedDragging{margin:2rem 1rem;height:calc(100% - 4rem)}.container{text-align:center;height:100%}@media screen and (max-width:450px){header h1{font-size:9vw}.mainBordered{margin:2rem 1rem;height:calc(100% - 4rem)}}.upload-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:transparent;text-align:center;margin:0 auto;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.upload-container img{width:100%}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.dragover{-webkit-animation:pulse 1s infinite;animation:pulse 1s infinite;border:4px dashed #3a3a3a}.drop-files-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.drop-files-container .input-container{width:auto;overflow:hidden;position:relative;margin:4px;padding:10px 13px;border:2px dashed rgba(0,0,0,.2);-webkit-transition:border .3s ease-in-out;transition:border .3s ease-in-out}.drop-files-container .input-container input{height:100%;position:absolute;top:0;right:0;font-size:50px}.drop-files-container .input-container:hover{border-style:solid}.drop-files-container span{margin:4px 0}.container header{padding:25px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:80px;font-size:1rem;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0}.container h1{font-size:7vw;margin:0;font-weight:300}.container h4{font-size:2vw;opacity:.8;margin-top:0}.home-container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:-7%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.home-container .howto-container{width:80%;position:absolute;background:#fff;-webkit-box-shadow:0 0 6px rgba(0,0,0,.16);box-shadow:0 0 6px rgba(0,0,0,.16);padding:50px 30px 10px 30px;overflow:auto;top:85px;height:calc(100vh - 85px)}.home-container .howto-container h4{margin-top:1.33em}.home-container .howto-container img{max-width:90%}.dropzone-overlay{position:absolute;height:100%;width:100%;background-color:rgba(0,0,0,.6);z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-weight:700;font-size:3rem;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.dropzone-overlay p{margin-top:150px}@media screen and (max-width:450px){header a{font-size:.6em}}.color-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;margin-bottom:15px}.color-container:last-child{margin-bottom:0}.color-container .color-code{margin:0;font-weight:700;font-size:.8rem;line-height:60px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24)}.anag-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center;cursor:pointer;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;padding:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.anag-container p{height:100%;width:100%;margin:0 2px 0 4px;line-height:60px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.24);font-size:.8em;font-weight:800}.colorMode-container{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.colorMode-container .option{position:relative;font-weight:400;cursor:pointer;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:12px;line-height:18px;text-align:center;top:0;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.colorMode-container .option:after{position:absolute;content:" ";background:#7fb0af;border-radius:100%;width:6px;height:6px;bottom:-10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.colorMode-container .option .option-icon{height:24px}#selected{top:-4px;font-weight:600}#selected:after{bottom:-6px;opacity:1}@media screen and (max-width:450px){.colorMode-container .option .option-icon{height:20px}}.result-container{height:100%}.result-container,.result-container .main-container{display:-webkit-box;display:-ms-flexbox;display:flex}.result-container .main-container{width:70%;padding:48px 20px 20px 20px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.result-container .main-container .image-container{position:relative;height:85%;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.result-container .main-container .image-container canvas{width:100%;height:100%}.result-container .side-container{width:30%;background-color:#fff;-webkit-box-shadow:-3px 0 7px -4px rgba(0,0,0,.2);box-shadow:-3px 0 7px -4px rgba(0,0,0,.2);text-align:center;padding:1rem 1.3rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:auto}.result-container .side-container h4{margin:10px 0;text-transform:capitalize}@media screen and (max-width:780px){.result-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.result-container .main-container{width:100%;padding:65px 15px 15px 15px}.result-container .main-container .img-settngs-container{max-width:75%;min-width:35%}.result-container .main-container .zoomer{margin-bottom:15px}.result-container .side-container{width:100%;overflow:auto;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-shadow:0 -3px 7px -4px rgba(0,0,0,.2);box-shadow:0 -3px 7px -4px rgba(0,0,0,.2)}.result-container .side-container h4{font-size:5vw}}.action-btn{background:#d2691e;width:3rem;height:3rem;border-radius:50%;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:calc(180px - 1.2rem);-webkit-box-shadow:0 0 5px rgba(0,0,0,.33);box-shadow:0 0 5px rgba(0,0,0,.33);cursor:pointer;background-image:url(https://img.icons8.com/material/96/000000/color-mode.png);background-size:47%;background-position:50%;background-repeat:no-repeat;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.action-btn:hover{-webkit-box-shadow:0 0 8px rgba(0,0,0,.63);box-shadow:0 0 8px rgba(0,0,0,.63)}.option-btn{-webkit-box-shadow:0 0 5px rgba(0,0,0,.33);box-shadow:0 0 5px rgba(0,0,0,.33);cursor:pointer;display:block;background:rgba(0,0,0,.1);background-position:50%;background-size:50% 50%;background-repeat:no-repeat;width:54px;height:54px;border-radius:50%;margin:7px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.option-btn:hover{-webkit-box-shadow:0 0 8px rgba(0,0,0,.43);box-shadow:0 0 8px rgba(0,0,0,.43)}.toasted{background:#353535!important}.zoomInRight{-webkit-animation:zoomInRight 1s normal forwards;animation:zoomInRight 1s normal forwards}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutLeft{-webkit-animation:zoomOutLeft 1s normal forwards;animation:zoomOutLeft 1s normal forwards}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.fadeOutInLeft{-webkit-animation:fadeOutInLeft 2s normal;animation:fadeOutInLeft 2s normal}@-webkit-keyframes fadeOutInLeft{0%{opacity:1}50%{opacity:0;-webkit-transform:translate3d(-2%,0,0);transform:translate3d(-2%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeOutInLeft{0%{opacity:1}50%{opacity:0;-webkit-transform:translate3d(-2%,0,0);transform:translate3d(-2%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.dropping{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:4s;animation-duration:4s;-webkit-animation-name:parachute;animation-name:parachute;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-delay:.1s;animation-delay:.1s}@-webkit-keyframes parachute{0%{-webkit-transform:rotate(30deg) translate(-20px);transform:rotate(30deg) translate(-20px)}30%{-webkit-transform:rotate(-20deg) translate(50px,100%);transform:rotate(-20deg) translate(50px,100%)}60%{-webkit-transform:rotate(20deg) translate(10px,155%);transform:rotate(20deg) translate(10px,155%)}to{-webkit-transform:rotate(0deg) translate(155px,230%);transform:rotate(0deg) translate(155px,230%)}}@keyframes parachute{0%{-webkit-transform:rotate(30deg) translate(-20px);transform:rotate(30deg) translate(-20px)}30%{-webkit-transform:rotate(-20deg) translate(50px,100%);transform:rotate(-20deg) translate(50px,100%)}60%{-webkit-transform:rotate(20deg) translate(10px,155%);transform:rotate(20deg) translate(10px,155%)}to{-webkit-transform:rotate(0deg) translate(155px,230%);transform:rotate(0deg) translate(155px,230%)}}.fade-enter-active,.fade-leave-active{-webkit-transition:opacity .2s;transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave{opacity:1}.slide-enter-active,.slide-leave-active{-webkit-transition:all .2s;transition:all .2s}.slide-leave-to{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:0}.slide-enter{-webkit-transform:translateX(100%);transform:translateX(100%)}.slide-enter-to{-webkit-transform:translateX(0);transform:translateX(0)}.slide-down-enter-active,.slide-down-leave-active{-webkit-transition:all .5s;transition:all .5s}.slide-down-enter,.slide-down-leave-to{top:100%}.slide-down-enter-to,.slide-leave{top:74px}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Helvetica;margin:0;color:#2b2b2b}body,html{height:100%}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}.hidden{opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)}.pointer,a{cursor:pointer}a{position:relative}a:after{content:" ";position:absolute;top:27%;left:-3px;width:0;height:3px;background:#000;-webkit-transition:all .1s ease-in-out;transition:all .1s ease-in-out}a:hover:after{width:102%}