.dot{background-color:#b3d4fc;border-radius:10px;width:20px;height:20px;margin-right:10px;animation:1.5s ease-in-out infinite pulse}.dot:last-child{margin-right:0}.dot:first-child{animation-delay:-.3s}.dot:nth-child(2){animation-delay:-.1s}.dot:nth-child(3){animation-delay:.1s}@keyframes pulse{0%{background-color:#b3d4fc;transform:scale(.8);box-shadow:0 0 rgba(178,212,252,.7)}50%{background-color:#6793fb;transform:scale(1.2);box-shadow:0 0 0 10px rgba(178,212,252,0)}to{background-color:#b3d4fc;transform:scale(.8);box-shadow:0 0 rgba(178,212,252,.7)}}.loader{--s:6px;width:calc(10*var(--s));aspect-ratio:1;-webkit-mask:radial-gradient(50% 50%,transparent calc(99% - 2*var(--s)),#000 calc(101% - 2*var(--s)));border-radius:50%;animation:1s linear infinite r;display:grid}.loader:before{content:"";background:conic-gradient(from 25deg,#f8a201 25%,#fa2402 0 50%,#fdb3b0 0 75%,#02dde1 0);-webkit-mask:repeating-conic-gradient(transparent 0 25deg,#000 23% 25%),radial-gradient(var(--s)at var(--s)50%,#000 97%,transparent)left/calc(100% - 2*var(--s))100% repeat-x,radial-gradient(var(--s)at 50% var(--s),#000 97%,transparent)top/100% calc(100% - 2*var(--s))repeat-y}@keyframes r{to{transform:rotate(1turn)}}#page{justify-content:center;align-items:center;display:flex}#container{justify-content:center;align-items:center;display:flex;position:relative}#h3{color:#524f4f}#ring{border:1px solid transparent;border-radius:50%;width:190px;height:190px;position:absolute}#ring:first-child{border-bottom:8px solid #f02ae6;animation:2s linear infinite rotate1}@keyframes rotate1{0%{transform:rotateX(50deg)rotate(110deg)}to{transform:rotateX(50deg)rotate(470deg)}}#ring:nth-child(2){border-bottom:8px solid #f01343;animation:2s linear infinite rotate2}@keyframes rotate2{0%{transform:rotateX(20deg)rotateY(50deg)rotate(20deg)}to{transform:rotateX(20deg)rotateY(50deg)rotate(380deg)}}#ring:nth-child(3){border-bottom:8px solid #03aaaa;animation:2s linear infinite rotate3}@keyframes rotate3{0%{transform:rotateX(40deg)rotateY(130deg)rotate(450deg)}to{transform:rotateX(40deg)rotateY(130deg)rotate(90deg)}}#ring:nth-child(4){border-bottom:8px solid #cf8701;animation:2s linear infinite rotate4}@keyframes rotate4{0%{transform:rotateX(70deg)rotate(270deg)}to{transform:rotateX(70deg)rotate(630deg)}}