.main{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#201e43}.container{width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);filter:url(#goo);animation:rotate-move 2s ease-in-out infinite}.container,.dot{position:absolute;margin:auto}.dot{width:70px;height:70px;border-radius:50%;background-color:#000;top:0;bottom:0;left:0;right:0}.dot-3{background-color:#ff1717;animation:dot-3-move 2s ease infinite,index 6s ease infinite}.dot-2{background-color:#0051ff;animation:dot-2-move 2s ease infinite,index 6s ease -4s infinite}.dot-1{background-color:#ffc400;animation:dot-1-move 2s ease infinite,index 6s ease -2s infinite}@keyframes dot-3-move{20%{transform:scale(1)}45%{transform:translateY(-18px) scale(.45)}60%{transform:translateY(-90px) scale(.45)}80%{transform:translateY(-90px) scale(.45)}to{transform:translateY(0) scale(1)}}@keyframes dot-2-move{20%{transform:scale(1)}45%{transform:translate(-16px,12px) scale(.45)}60%{transform:translate(-80px,60px) scale(.45)}80%{transform:translate(-80px,60px) scale(.45)}to{transform:translateY(0) scale(1)}}@keyframes dot-1-move{20%{transform:scale(1)}45%{transform:translate(16px,12px) scale(.45)}60%{transform:translate(80px,60px) scale(.45)}80%{transform:translate(80px,60px) scale(.45)}to{transform:translateY(0) scale(1)}}@keyframes rotate-move{55%{transform:translate(-50%,-50%) rotate(0deg)}80%{transform:translate(-50%,-50%) rotate(1turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes index{0%,to{z-index:3}33.3%{z-index:2}66.6%{z-index:1}}