@import url(https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&display=swap);body,html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;overflow-x:hidden;overflow-y:auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}body{background-color:#413e3e}.side-pannel::-webkit-scrollbar,body::-webkit-scrollbar,html::-webkit-scrollbar{display:none!important}body,html{-ms-overflow-style:none!important;scrollbar-width:none!important}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.header{background-color:#515151;display:flex;height:11em;width:100vw}.header img{height:12em;width:10em}.header-text-container{display:flex;flex-direction:column}.header-text{font-family:Sansita Swashed,cursive;font-size:2rem;margin-bottom:12px}.header-sub-text,.header-text{color:#ababab;color:var(--text-info-color)}.header-sub-text{margin:0}:root{--main-gray-color:#413e3e;--secondery-gray-color:#3c3c3c;--desc-font-color:#292929;--desc-font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif}.animation-pannel{background-color:#413e3e;background-color:var(--main-gray-color);display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:flex-end;width:100vw}.main-section{align-items:center;display:flex;flex-direction:column;justify-content:flex-start;order:0;width:100%}.about-p{color:#ababab;color:var(--text-info-color);font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-family:var(--desc-font-family);font-size:1.1rem;margin-bottom:.5em}:root{--secondery-gray-color:#343333;--text-info-color:#ababab}input[type=number]{-moz-appearance:textfield}.side-pannel{background-color:#343333;background-color:var(--secondery-gray-color);box-shadow:-6px 10px 20px 0 #6c645e;display:flex;flex-direction:column;height:calc(100vh - 12em);order:1;overflow-y:scroll;padding:.5em;width:18.35em}.info-title,.text-input-info{color:#ababab;color:var(--text-info-color)}.animation-text-input{max-height:12em;max-width:100%;padding:0;resize:none}.control-sections,.translate-controls-container{display:flex;flex-direction:column}.translate-controls-container .h4{display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:center}.sub-titles{display:flex;justify-content:space-around}.sub-titles h6{margin-bottom:.5em;margin-top:.5em}.controls-input-container{display:flex;justify-content:space-around}.counter-input{border-color:unset;border-radius:6px;margin-left:.3em;margin-right:.3em;width:2.3em}.counter-input::-webkit-inner-spin-button,.counter-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.control-from,.control-to{margin-bottom:.3em}.from-text,.to-text{color:#ababab;color:var(--text-info-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:.7rem;margin:0 0 .5em}.input-and-btns{display:flex}.minus-icon,.plus-icon{stroke:gray;cursor:pointer;height:1.3em;width:1.3em}.minus-icon:hover,.plus-icon:hover{stroke:#155bf1}@media only screen and (max-width:642px){.side-pannel.desktop{display:none}.hamburger-menu,.side-pannel.mobile{display:flex!important}.side-pannel.mobile{height:100vh!important}}.side-pannel.mobile{display:none}.hamburger-menu{display:none;position:absolute}#menu__toggle{opacity:0}#menu__toggle:checked+.menu__btn>span{-webkit-transform:rotate(45deg);transform:rotate(45deg)}#menu__toggle:checked+.menu__btn{left:18.2em;top:-2.2em}#menu__toggle:checked+.menu__btn>span:before{top:0;-webkit-transform:rotate(0deg);transform:rotate(0deg)}#menu__toggle:checked+.menu__btn>span:after{top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}#menu__toggle:checked~.menu__box{display:flex!important;right:0!important}.menu__btn{align-items:center;bottom:1.3em;cursor:pointer;display:flex;height:2em;position:absolute;right:.2em;width:2em;z-index:1;z-index:101}.menu__btn>span,.menu__btn>span:after,.menu__btn>span:before{background-color:#ababab;background-color:var(--text-info-color);display:block;height:2px;position:absolute;transition-duration:.25s;width:100%}.menu__btn>span:before{content:"";top:-8px}.menu__btn>span:after{content:"";top:8px}.menu__box{align-items:center;background-color:#343333;background-color:var(--secondery-gray-color);bottom:0;box-shadow:2px 2px 6px rgba(0,0,0,.4);display:none;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;justify-content:center;list-style:none;margin:0;padding:0;right:-100%;transition-duration:.25s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.trigger-animation-btn{align-items:center;align-self:center;background-color:#155bf1;border-color:transparent;border-radius:10px;cursor:pointer;display:flex;height:2.5em;justify-content:flex-end;margin-bottom:1em;margin-top:2em;width:5em}.trigger-animation-btn:hover{background-color:#144bc0}.svg-icon-play{stroke:#000;height:1.8em;padding-top:.3em;width:1.8em}.switch-mode-container{align-items:center;align-self:center;display:flex;font-family:sans-serif;height:100vh;justify-content:center;margin-top:.5em;width:12.8em}.switch-button{background:hsla(0,0%,100%,.56);border-radius:30px;color:#155bf1;font-size:18px;letter-spacing:1px;overflow:hidden;padding-right:6.5em;position:relative;text-align:center;width:280px}.switch-button:before{align-items:center;bottom:0;content:"Shape";display:flex;justify-content:center;pointer-events:none;position:absolute;right:0;top:0;width:5em;z-index:3}.switch-button-checkbox{bottom:0;cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.switch-button-checkbox:checked+.switch-button-label:before{-webkit-transform:translateX(120px);transform:translateX(120px);transition:-webkit-transform .3s linear;transition:transform .3s linear;transition:transform .3s linear,-webkit-transform .3s linear}.switch-button-checkbox+.switch-button-label{display:block;padding:15px 0;pointer-events:none;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.switch-button-checkbox+.switch-button-label:before{background:#fff;border-radius:30px;content:"";height:100%;left:0;position:absolute;top:0;-webkit-transform:translateX(0);transform:translateX(0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.rangeValue,.switch-button-checkbox+.switch-button-label .switch-button-label-span{position:relative}.rangeValue{color:#999;display:block;font-size:1.1rem;font-weight:400;text-align:center}.range{-webkit-appearance:none;background:#111;border-radius:15px;box-shadow:inset 0 0 5px #000;height:1em;outline:none;overflow:hidden;width:7em}.range::-webkit-slider-thumb{-webkit-appearance:none;background:#155bf1;border:4px solid #333;border-radius:50%;box-shadow:-407px 0 0 400px #155bf1;cursor:pointer;height:15px;width:15px}.toggle-container{align-items:flex-start;display:flex;margin:auto;width:11.7em}#toggle_checkbox,#toggle_checkbox_mobile{display:none}.animation-toggle{cursor:pointer;display:block;height:3em;margin-top:1.9em!important;margin:0 auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:6em}.animation-toggle:before{border:3px solid #155bf1;height:2em;left:8px;top:8px;width:2em}.animation-toggle:after{border:3px solid #000;height:3em;right:0;top:0;width:6em}.animation-toggle:after,.animation-toggle:before{border-radius:50px;box-sizing:border-box;content:"";position:absolute;transition:top .5s ease,left .5s ease,right .5s ease,width .5s ease,height .5s ease,border-color .5s ease}#toggle_checkbox:checked+label:before,#toggle_checkbox_mobile:checked+label:before{border-color:#000;height:3em;left:0;top:0;width:6em}#toggle_checkbox:checked+label:after,#toggle_checkbox_mobile:checked+label:after{border-color:#155bf1;height:2em;right:8px;top:8px;width:2em}.shape-mode-container{display:grid;grid-template-columns:repeat(3,50px [col-start]);grid-template-rows:repeat(2,80px [col-start]);justify-content:space-evenly;justify-items:center;margin-top:1.2em}.shape-container{align-items:center;background-color:#dad3d3;box-sizing:border-box;cursor:pointer;display:flex;height:3em;justify-content:center;transition:.3s ease;width:3em}.shape-container:hover{-webkit-transform:scale(1.4);transform:scale(1.4)}.shape-square,.shape-triangle{background-color:#111;height:1.8em;width:1.8em}.shape-triangle{-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%)}.shape-circle{-webkit-clip-path:circle(50% at 50% 50%);clip-path:circle(50% at 50% 50%)}.shape-circle,.shape-star{background-color:#111;height:1.8em;width:1.8em}.shape-star{-webkit-clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.shape-arrow{-webkit-clip-path:polygon(0 20%,60% 20%,60% 0,100% 50%,60% 100%,60% 80%,0 80%);clip-path:polygon(0 20%,60% 20%,60% 0,100% 50%,60% 100%,60% 80%,0 80%)}.shape-arrow,.shape-message{background-color:#111;height:1.8em;width:1.8em}.shape-message{-webkit-clip-path:polygon(0 0,100% 0,100% 75%,75% 75%,75% 100%,50% 75%,0 75%);clip-path:polygon(0 0,100% 0,100% 75%,75% 75%,75% 100%,50% 75%,0 75%)}:root{--animation-window-background-color:#ddd;--animation-repeat:ease;--animation-duration:1s;--rotateX-from:rotateX(0);--rotateX-to:rotateX(0);--rotateY-from:rotateY(0);--rotateY-to:rotateY(0);--skewX-from:skewX(0);--skewX-to:skewX(0);--skewY-from:skewY(0);--skewY-to:skewY(0);--translateX-from:translateX(0);--translateX-to:translateX(0);--translateY-from:translateY(0);--translateY-to:translateY(0);--scaleX-from:scaleX(1);--scaleX-to:scaleX(1);--scaleY-from:scaleY(1);--scaleY-to:scaleY(1)}.animation-view-window{align-items:center;background-color:#ddd;background-color:var(--animation-window-background-color);display:flex;height:17em;justify-content:center;margin-bottom:1.7em;overflow:hidden;padding:.5em;width:17em}.animated-text{font-weight:700;line-break:anywhere}.animated-shape.play,.animated-text.play{-webkit-animation:play 1s ease;animation:play 1s ease;-webkit-animation:play var(--animation-duration) var(--animation-repeat);animation:play var(--animation-duration) var(--animation-repeat)}@-webkit-keyframes play{0%{-webkit-transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);-webkit-transform:var(--rotateX-from) var(--rotateY-from) var(--skewX-from) var(--skewY-from) var(--translateX-from) var(--translateY-from) var(--scaleX-from) var(--scaleY-from);transform:var(--rotateX-from) var(--rotateY-from) var(--skewX-from) var(--skewY-from) var(--translateX-from) var(--translateY-from) var(--scaleX-from) var(--scaleY-from)}to{-webkit-transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);-webkit-transform:var(--rotateX-to) var(--rotateY-to) var(--skewX-to) var(--skewY-to) var(--translateX-to) var(--translateY-to) var(--scaleX-to) var(--scaleY-to);transform:var(--rotateX-to) var(--rotateY-to) var(--skewX-to) var(--skewY-to) var(--translateX-to) var(--translateY-to) var(--scaleX-to) var(--scaleY-to)}}@keyframes play{0%{-webkit-transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);-webkit-transform:var(--rotateX-from) var(--rotateY-from) var(--skewX-from) var(--skewY-from) var(--translateX-from) var(--translateY-from) var(--scaleX-from) var(--scaleY-from);transform:var(--rotateX-from) var(--rotateY-from) var(--skewX-from) var(--skewY-from) var(--translateX-from) var(--translateY-from) var(--scaleX-from) var(--scaleY-from)}to{-webkit-transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);transform:rotateX(0) rotateY(0) skewX(0) skewY(0) translateX(0) translateY(0) scaleX(1) scaleY(1);-webkit-transform:var(--rotateX-to) var(--rotateY-to) var(--skewX-to) var(--skewY-to) var(--translateX-to) var(--translateY-to) var(--scaleX-to) var(--scaleY-to);transform:var(--rotateX-to) var(--rotateY-to) var(--skewX-to) var(--skewY-to) var(--translateX-to) var(--translateY-to) var(--scaleX-to) var(--scaleY-to)}}code[class*=language-],pre[class*=language-]{word-wrap:normal;background:0 0;color:#f8f8f2;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.5;tab-size:4;text-align:left;text-shadow:0 1px rgba(0,0,0,.3);white-space:pre;word-break:normal;word-spacing:normal}pre[class*=language-]{border-radius:.3em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--opacity:0;---background:#111;--text-color:#fff}.code-box{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:23em}.code-box pre{-ms-overflow-style:none;max-height:8em;scrollbar-width:none}.code-box pre::-webkit-scrollbar{display:none}.glow-on-hover{background:#111;border:none;border-radius:10px;color:#fff;color:var(--text-color);cursor:pointer;height:3.5em;margin-bottom:.5em;margin-top:.7em;outline:none;position:relative;width:10em;z-index:0}.glow-on-hover:before{-webkit-animation:glowing 20s linear infinite;animation:glowing 20s linear infinite;background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);background-size:400%;border-radius:10px;content:"";-webkit-filter:blur(5px);filter:blur(5px);height:calc(100% + 4px);left:-2px;opacity:0;opacity:var(--opacity);position:absolute;top:-2px;transition:opacity .3s ease-in-out;width:calc(100% + 4px);z-index:-1}.glow-on-hover:active{color:#000}.glow-on-hover:active:after{background:transparent}.glow-on-hover:hover:before{opacity:1}.glow-on-hover:after{background:#111;background:var(---background);border-radius:10px;content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}@-webkit-keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}@keyframes glowing{0%{background-position:0 0}50%{background-position:400% 0}to{background-position:0 0}}
/*# sourceMappingURL=main.f89a9d85.css.map*/