*,:after,:before{box-sizing:border-box}body,html{border:0;margin:0;padding:0}.block{background:silver;display:inline-block;float:left;font-family:arial,sans-serif;font-size:12vh;font-weight:700;height:calc(25vh - 5px);line-height:25vh;margin:2px;text-align:center;transition:transform .5s ease-out;width:calc(25vw - 5px)}.block--empty{background:#fff;color:rgba(0,0,0,.2)}.block--movable{cursor:pointer}.block--move-up{animation:animationMoveUp 1s 1 ease-out}.block--move-down{animation:animationMoveDown 1s 1 ease-out}.block--move-left{animation:animationMoveLeft 1s 1 ease-out}.block--move-right{animation:animationMoveRight 1s 1 ease-out}.block--win:not(.block--empty){background:#0f0}@keyframes animationMoveUp{0%,100%{animation-timing-function:cubic-bezier(.33333,.66667,.66667,1)}0%{transform:translateY(100%)}20%,35%,45%{transform:translateY(0)}25%,40%{transform:translateY(5%)}}@keyframes animationMoveDown{0%,100%{animation-timing-function:cubic-bezier(.33333,0,.66667,.33333)}0%{transform:translateY(-100%)}100%,30%,60%,85%{transform:translateY(0)}45%{transform:translateY(-45%)}75%{transform:translateY(-30%)}95%{transform:translateY(-5%)}}@keyframes animationMoveLeft{0%,100%{animation-timing-function:cubic-bezier(.33333,.66667,.66667,1)}0%{transform:translateX(100%)}100%,30%,60%,85%{transform:translateX(0)}45%{transform:translateX(15%)}75%{transform:translateX(5%)}95%{transform:translateX(2%)}}@keyframes animationMoveRight{0%,100%{animation-timing-function:cubic-bezier(.33333,0,.66667,.33333)}0%{transform:translateX(-100%)}100%,30%,60%,85%{transform:translateX(0)}45%{transform:translateX(-15%)}75%{transform:translateX(-5%)}95%{transform:translateX(-2%)}}.grid{height:100vh;width:100vw}