*,:after,:before{box-sizing:border-box}body{--timing:cubic-bezier(1, 0, 1, 1.19);--delay:.36s;place-items:center;min-block-size:100vh;margin:0;display:grid}section{flex-wrap:wrap;gap:0 1vmin;block-size:76vmin;inline-size:76vmin;display:flex}.box{clip-path:inset(100% 100% 0% 0%);background-color:var(--bg);block-size:37vmin;inline-size:37vmin}.toTop{--bg:oklch(65.7374% .204759 35.6531);animation:toTop var(--delay) 1s var(--timing) forwards}.toRight{--bg:oklch(72.7479% .19046 128.55);animation:toRight var(--delay) 1.125s var(--timing) forwards}.toLeft{--bg:oklch(69.0698% .156035 239.494);animation:toLeft var(--delay) 1.25s var(--timing) forwards}.toBottom{--bg:oklch(83.0939% .170923 81.4561);animation:toBottom var(--delay) 1.375s var(--timing) forwards}.reset-btn{color:oklch(32.3853% .012297 285.693);cursor:pointer;opacity:.5;background:0 0;border:none;font-family:sans-serif;font-weight:700;transition:opacity .2s;position:fixed;bottom:3cqi;right:3cqi;&:hover{opacity:1}}@keyframes toRight{to{clip-path:inset(0%)}}@keyframes toBottom{0%{clip-path:inset(0% 100% 100% 0%)}to{clip-path:inset(0%)}}@keyframes toLeft{0%{clip-path:inset(0% 0% 100% 100%)}to{clip-path:inset(0%)}}@keyframes toTop{0%{clip-path:inset(100% 0% 0% 100%)}to{clip-path:inset(0%)}}