*{box-sizing:border-box;animation:fadeIn .5s}body,html{background-color:#fff;display:grid;align-content:center;justify-content:center;font-family:Lato,sans-serif;text-align:center;min-height:100vh}.mondrian{background-color:#070908;border:10px solid #070908;box-shadow:5px 10px 10px #aaa;display:grid;grid-auto-columns:50px;grid-auto-flow:dense;grid-auto-rows:50px;grid-gap:10px;grid-template-columns:repeat(auto-fit,50px);grid-template-rows:repeat(auto-fit,50px);height:300px;overflow:hidden;width:250px}.mondrian__block{animation:scaleIn .25s ease 0s;background-color:#f2f5f1}.mondrian__block:nth-child(1){animation-delay:.15s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(2){animation-delay:.3s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(3){animation-delay:.45s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(4){animation-delay:.6s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(5){animation-delay:.75s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(6){animation-delay:.9s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(7){animation-delay:1.05s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(8){animation-delay:1.2s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(9){animation-delay:1.35s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(10){animation-delay:1.5s;background-color:$color;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(11){animation-delay:1.65s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(12){animation-delay:1.8s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(13){animation-delay:1.95s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(14){animation-delay:2.1s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(15){animation-delay:2.25s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block:nth-child(16){animation-delay:2.4s;transform:scale(0);animation-fill-mode:forwards}.mondrian__block[data-color-index="1"]{background-color:#f2f5f1}.mondrian__block[data-color-index="2"]{background-color:#f8d92d}.mondrian__block[data-color-index="3"]{background-color:#f2f5f1}.mondrian__block[data-color-index="4"]{background-color:#0b54a4}.mondrian__block[data-color-index="5"]{background-color:#f2f5f1}.mondrian__block[data-color-index="6"]{background-color:#d60014}.generate-button{cursor:pointer;padding:4px 12px;border-radius:4px;font-family:Lato,sans-serif;margin-top:50px;background-color:#fff}.generate-button:hover{background-color:#e6e6e6}.generate-button:active{background-color:#ccc}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}