html{--size: 600px;--transitionStep: 4px;--skewStep: 4deg;--clr-red: #ff1400;--clr-yellow: #ffc300;--clr-green: #17f3af;--clr-blue: #03cfec;--clr-purple: #6e19e6;--clr-orange: #ff5801}.flex{display:flex;flex-wrap:wrap;gap:calc(var(--size) / 4)}.wrapper{width:var(--size);height:var(--size);cursor:pointer;background-color:#f0f0f0}.rotate{animation:11s infinite linear rotate}.translate{animation:5s infinite linear translate}.scale{animation:3s infinite ease-in-out alternate scale}.skew{animation:7s infinite linear skew}@keyframes rotate{0%{transform:rotate(0)}20%{transform:rotate(72deg)}40%{transform:rotate(144deg)}60%{transform:rotate(216deg)}80%{transform:rotate(288deg)}to{transform:rotate(360deg)}}@keyframes translate{0%{transform:translate(0)}25%{transform:translate(calc(var(--transitionStep) * -1),var(--transitionStep))}50%{transform:translateY(calc(var(--transitionStep) * 2))}75%{transform:translate(var(--transitionStep),var(--transitionStep))}to{transform:translate(0)}}@keyframes scale{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes skew{0%{transform:skew(0)}25%{transform:skew(var(--skewStep),var(--skewStep))}50%{transform:skew(0,calc(var(--skewStep) * 2))}75%{transform:skew(calc(var(--skewStep) * -1),var(--skewStep))}to{transform:skew(0)}}:root{--scene-width: 1500px;--scene-height: 350px}body{margin:0;padding:0;width:100vw;height:100vh;flex-direction:column;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:#f0f0f0}body p{font-family:Manrope,sans-serif;font-optical-sizing:auto;font-weight:200;font-style:normal}.scene{position:relative;width:100%;max-width:var(--scene-width);height:auto;aspect-ratio:1500 / 350;background-color:#f0f0f0;margin:2rem;overflow:hidden}.layer{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.bg-layer{z-index:1;object-fit:contain;pointer-events:none}.blob-layer{z-index:2;cursor:pointer;position:absolute;inset:0}.logo-layer{z-index:3;object-fit:contain;pointer-events:none}