.loader{--size:800px;--duration:2s;--logo-color:grey;--background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);height:var(--size);aspect-ratio:1;position:relative}@media (max-width:768px){.loader{--size:600px}}@media (max-width:568px){.loader{--size:500px}}.loader .box{background:rgba(100,100,100,.15);background:var(--background);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:ripple var(--duration)infinite ease-in-out;border-top:1px solid #646464;border-radius:50%;position:absolute;box-shadow:0 10px 10px rgba(0,0,0,.3)}.loader .box:first-child{z-index:99;top:40%;bottom:40%;left:40%;right:40%}.loader .box:nth-child(2){z-index:98;border-color:rgba(100,100,100,.8);animation-delay:.2s;top:30%;bottom:30%;left:30%;right:30%}.loader .box:nth-child(3){z-index:97;border-color:rgba(100,100,100,.6);animation-delay:.4s;top:20%;bottom:20%;left:20%;right:20%}.loader .box:nth-child(4){z-index:96;border-color:rgba(100,100,100,.4);animation-delay:.6s;top:10%;bottom:10%;left:10%;right:10%}.loader .box:nth-child(5){z-index:95;border-color:rgba(100,100,100,.2);animation-delay:.8s;top:0%;bottom:0%;left:0%;right:0%}.loader .logo{place-content:center;padding:30%;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.loader .logo svg{fill:var(--logo-color);width:100%;animation:color-change var(--duration)infinite ease-in-out}@keyframes ripple{0%{transform:scale(1);box-shadow:0 10px 10px rgba(0,0,0,.3)}50%{transform:scale(1.3);box-shadow:0 30px 20px rgba(0,0,0,.3)}to{transform:scale(1);box-shadow:0 10px 10px rgba(0,0,0,.3)}}@keyframes color-change{0%{fill:var(--logo-color)}50%{fill:#fff}to{fill:var(--logo-color)}}