html
  head   
  body
    div#columns
      div#col0
      div#col1
      div#col2
      div#col3
      div#col4
      div#col5
      div#col6
      div#col7
      div#col8
      div#col9 
      div#col8
      div#col9
      div#col10
      div#col11

html, body 
  height: 100%
body 
  display: flex
  align-items: center
  background: #222
  #columns 
    width: 85%
    margin: 0 auto
    display: grid
    grid-template-columns: auto auto auto auto auto auto
    grid-template-rows: 120px 120px 120px 120px
    grid-gap: 8px
  #col0 
    grid-row: 1/4
    background: #58F
    border-radius: 20px
    animation: scaleY 3s infinite
  #col1 
    grid-column: 2/5
    background: #8FF
    border-radius: 20px
    animation: rotate 3s infinite
  #col2 
    grid-column: 5/7
    background: #5F2
    border-radius: 20px
    animation: translate 3s infinite
  #col3 
    grid-column: 2/4
    background: #F58
    border-radius: 20px
    animation: scale 3s infinite
  #col4 
    grid-column: 4/5
    grid-row: 2/5
    background: #33F
    border-radius: 20px
    animation: scaleX 3s infinite
  #col5 
    grid-column: 5/6
    grid-row: 2/4
    background: #558
    border-radius: 20px
    animation: skew 3s infinite
  #col6 
    grid-column: 6/7
    background: #DFA
    border-radius: 20px
    animation: scale2 3s infinite
  #col7 
    grid-column: 1/3
    background: #F8F
    border-radius: 20px
    animation: translate2 3s infinite
  #col8 
    grid-column: 2/3
    grid-row: 3/4
    background: #FF8
    border-radius: 20px
    animation: scale3 3s infinite
  #col9 
    grid-column: 3/4
    grid-row: 3/5
    background: #CA8
    border-radius: 20px
    animation: rotate2 3s infinite
  #col10 
    grid-column: 6/7
    grid-row: 3/5
    background: #F53
    border-radius: 20px
    animation: translateY2 3s infinite
  #col11 
    grid-column: 5/6
    grid-row: 4/5
    background: #000
    border-radius: 20px
    animation: translateY3 3s infinite
  @keyframes scaleY
    0%
      transform: scaleY(1)
    50%
      transform: scaleY(0.7)
    100%
      transform: scaleY(1)
  @keyframes rotate
    0%
      transform: rotate(0deg)
    50%
      transform: rotate(7deg)
    100%
      transform: rotate(0deg)
  @keyframes translate
    0%
      transform: translate(0px)
    50%
      transform: translate(30px)
    100%
      transform: translate(0px)
  @keyframes scale 
    0%
      transform: scale(1)
    50%
      transform: scale(1.1)
    100%
      transform: scale(1)
  @keyframes scaleX
    0%
      transform: scaleX(1)
    50%
      transform: scaleX(0.8)
    100%
      transform: scaleX(1)
  @keyframes skew
    0%
      transform: skew(0deg, 0deg)
    50%
      transform: skew(20deg, 20deg)
    100%
      transform: skew(0deg, 0deg)
  @keyframes scale2
    0%
      transform: scale(1)
    50%
      transform: scale(0.9)
    100%
      transform: scale(1)
  @keyframes translate2
    0%
      transform: translate(0px)
    50%
      transform: translate(-50px)
    100%
      transform: translate(0px)
  @keyframes scale3
    0%
      transform: scale(1)
    50%
      transform: scale(0.5)
    100%
      transform: scale(1)
  @keyframes rotate2
    0%
      transform: rotate(0deg)
    50%
      transform: rotate(-7deg)
    100%
      transform: rotate(0deg)
  @keyframes translateY2
    0%
      transform: translateY(0px)
    50%
      transform: translateY(50px)
    100%
      transform: translateY(0px)
  @keyframes translateY3
    0%
      transform: translateY(0px)
    50%
      transform: translateY(-50px)
    100%
      transform: translateY(0px)