:root{--color-fur:#ffb141;--color-fur-dark:#f5832c;--color-spot:#f9584c;--color-snout:#544258;--color-collar:#3eab6c;--duration:.7s;--semi-duration:calc(var(--duration)/2);--easing:cubic-bezier(.5,0,.5,1);--stagger:calc(-1*var(--semi-duration)/2)}.walking-dog-container{display:inline-block}.speed-slow{--duration:1.2s;--semi-duration:calc(var(--duration)/2);--stagger:calc(-1*var(--semi-duration)/2)}.speed-normal{--duration:.7s;--semi-duration:calc(var(--duration)/2);--stagger:calc(-1*var(--semi-duration)/2)}.speed-fast{--duration:.4s;--semi-duration:calc(var(--duration)/2);--stagger:calc(-1*var(--semi-duration)/2)}.walking-dog-container *,.walking-dog-container :before,.walking-dog-container :after{box-sizing:border-box;animation-timing-function:var(--easing)!important}.walking-dog-container [class=🐕]{z-index:1;justify-content:center;align-items:center;width:300px;height:300px;display:flex;position:relative}.walking-dog-container [class=🐕] *{will-change:transform;position:absolute}.walking-dog-container [class=🐕]:before{content:"";width:100%;height:3.33%;animation:shadow calc(1*var(--semi-duration))infinite;background-color:#d3d1d1;border-radius:2px;position:absolute;bottom:13.33%;left:0}@keyframes shadow{0%,to{transform:scaleX(.75)}45%,55%{transform:scaleX(.5)}}.walking-dog-container .neck{transform-origin:bottom;z-index:2;width:50%;height:100px;bottom:calc(100% - 10px);right:-5px;transform:rotate(15deg)}.walking-dog-container .neck>.fur{border-bottom-left-radius:10px;width:100%;height:100%}.walking-dog-container .neck>.fur:before{content:"";background-color:var(--color-fur-dark);z-index:1;transform-origin:100% 100%;width:100%;height:50px;position:absolute;top:0;right:0;transform:rotate(15deg)}.walking-dog-container .collar{background-color:var(--color-collar);width:calc(100% + 10px);height:15%;animation:collar var(--semi-duration)calc(var(--semi-duration)/4)infinite;z-index:2;border-radius:5px;bottom:30px;left:-5px}.walking-dog-container .collar:after{content:"";background:var(--color-snout);transform-origin:top;width:18%;height:120%;animation:tag var(--semi-duration)infinite both;border-radius:50%;position:absolute;top:110%;right:0%}@keyframes collar{0%,to{transform:none}50%{transform:translateY(-25%)}}@keyframes tag{0%,to{transform:rotate(-15deg)}50%{transform:rotate(-15deg)scaleY(1.5)}}.walking-dog-container .head{transform-origin:0;z-index:2;width:145%;height:80%;animation:head var(--semi-duration)calc(var(--semi-duration)/4)infinite;bottom:50%;left:-2%}.walking-dog-container .head>.fur{border-bottom-right-radius:80px;width:100%;height:100%}.walking-dog-container .head>.fur:before{content:"";background-color:var(--color-spot);z-index:1;border-radius:50%;width:100%;height:0;padding-top:100%;position:absolute;top:-80%;left:-30%}@keyframes head{0%,to{transform:rotate(-10deg)}50%{transform:rotate(-15deg)}}.walking-dog-container .snout{background-color:var(--color-snout);z-index:1;border-bottom-left-radius:100%;width:25%;height:0;padding-top:25%;top:0;right:-5px}.walking-dog-container .ears{z-index:-1;width:30%;height:100%;bottom:40%;left:0}.walking-dog-container .ear{transform-origin:0 100%;width:100%;height:100%;animation:ear-front calc(var(--duration)/2)infinite;bottom:0;left:0;transform:rotate(-10deg)}.walking-dog-container .ear:before{content:"";z-index:2;border:2px solid #0000;border-left:2px solid var(--color-snout);transform-origin:0 100%;width:15px;height:25px;animation:ear-mark var(--semi-duration)calc(-1*var(--semi-duration))infinite;border-top-left-radius:100%;position:absolute;top:-2px;right:-7px}.walking-dog-container .ear>.fur{background-color:var(--color-spot);border-top-left-radius:100%;width:100%;height:100%}.walking-dog-container .ear:nth-child(2){z-index:-1;animation:ear-back calc(var(--duration)/2)infinite both;bottom:5px;left:15px;transform:rotate(-5deg)}.walking-dog-container .ear:nth-child(2)>.fur{background-color:var(--color-fur)}@keyframes ear-front{50%{transform:rotate(-15deg)}}@keyframes ear-mark{0%,to{transform:rotate(0)}50%{transform:rotate(25deg)}}@keyframes ear-back{0%,to{transform:rotate(0)}50%{transform:rotate(-10deg)}}.walking-dog-container .eye{background-color:var(--color-snout);z-index:1;border-radius:50%;width:6%;height:0;padding:6%;top:20%;left:35%}.walking-dog-container .eye:before{content:"";background-color:var(--color-snout);z-index:1;border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.walking-dog-container .eye:after{content:"";border-width:2px;border-color:var(--color-snout);border-style:solid;border-bottom-color:var(--color-spot);border-right-color:var(--color-spot);z-index:0;border-top-left-radius:100%;width:100%;height:100%;position:absolute;top:-50%;left:-50%;transform:scale(1.25)}.walking-dog-container .torso{width:56.67%;height:33.33%;animation:torso var(--semi-duration)both infinite;position:relative}.walking-dog-container .torso>.fur{transform-origin:0;z-index:1;border-top-left-radius:40px;width:185px;height:100%;transform:rotate(-20deg)translateY(10px)}.walking-dog-container .torso>.fur:after{content:"";background-color:var(--color-fur);border-bottom-right-radius:100px;border-bottom-left-radius:200px 85px;width:100%;height:100%;position:absolute;top:0;left:0}.walking-dog-container .torso>.legs{width:100%;height:100%;position:absolute;top:0;left:0}.walking-dog-container .spot{background-color:var(--color-spot);z-index:1;width:120px;height:120px;animation:spot var(--duration)calc(-1*var(--semi-duration))both infinite;border-radius:50%;bottom:40px;left:-20px}.walking-dog-container .spot:after{content:"";background-color:inherit;border-radius:50%;width:20px;height:20px;position:absolute;bottom:-10px;right:5px}.walking-dog-container .torso>.tail{transform-origin:bottom;bottom:calc(100% - 15px);left:0;transform:rotate(-45deg)}@keyframes torso{0%,to{transform:none}50%{transform:translateY(15%)}}@keyframes spot{0%,66%,to{transform:none}33%{transform:translate(10px)}}.walking-dog-container .tail{background-color:var(--color-spot);width:20px;height:15px;animation:tail var(--semi-duration)infinite;border-top-left-radius:10px 100%;border-top-right-radius:10px 100%}.walking-dog-container .tail>.tail{transform-origin:0 100%;animation:tail-inner var(--semi-duration)var(--stagger)infinite;bottom:90%;transform:rotate(-10deg)translateY(50%)scaleX(.8)scaleY(.9)}@keyframes tail{0%,to{transform:rotate(-45deg)translate(-15%)}50%{transform:rotate(-25deg)translate(15%)}}@keyframes tail-inner{0%,to{transform:rotate(-10deg)translateY(50%)scaleX(.8)scaleY(.9)}50%{transform:rotate(5deg)translateY(50%)scaleX(.8)scaleY(.9)}}.walking-dog-container .legs>.leg{bottom:5px}.walking-dog-container .legs>.leg:first-child{--color:var(--color-fur);--delay:0s;right:15px}.walking-dog-container .legs>.leg:nth-child(2){--color:var(--color-fur);--delay:calc(-1*var(--duration)/2);left:0}.walking-dog-container .legs>.leg:nth-child(3){--color:var(--color-fur-dark);z-index:-1;--delay:calc(-1*var(--duration)/2);right:15px}.walking-dog-container .legs>.leg:nth-child(4){--color:var(--color-fur-dark);z-index:-1;--delay:0s;left:0}.walking-dog-container .leg{background-color:var(--color,var(--color-fur));transform-origin:50% 5px;width:45px;height:65px;animation:leg infinite var(--duration)var(--delay,0s);position:absolute}.walking-dog-container .leg>.leg-inner{animation:leg-inner infinite var(--duration)calc(var(--delay));transform:rotate(90deg)}.walking-dog-container .leg>.fur{width:144.44%;height:100%}.walking-dog-container .leg>.fur:after{content:"";width:45px;height:150%;bottom:0;top:initial;background-color:var(--color,var(--color-fur));transform-origin:bottom;position:absolute;left:0;transform:rotate(15deg)}@keyframes leg{0%,to{transform:none}33%{transform:rotate(-55deg)}66%{transform:rotate(-20deg)}}@keyframes leg-inner{0%,to{transform:none}33%{transform:rotate(70deg)}76%{transform:none}}.walking-dog-container .fur{position:absolute;overflow:hidden}.walking-dog-container .fur:after{content:"";background-color:var(--color-fur);transform-origin:bottom;width:100%;height:150%;position:absolute;top:0;left:0}.walking-dog-container .leg-inner{transform-origin:top;width:100%;height:65%;position:absolute;top:100%}.walking-dog-container .leg-inner:before{content:"";background-color:var(--color,var(--color-fur));z-index:-1;border-radius:50%;width:45px;height:45px;position:absolute;top:-22.5px;left:0}.walking-dog-container .leg-inner .fur{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.walking-dog-container .leg-inner .fur:after{content:"";background-color:var(--color,var(--color-fur));transform-origin:top;width:100%;height:150%;position:absolute;top:0;left:0;transform:rotate(15deg)}