@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}.loader{animation:rotate 5s infinite linear}.loader div{background-color:#fff;border-radius:100%;height:20px;left:50%;position:absolute;margin-left:-10px;margin-top:-10px;top:50%;width:20px}.loader--fade-in-and-out div:nth-of-type(1){opacity:0;transform:rotate(72deg) translateY(150%);animation:fadeInAndOut 3s .2s infinite}.loader--fade-in-and-out div:nth-of-type(2){opacity:0;transform:rotate(144deg) translateY(150%);animation:fadeInAndOut 3s .4s infinite}.loader--fade-in-and-out div:nth-of-type(3){opacity:0;transform:rotate(216deg) translateY(150%);animation:fadeInAndOut 3s .6s infinite}.loader--fade-in-and-out div:nth-of-type(4){opacity:0;transform:rotate(288deg) translateY(150%);animation:fadeInAndOut 3s .8s infinite}.loader--fade-in-and-out div:nth-of-type(5){opacity:0;transform:rotate(360deg) translateY(150%);animation:fadeInAndOut 3s 1s infinite}.loader--fade-in-and-out-2 div:nth-of-type(1){opacity:0;transform:rotate(72deg) translateY(150%);animation:fadeInAndOut2 3s .2s infinite}.loader--fade-in-and-out-2 div:nth-of-type(2){opacity:0;transform:rotate(144deg) translateY(150%);animation:fadeInAndOut2 3s .4s infinite}.loader--fade-in-and-out-2 div:nth-of-type(3){opacity:0;transform:rotate(216deg) translateY(150%);animation:fadeInAndOut2 3s .6s infinite}.loader--fade-in-and-out-2 div:nth-of-type(4){opacity:0;transform:rotate(288deg) translateY(150%);animation:fadeInAndOut2 3s .8s infinite}.loader--fade-in-and-out-2 div:nth-of-type(5){opacity:0;transform:rotate(360deg) translateY(150%);animation:fadeInAndOut2 3s 1s infinite}.loader--in-and-out div:nth-of-type(1){animation:in-and-out1 4s .2s infinite}@keyframes in-and-out1{0%,10%,90%,to{transform:rotate(72deg) translateY(0)}14%,86%{transform:rotate(72deg) translateY(150%)}}.loader--in-and-out div:nth-of-type(2){animation:in-and-out2 4s .4s infinite}@keyframes in-and-out2{0%,10%,90%,to{transform:rotate(144deg) translateY(0)}14%,86%{transform:rotate(144deg) translateY(150%)}}.loader--in-and-out div:nth-of-type(3){animation:in-and-out3 4s .6s infinite}@keyframes in-and-out3{0%,10%,90%,to{transform:rotate(216deg) translateY(0)}14%,86%{transform:rotate(216deg) translateY(150%)}}.loader--in-and-out div:nth-of-type(4){animation:in-and-out4 4s .8s infinite}@keyframes in-and-out4{0%,10%,90%,to{transform:rotate(288deg) translateY(0)}14%,86%{transform:rotate(288deg) translateY(150%)}}.loader--in-and-out div:nth-of-type(5){animation:in-and-out5 4s 1s infinite}@keyframes in-and-out5{0%,10%,90%,to{transform:rotate(360deg) translateY(0)}14%,86%{transform:rotate(360deg) translateY(150%)}}.loader--out-from-behind{animation:rotateShield 4s 1s infinite linear}.loader--out-from-behind div:nth-of-type(1){animation:out-from-behind1 4s .2s infinite}@keyframes out-from-behind1{0%,15%,85%,to{transform:rotate(72deg) translateY(0) scale(0)}20%,80%{transform:rotate(72deg) translateY(175%) scale(1)}}.loader--out-from-behind div:nth-of-type(2){animation:out-from-behind2 4s .4s infinite}@keyframes out-from-behind2{0%,15%,85%,to{transform:rotate(144deg) translateY(0) scale(0)}20%,80%{transform:rotate(144deg) translateY(175%) scale(1)}}.loader--out-from-behind div:nth-of-type(3){animation:out-from-behind3 4s .6s infinite}@keyframes out-from-behind3{0%,15%,85%,to{transform:rotate(216deg) translateY(0) scale(0)}20%,80%{transform:rotate(216deg) translateY(175%) scale(1)}}.loader--out-from-behind div:nth-of-type(4){animation:out-from-behind4 4s .8s infinite}@keyframes out-from-behind4{0%,15%,85%,to{transform:rotate(288deg) translateY(0) scale(0)}20%,80%{transform:rotate(288deg) translateY(175%) scale(1)}}.loader--out-from-behind div:nth-of-type(5){animation:out-from-behind5 4s 1s infinite}@keyframes out-from-behind5{0%,15%,85%,to{transform:rotate(360deg) translateY(0) scale(0)}20%,80%{transform:rotate(360deg) translateY(175%) scale(1)}}.loader--mexican-wave div:nth-of-type(1){transform:rotate(72deg) translateY(150%) scale(1);animation:mexican-wave1 2s .2s infinite}@keyframes mexican-wave1{0%,45%,55%,to{transform:rotate(72deg) translateY(150%) scale(1)}50%{transform:rotate(72deg) translateY(150%) scale(1.5)}}.loader--mexican-wave div:nth-of-type(2){transform:rotate(144deg) translateY(150%) scale(1);animation:mexican-wave2 2s .4s infinite}@keyframes mexican-wave2{0%,45%,55%,to{transform:rotate(144deg) translateY(150%) scale(1)}50%{transform:rotate(144deg) translateY(150%) scale(1.5)}}.loader--mexican-wave div:nth-of-type(3){transform:rotate(216deg) translateY(150%) scale(1);animation:mexican-wave3 2s .6s infinite}@keyframes mexican-wave3{0%,45%,55%,to{transform:rotate(216deg) translateY(150%) scale(1)}50%{transform:rotate(216deg) translateY(150%) scale(1.5)}}.loader--mexican-wave div:nth-of-type(4){transform:rotate(288deg) translateY(150%) scale(1);animation:mexican-wave4 2s .8s infinite}@keyframes mexican-wave4{0%,45%,55%,to{transform:rotate(288deg) translateY(150%) scale(1)}50%{transform:rotate(288deg) translateY(150%) scale(1.5)}}.loader--mexican-wave div:nth-of-type(5){transform:rotate(360deg) translateY(150%) scale(1);animation:mexican-wave5 2s 1s infinite}@keyframes mexican-wave5{0%,45%,55%,to{transform:rotate(360deg) translateY(150%) scale(1)}50%{transform:rotate(360deg) translateY(150%) scale(1.5)}}.loader--swap div:nth-of-type(1){transform:rotate(72deg) translateY(150%);animation:swap1 4s .2s infinite}@keyframes swap1{0%,44%,58%,to{transform:rotate(72deg) translateY(150%)}48%,54%{transform:rotate(72deg)}}.loader--swap div:nth-of-type(2){transform:rotate(144deg) translateY(150%);animation:swap2 4s .4s infinite}@keyframes swap2{0%,44%,58%,to{transform:rotate(144deg) translateY(150%)}48%,54%{transform:rotate(144deg)}}.loader--swap div:nth-of-type(3){transform:rotate(216deg) translateY(150%);animation:swap3 4s .6s infinite}@keyframes swap3{0%,44%,58%,to{transform:rotate(216deg) translateY(150%)}48%,54%{transform:rotate(216deg)}}.loader--swap div:nth-of-type(4){transform:rotate(288deg) translateY(150%);animation:swap4 4s .8s infinite}@keyframes swap4{0%,44%,58%,to{transform:rotate(288deg) translateY(150%)}48%,54%{transform:rotate(288deg)}}.loader--swap div:nth-of-type(5){transform:rotate(360deg) translateY(150%);animation:swap5 4s 1s infinite}@keyframes swap5{0%,44%,58%,to{transform:rotate(360deg) translateY(150%)}48%,54%{transform:rotate(360deg)}}.loader--dip div:nth-of-type(1){transform:rotate(72deg) translateY(150%);animation:dip1 3s .3s infinite}@keyframes dip1{50%{transform:rotate(72deg) scale(.5)}0%,40%,60%,to{transform:rotate(72deg) translateY(150%)}}.loader--dip div:nth-of-type(2){transform:rotate(144deg) translateY(150%);animation:dip2 3s .6s infinite}@keyframes dip2{50%{transform:rotate(144deg) scale(.5)}0%,40%,60%,to{transform:rotate(144deg) translateY(150%)}}.loader--dip div:nth-of-type(3){transform:rotate(216deg) translateY(150%);animation:dip3 3s .9s infinite}@keyframes dip3{50%{transform:rotate(216deg) scale(.5)}0%,40%,60%,to{transform:rotate(216deg) translateY(150%)}}.loader--dip div:nth-of-type(4){transform:rotate(288deg) translateY(150%);animation:dip4 3s 1.2s infinite}@keyframes dip4{50%{transform:rotate(288deg) scale(.5)}0%,40%,60%,to{transform:rotate(288deg) translateY(150%)}}.loader--dip div:nth-of-type(5){transform:rotate(360deg) translateY(150%);animation:dip5 3s 1.5s infinite}@keyframes dip5{50%{transform:rotate(360deg) scale(.5)}0%,40%,60%,to{transform:rotate(360deg) translateY(150%)}}.loader--scale-out div:nth-of-type(1){transform:rotate(72deg) translateY(175%);animation:scale-out1 4s .2s infinite}@keyframes scale-out1{35%,65%{transform:scale(0) rotate(72deg) translateY(0)}0%,25%,75%,to{transform:scale(1) rotate(72deg) translateY(175%)}}.loader--scale-out div:nth-of-type(2){transform:rotate(144deg) translateY(175%);animation:scale-out2 4s .4s infinite}@keyframes scale-out2{35%,65%{transform:scale(0) rotate(144deg) translateY(0)}0%,25%,75%,to{transform:scale(1) rotate(144deg) translateY(175%)}}.loader--scale-out div:nth-of-type(3){transform:rotate(216deg) translateY(175%);animation:scale-out3 4s .6s infinite}@keyframes scale-out3{35%,65%{transform:scale(0) rotate(216deg) translateY(0)}0%,25%,75%,to{transform:scale(1) rotate(216deg) translateY(175%)}}.loader--scale-out div:nth-of-type(4){transform:rotate(288deg) translateY(175%);animation:scale-out4 4s .8s infinite}@keyframes scale-out4{35%,65%{transform:scale(0) rotate(288deg) translateY(0)}0%,25%,75%,to{transform:scale(1) rotate(288deg) translateY(175%)}}.loader--scale-out div:nth-of-type(5){transform:rotate(360deg) translateY(175%);animation:scale-out5 4s 1s infinite}@keyframes scale-out5{35%,65%{transform:scale(0) rotate(360deg) translateY(0)}0%,25%,75%,to{transform:scale(1) rotate(360deg) translateY(175%)}}.loader--fan-out div:nth-of-type(1){animation:fan-out1 4s .1s infinite}@keyframes fan-out1{0%,10%{transform:rotate(0) translateY(0) scale(0)}20%,80%{transform:rotate(72deg) translateY(150%) scale(1)}90%,to{transform:rotate(360deg) translateY(0) scale(0)}}.loader--fan-out div:nth-of-type(2){animation:fan-out2 4s .2s infinite}@keyframes fan-out2{0%,10%{transform:rotate(0) translateY(0) scale(0)}20%,80%{transform:rotate(144deg) translateY(150%) scale(1)}90%,to{transform:rotate(360deg) translateY(0) scale(0)}}.loader--fan-out div:nth-of-type(3){animation:fan-out3 4s .3s infinite}@keyframes fan-out3{0%,10%{transform:rotate(0) translateY(0) scale(0)}20%,80%{transform:rotate(216deg) translateY(150%) scale(1)}90%,to{transform:rotate(360deg) translateY(0) scale(0)}}.loader--fan-out div:nth-of-type(4){animation:fan-out4 4s .4s infinite}@keyframes fan-out4{0%,10%{transform:rotate(0) translateY(0) scale(0)}20%,80%{transform:rotate(288deg) translateY(150%) scale(1)}90%,to{transform:rotate(360deg) translateY(0) scale(0)}}.loader--fan-out div:nth-of-type(5){animation:fan-out5 4s .5s infinite}@keyframes fan-out5{0%,10%{transform:rotate(0) translateY(0) scale(0)}20%,80%{transform:rotate(360deg) translateY(150%) scale(1)}90%,to{transform:rotate(360deg) translateY(0) scale(0)}}.loader--dive div:nth-of-type(1){animation:dive1 5s .4s infinite}@keyframes dive1{0%,28%,80%,to{transform:rotate(72deg) scale(0) translateY(0)}30%,70%{transform:rotate(72deg) scale(1) translateY(150%)}72%{transform:rotate(72deg) scale(1) translateY(250%)}}.loader--dive div:nth-of-type(2){animation:dive2 5s .8s infinite}@keyframes dive2{0%,28%,80%,to{transform:rotate(144deg) scale(0) translateY(0)}30%,70%{transform:rotate(144deg) scale(1) translateY(150%)}72%{transform:rotate(144deg) scale(1) translateY(250%)}}.loader--dive div:nth-of-type(3){animation:dive3 5s 1.2s infinite}@keyframes dive3{0%,28%,80%,to{transform:rotate(216deg) scale(0) translateY(0)}30%,70%{transform:rotate(216deg) scale(1) translateY(150%)}72%{transform:rotate(216deg) scale(1) translateY(250%)}}.loader--dive div:nth-of-type(4){animation:dive4 5s 1.6s infinite}@keyframes dive4{0%,28%,80%,to{transform:rotate(288deg) scale(0) translateY(0)}30%,70%{transform:rotate(288deg) scale(1) translateY(150%)}72%{transform:rotate(288deg) scale(1) translateY(250%)}}.loader--dive div:nth-of-type(5){animation:dive5 5s 2s infinite}@keyframes dive5{0%,28%,80%,to{transform:rotate(360deg) scale(0) translateY(0)}30%,70%{transform:rotate(360deg) scale(1) translateY(150%)}72%{transform:rotate(360deg) scale(1) translateY(250%)}}*{box-sizing:border-box}body{background-color:#111;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;min-height:100svh;margin:0;padding:10px}.container{border:4px solid #c0c0c0;border-radius:6px;height:200px;margin:10px;position:relative;width:200px}.loader,.loader__wrapper{height:20px;left:50%;margin-left:-10px;margin-top:-10px;position:absolute;top:50%;width:20px}@keyframes fadeInAndOut{0%,25%,to{opacity:0}30%,70%{opacity:1}}@keyframes fadeInAndOut2{0%,25%,75%,to{opacity:0}30%,70%{opacity:1}}@keyframes rotateShield{0%{transform:rotate(0)}45%{transform:rotate(80deg)}50%{transform:rotate(240deg)}to{transform:rotate(360deg)}}@keyframes rotate{to{transform:rotate(360deg)}}