:root{--three-dots__size:100px;--three-dots__color:#000;--three-dots__dot-diameter:calc(var(--three-dots__size)/5);--three-dots__dot-left-margin:calc(var(--three-dots__dot-diameter)/2);--three-dots__translateX-timing-function:cubic-bezier(0,1,1,0);--three-dots__opacity-timing-function:ease-in-out;--three-dots__duration:2s}@keyframes three-dots__translateX{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes three-dots__appearDisappear{0%{opacity:0}50%{opacity:1}to{opacity:0}}.three-dots{display:flex;justify-content:center;align-items:center;background-color:var(--debug-size-color);width:var(--three-dots__size);height:var(--three-dots__size)}.three-dots__dot{background-color:var(--three-dots__color);height:var(--three-dots__dot-diameter);width:var(--three-dots__dot-diameter);border-radius:var(--three-dots__dot-diameter)}.three-dots__dot+.three-dots__dot{margin-left:var(--three-dots__dot-left-margin)}.three-dots__dot--first{animation:three-dots__translateX var(--three-dots__duration) infinite .4s var(--three-dots__translateX-timing-function),three-dots__appearDisappear var(--three-dots__duration) infinite .4s var(--three-dots__opacity-timing-function)}.three-dots__dot--second{animation:three-dots__translateX var(--three-dots__duration) infinite .2s var(--three-dots__translateX-timing-function),three-dots__appearDisappear var(--three-dots__duration) infinite .2s var(--three-dots__opacity-timing-function)}.three-dots__dot--third{animation:three-dots__translateX var(--three-dots__duration) infinite 0s var(--three-dots__translateX-timing-function),three-dots__appearDisappear var(--three-dots__duration) infinite 0s var(--three-dots__opacity-timing-function)}:root{--circular-bars__size:100px;--circular-bars__color:#000;--circular-bars__bar-size:20px;--circular-bars__border-distance:10px;--circular-bars__origin-offset:calc(var(--circular-bars__bar-size) - var(--circular-bars__size)/2 + var(--circular-bars__border-distance))}.circular-bars{display:flex;justify-content:center;align-items:center;background-color:var(--debug-size-color);height:var(--circular-bars__size);width:var(--circular-bars__size);position:relative;overflow:hidden}.circular-bars__bar-wrapper{position:absolute;right:var(--circular-bars__border-distance);transform-origin:var(--circular-bars__origin-offset) 50%}@keyframes circular-bars__translateX{0%{transform:translateX(0)}10%{transform:translateX(var(--circular-bars__border-distance))}20%,to{transform:translateX(0)}}.circular-bars__bar-wrapper:nth-child(2){transform:rotate(45deg)}.circular-bars__bar-wrapper:nth-child(3){transform:rotate(90deg)}.circular-bars__bar-wrapper:nth-child(4){transform:rotate(135deg)}.circular-bars__bar-wrapper:nth-child(5){transform:rotate(180deg)}.circular-bars__bar-wrapper:nth-child(6){transform:rotate(225deg)}.circular-bars__bar-wrapper:nth-child(7){transform:rotate(270deg)}.circular-bars__bar-wrapper:nth-child(8){transform:rotate(315deg)}.circular-bars__bar{width:var(--circular-bars__bar-size);height:10px;background-color:#000}:root{--circular-bars__bar-duration:0.3s;--circular-bars__bar-animation:circular-bars__translateX var(--circular-bars__bar-duration) linear infinite;--circular-bars__delay:calc(var(--circular-bars__bar-duration)/8)}.circular-bars__bar-wrapper:first-child>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*0)}.circular-bars__bar-wrapper:nth-child(2)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*1)}.circular-bars__bar-wrapper:nth-child(3)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*2)}.circular-bars__bar-wrapper:nth-child(4)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*3)}.circular-bars__bar-wrapper:nth-child(5)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*4)}.circular-bars__bar-wrapper:nth-child(6)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*5)}.circular-bars__bar-wrapper:nth-child(7)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*6)}.circular-bars__bar-wrapper:nth-child(8)>div{animation:var(--circular-bars__bar-animation) calc(var(--circular-bars__delay)*7)}:root{--moving-square-line__size:100px;--moving-square-line__color:#000;--moving-square-line__moving-square-side:120px;--moving-square-line__moving-border-width:30px;--moving-square-line__moving-square-offest:calc(var(--moving-square-line__moving-border-width) - var(--moving-square-line__moving-square-side));--moving-square-line__translate:calc(var(--moving-square-line__size) - 2*var(--moving-square-line__moving-border-width) + var(--moving-square-line__moving-square-side));--moving-square-line__duration:0.4s}.moving-square-line{display:flex;justify-content:center;align-items:center;background-color:var(--debug-size-color)}.moving-square-line__base-square{height:var(--moving-square-line__size);width:var(--moving-square-line__size);position:relative;overflow:hidden}@keyframes moving-square-line__motion{0%{transform:translate(0)}25%{transform:translate(var(--moving-square-line__translate))}50%{transform:translate(var(--moving-square-line__translate),var(--moving-square-line__translate))}75%{transform:translateY(var(--moving-square-line__translate))}to{transform:translate(0)}}.moving-square-line__inner-square{position:absolute;top:var(--moving-square-line__moving-square-offest);left:var(--moving-square-line__moving-square-offest);background-color:var(--moving-square-line__color);height:var(--moving-square-line__moving-square-side);width:var(--moving-square-line__moving-square-side);animation:moving-square-line__motion var(--moving-square-line__duration) linear infinite}:root{--nested-circles__size:100px;--nested-circles__inner-diameter:60px}@keyframes nested-circles__rotation{0%{transform:rotate(0deg);opacity:1}50%{opacity:0}to{transform:rotate(1turn);opacity:1}}.nested-circles{overflow:hidden;background-color:var(--debug-size-color);justify-content:center}.nested-circles,.nested-circles__base-circle{height:var(--nested-circles__size);width:var(--nested-circles__size);align-items:center}.nested-circles__base-circle{border:10px solid #000;border-radius:var(--nested-circles__size);display:flex;justify-content:flex-start;position:relative;animation:nested-circles__rotation 1s linear infinite;box-sizing:border-box}.nested-circles__inner-circle{position:relative;height:var(--nested-circles__inner-diameter);width:var(--nested-circles__inner-diameter);border:10px solid #000;box-sizing:border-box;border-radius:var(--nested-circles__inner-diameter)}:root{--square-grid__size:99px}.square-grid{overflow:hidden;height:var(--square-grid__size);width:var(--square-grid__size);background-color:var(--debug-size-color);justify-content:center;align-items:center}.square-grid__grid{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);grid-gap:0;height:100%}@keyframes square-grid__shrink{0%{transform:scale(1)}25%{transform:scale(0)}50%{transform:scale(1)}}.square-grid__grid>div{background-color:#000;animation:square-grid__shrink 2s ease-in-out infinite}.square-grid__grid>div:nth-child(7){animation-delay:0s}.square-grid__grid>div:nth-child(4),.square-grid__grid>div:nth-child(8){animation-delay:.1s}.square-grid__grid>div:first-child,.square-grid__grid>div:nth-child(5),.square-grid__grid>div:nth-child(9){animation-delay:.2s}.square-grid__grid>div:nth-child(2),.square-grid__grid>div:nth-child(6){animation-delay:.3s}.square-grid__grid>div:nth-child(3){animation-delay:.4s}:root{--debug-size-color:transparent;--number-of-columns:1}@media only screen and (min-width:768px){:root{--number-of-columns:3}}h1{text-align:center;font-family:Verdana,Arial,Helvetica,sans-serif}#app{justify-items:center;align-items:center;display:grid;grid-template-columns:repeat(var(--number-of-columns),1fr);grid-gap:10px;min-height:100vh}span.origin-debug{position:absolute;width:100%;height:100%;transform:scale(.001);transform-origin:inherit}span.origin-debug:after{content:"";display:block;width:10px;height:10px;border-radius:100%;background:rgba(255,128,128,.75);transform:scale(1000)}