:root{--hue:210;--bg:hsl(var(--hue),10%,85%);--fg:hsl(var(--hue),10%,15%);--red:#eb691c;--white:hsl(0,0%,100%);--blue:#002B5B;--trans-dur:0.3s;--dur:3s}.pl{display:block;margin:auto;width:14em;height:auto}.pl__ball,.pl__ball-shadow,.pl__ball-texture,.pl__stripe,.pl__stripe-dot,.pl__stripe-rotate{animation-duration:var(--dur);animation-timing-function:linear;animation-iteration-count:infinite}.pl__ball{animation-name:ball}.pl__ball-shadow{animation-name:ball-shadow}.pl__ball-texture{animation-name:ball-texture}.pl__stripe{animation-name:stripe}.pl__stripe--1{animation-name:stripe1}.pl__stripe--2{animation-name:stripe2}.pl__stripe--3{animation-name:stripe3}.pl__stripe-dot{animation-name:stripe-dot}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(2){animation-delay:calc(var(--dur) * .233)}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(3){animation-delay:calc(var(--dur) * .3)}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(4){animation-delay:calc(var(--dur) * .45)}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(5){animation-delay:calc(var(--dur) * .683)}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(6){animation-delay:calc(var(--dur) * .708)}.pl__stripe-dot-group:first-child .pl__stripe-dot:nth-child(7){animation-delay:calc(var(--dur) * .842)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:first-child{animation-delay:calc(var(--dur) * .108)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(2){animation-delay:calc(var(--dur) * .333)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(3){animation-delay:calc(var(--dur) * .425)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(4){animation-delay:calc(var(--dur) * .6)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(5){animation-delay:calc(var(--dur) * .658)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(6){animation-delay:calc(var(--dur) * .808)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(7){animation-delay:calc(var(--dur) * .842)}.pl__stripe-dot-group:nth-child(2) .pl__stripe-dot:nth-child(8){animation-delay:calc(var(--dur) * .892)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:first-child{animation-delay:calc(var(--dur) * -.067)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(2){animation-delay:calc(var(--dur) * .058)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(3){animation-delay:calc(var(--dur) * .208)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(4){animation-delay:calc(var(--dur) * .4)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(5){animation-delay:calc(var(--dur) * .517)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(6){animation-delay:calc(var(--dur) * .625)}.pl__stripe-dot-group:nth-child(3) .pl__stripe-dot:nth-child(7){animation-delay:calc(var(--dur) * .767)}.pl__stripe-rotate{animation-name:stripe-rotate}@keyframes ball{0%{transform:rotate(0) translateY(-15.75px)}to{transform:rotate(1turn) translateY(-15.75px)}}@keyframes ball-shadow{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}@keyframes ball-texture{0%{transform:translate(-16px)}to{transform:translate(48px)}}@keyframes stripe-dot{0%{r:1.25px}16.67%,to{r:0}}@keyframes stripe-rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes stripe1{0%,to{stroke-dashoffset:-95.7745px}50%{animation-timing-function:cubic-bezier(.65,0,.35,1);stroke-dashoffset:-75.702px}}@keyframes stripe2{0%,to{stroke-dashoffset:-80.1px}50%{animation-timing-function:cubic-bezier(.65,0,.35,1);stroke-dashoffset:-53.4px}}@keyframes stripe3{0%,to{stroke-dashoffset:-72.765px}50%{animation-timing-function:cubic-bezier(.65,0,.35,1);stroke-dashoffset:-48.51px}}