:root{--size:20px;--rotation:0deg;--border-radius:10px;--color:#e97e03}.container{animation:3s infinite rotate-circles}.container .circle{filter:drop-shadow(3px 3px 5px #00000080);transition:background 1s ease-in-out,border-radius 1s ease-in-out,rotate 1s ease-in-out,width 1s ease-in-out,height 1s ease-in-out;position:absolute;translate:-50% -50%}.container .circle:first-child{z-index:8;width:calc(1 * var(--size));height:calc(1 * var(--size));rotate:calc(7.5 * var(--rotation));border-radius:calc(1 * var(--border-radius));background:color-mix(in srgb, var(--color), white 35%);transition-delay:50ms}.container .circle:nth-child(2){z-index:7;width:calc(2 * var(--size));height:calc(2 * var(--size));rotate:calc(7 * var(--rotation));border-radius:calc(2 * var(--border-radius));background:color-mix(in srgb, var(--color), white 30%);transition-delay:.1s}.container .circle:nth-child(3){z-index:6;width:calc(3 * var(--size));height:calc(3 * var(--size));rotate:calc(6.5 * var(--rotation));border-radius:calc(3 * var(--border-radius));background:color-mix(in srgb, var(--color), white 25%);transition-delay:.15s}.container .circle:nth-child(4){z-index:5;width:calc(4 * var(--size));height:calc(4 * var(--size));rotate:calc(6 * var(--rotation));border-radius:calc(4 * var(--border-radius));background:color-mix(in srgb, var(--color), white 20%);transition-delay:.2s}.container .circle:nth-child(5){z-index:4;width:calc(5 * var(--size));height:calc(5 * var(--size));rotate:calc(5.5 * var(--rotation));border-radius:calc(5 * var(--border-radius));background:color-mix(in srgb, var(--color), white 15%);transition-delay:.25s}.container .circle:nth-child(6){z-index:3;width:calc(6 * var(--size));height:calc(6 * var(--size));rotate:calc(5 * var(--rotation));border-radius:calc(6 * var(--border-radius));background:color-mix(in srgb, var(--color), white 10%);transition-delay:.3s}.container .circle:nth-child(7){z-index:2;width:calc(7 * var(--size));height:calc(7 * var(--size));rotate:calc(4.5 * var(--rotation));border-radius:calc(7 * var(--border-radius));background:color-mix(in srgb, var(--color), white 5%);transition-delay:.35s}.container .circle:nth-child(8){z-index:1;background:var(--color);width:calc(8 * var(--size));height:calc(8 * var(--size));rotate:calc(4 * var(--rotation));border-radius:calc(8 * var(--border-radius));transition-delay:.4s}@keyframes rotate-circles{50%{--rotation:12deg;--border-radius:3px;--color:#541388;--size:40px}}