*{box-sizing:border-box}body,html{background-color:#fff;display:grid;align-items:center;justify-content:center;align-content:center;justify-items:center;padding:20px;min-height:100vh;width:100vw}#app{display:flex;align-items:center;justify-content:center;flex-direction:column}button{cursor:pointer;padding:4px 12px;border-radius:4px;font-family:Lato,sans-serif;margin-top:30px;font-size:1rem;background-color:#fff}button:hover{background-color:#e6e6e6}button:active{background-color:#ccc}.mondrian{background:#070908;border:10px solid rgb(7,9,8);box-shadow:5px 10px 10px #aaa;display:grid;grid-auto-flow:dense;grid-auto-rows:1fr;grid-gap:10px;height:310px;width:250px;animation:mondrian-move 8s infinite ease}.mondrian__block{background:var(--bg);grid-column:var(--col-start) / span var(--col);grid-row:var(--row-start) / span var(--row)}.mondrian__block:nth-of-type(1),.mondrian__block:nth-of-type(5){--bg: rgb(242, 245, 241)}.mondrian__block:nth-of-type(2),.mondrian__block:nth-of-type(6){--bg: #fdd835}.mondrian__block:nth-of-type(3),.mondrian__block:nth-of-type(7){--bg: #1e88e5}.mondrian__block:nth-of-type(4),.mondrian__block:nth-of-type(8){--bg: #f44336}