.logo-animation{display:flex;align-items:center;justify-content:center;width:100%;margin-top:-40px;background:#2a3137;direction:ltr}.letters{position:relative;display:flex;height:192px;align-items:center;justify-content:center}.letter{position:relative;width:162px;height:162px}.letter:not(:first-child){margin-left:-42px}.letter-i{z-index:1;width:82px;transform-origin:100% 50%}.dot{position:absolute;width:42px;height:42px;transform:scale(0)}.dot-i{top:0;left:240px}.dot-e{bottom:0;right:0}.logo-icon{display:flex;position:absolute;left:230px;top:5px;width:222px;height:62px}.icon{width:62px;height:62px;opacity:0}.icon-text{position:absolute;top:60px;left:60px;width:160px;height:62px}.icon-text path,.icon-text polygon{opacity:0}#TLcontrols .square.el{width:90px;height:90px;background:var(--btn-bg)}.square.el{pointer-events:none;position:absolute;width:28px;height:28px;font-size:12px;top:auto;bottom:auto;margin:auto}.anime-container.relative>div{position:relative}.line{width:100%;padding:1px 0}.player{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:flex-end;padding-top:32px;flex-direction:row-reverse}.player button:hover{background-color:var(--btn-bg-hover)}.player button{position:relative;display:block;margin:0 0 0 5px;padding:5px 10px;font-size:12px;text-transform:uppercase;border:1px solid var(--border-color);background-color:var(--btn-bg);color:#fff;transition:background-color .3s}.player button:focus{outline:none}.active .player{opacity:1}.active .player button:hover:after{content:"";opacity:.3;position:absolute;left:0;top:0;display:block;width:100%;height:100%;background-color:currentColor}.player input{margin-left:10px}.log:focus{outline:none}.square,.circle{pointer-events:none;position:relative;width:28px;height:28px;margin:1px;font-size:12px;background-color:var(--btn-bg)}.circle{border-radius:50%}.triangle{pointer-events:none;position:relative;color:var(--btn-bg);width:0;height:0;border-style:solid;border-width:0 14px 24px 14px;border-color:transparent transparent currentColor transparent}.stretched{height:2px}.shadow{position:absolute;opacity:.2}.motion-path{position:relative;width:256px;margin:auto}#cssProperties .el{transform:translateZ(0);top:0;bottom:0}.anime-container.relative>div:nth-child(2),div#morphing{background:#fbfaf8;padding:20px;max-width:100%;height:114px;margin-bottom:20px;margin-top:10px;background:var(--light-bg)!important;border:1px solid var(--border-color)}div#CSStransforms el{top:0;bottom:0}div#CSStransforms .el,div#specificPropertyParameters .el{top:0;bottom:0}div#morphing{height:144px}div#functionBasedDuration,div#colors,div#cssProperties{height:92px}div#elasticity{height:67px}@media(min-width:350px){section{font-size:15px}}@media(min-width:640px){section{font-size:24px}}@media(min-width:1440px){section{font-size:1.25vw}}.logo{opacity:0;position:relative;margin-left:-.3rem;margin-top:-8rem;font-size:8px}body.ready .logo{opacity:1}body:not(.iOS) #lines *{mix-blend-mode:lighten}#fills *{opacity:0;mix-blend-mode:lighten}#line-i-1{transform-origin:30em 8em}.fireworks{position:absolute;top:0;left:0;width:100%;height:100%}div#TLcontrols{overflow:hidden;height:92px}.anime-container{will-change:transform}section#fireworx{background:var(--light-bg);text-align:center;padding:80px 0;position:relative}div#colors .square.el{position:relative;margin:0}div#functionBasedDuration .line{height:30px}.hard-example{width:2rem;height:2rem;margin-top:auto;margin-bottom:auto;mix-blend-mode:lighten}.red{background-color:#ff324a}.green{background-color:#31ffa6}.blue{background-color:#206eff}div#codepenExample{background:#2a3137;padding:42px 20px 20px}@media(max-width:768px){section#fireworx{display:none!important}}