body,html{padding:0;margin:0}.container{display:flex;align-items:center;justify-content:center;background-color:rgb(217,216,216);width:100vw;height:100vh;min-width:100%}.loader{position:relative;width:100vw;height:200px;perspective:800px}.crystal{position:absolute;top:50%;left:50%;width:60px;height:60px;opacity:0;transform-origin:bottom center;transform:translate(-50%,-50%) rotateX(45deg) rotate(0deg);animation:spin 4s linear infinite,emerge 2s ease-in-out infinite alternate,fadeIn .3s ease-out forwards;border-radius:50%;visibility:hidden}@keyframes spin{0%{transform:translate(-50%,-50%) rotateX(45deg) rotate(0deg)}to{transform:translate(-50%,-50%) rotateX(45deg) rotate(1turn)}}@keyframes emerge{0%,to{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes fadeIn{to{visibility:visible;opacity:.8}}.crystal:first-child{background:linear-gradient(45deg,#fc9191,rgb(241,210,210));animation-delay:0s}.crystal:nth-child(2){background:linear-gradient(45deg,#fd5050,#fd7b7b);animation-delay:.3s}.crystal:nth-child(3){background:linear-gradient(45deg,#cd3535,#fd5954);animation-delay:.6s}.crystal:nth-child(4){background:linear-gradient(45deg,#fa1a1a,#fd2c2c);animation-delay:.9s}.crystal:nth-child(5){background:linear-gradient(45deg,#dd0d0d,#e71313);animation-delay:1.2s}.crystal:nth-child(6){background:linear-gradient(45deg,#fc0909,#f11414);animation-delay:1.5s}