body {
  width: calc(100vw - 4em);
  height: calc(100vh - 4em);
  position: relative;
  border-width: 2em;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#dcafd8), to(#b4dce6)) 1 1;
  -webkit-border-image: linear-gradient(#dcafd8, #b4dce6) 1 1;
       -o-border-image: linear-gradient(#dcafd8, #b4dce6) 1 1;
          border-image: -webkit-gradient(linear, left top, left bottom, from(#dcafd8), to(#b4dce6)) 1 1;
          border-image: linear-gradient(#dcafd8, #b4dce6) 1 1;
  cursor: url("http://infinitemiledetroit.com/images/Buried_Treasure_(A)_Conceptual_Rap_with_Doc_Waffles/two_hearts_emoji.png"), auto;
}

.layers {
  cursor: url("http://emoticonstool.com/wp-content/uploads/2015/11/emoji_slack/revolving_hearts.png"), crosshair;
  width: 400px;
  height: 400px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.layers:hover .squares > li {
  -webkit-animation-name: wobble;
          animation-name: wobble;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
}

.layer-1,
.layer-2,
.layer-3,
.layer-4 {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
          transform: rotateX(45deg) rotateZ(45deg);
  z-index: 4;
}

.layer-2 {
  top: 1.2em;
  z-index: 3;
}

.layer-3 {
  top: 2.4em;
  z-index: 2;
}

.layer-4 {
  top: 3.6em;
  z-index: 1;
}

.squares {
  width: 450px;
}

.square-1, .square-2, .square-3, .square-4, .square-5, .square-6, .square-7, .square-8, .square-9, .square-10, .square-11, .square-12, .square-13, .square-14, .square-15, .square-16, .square-17, .square-18, .square-19, .square-20, .square-21, .square-22, .square-23, .square-24, .square-25, .square-26, .square-27, .square-28, .square-29, .square-30, .square-31, .square-32, .square-33, .square-34, .square-35, .square-36 {
  width: 100px;
  height: 100px;
  margin-left: 25px;
  margin-top: 25px;
  float: left;
}

.square-1 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc36a1), to(#a1b9e6));
  background: linear-gradient(#dc36a1, #a1b9e6);
  -webkit-animation-delay: 0.7166674805s;
          animation-delay: 0.7166674805s;
}

.square-2 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcc1ca), to(#ff23e6));
  background: linear-gradient(#dcc1ca, #ff23e6);
  -webkit-animation-delay: 1.0728582755s;
          animation-delay: 1.0728582755s;
}

.square-3 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc00a7), to(#7fe9e6));
  background: linear-gradient(#dc00a7, #7fe9e6);
  -webkit-animation-delay: 0.8401882459s;
          animation-delay: 0.8401882459s;
}

.square-4 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dca264), to(#e940e6));
  background: linear-gradient(#dca264, #e940e6);
  -webkit-animation-delay: 1.4061696564s;
          animation-delay: 1.4061696564s;
}

.square-5 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc8af3), to(#ff95e6));
  background: linear-gradient(#dc8af3, #ff95e6);
  -webkit-animation-delay: 1.4718381947s;
          animation-delay: 1.4718381947s;
}

.square-6 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc827c), to(#a43be6));
  background: linear-gradient(#dc827c, #a43be6);
  -webkit-animation-delay: 0.0943700558s;
          animation-delay: 0.0943700558s;
}

.square-7 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc0081), to(#7be0e6));
  background: linear-gradient(#dc0081, #7be0e6);
  -webkit-animation-delay: 0.2230919257s;
          animation-delay: 0.2230919257s;
}

.square-8 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc83fb), to(#7da5e6));
  background: linear-gradient(#dc83fb, #7da5e6);
  -webkit-animation-delay: 0.8009635291s;
          animation-delay: 0.8009635291s;
}

.square-9 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc00fa), to(#ffb2e6));
  background: linear-gradient(#dc00fa, #ffb2e6);
  -webkit-animation-delay: 1.167617109s;
          animation-delay: 1.167617109s;
}

.square-10 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc14c4), to(#d0cde6));
  background: linear-gradient(#dc14c4, #d0cde6);
  -webkit-animation-delay: 0.992243372s;
          animation-delay: 0.992243372s;
}

.square-11 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc89b4), to(#f0a1e6));
  background: linear-gradient(#dc89b4, #f0a1e6);
  -webkit-animation-delay: 0.2925199165s;
          animation-delay: 0.2925199165s;
}

.square-12 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc55ae), to(#ff7de6));
  background: linear-gradient(#dc55ae, #ff7de6);
  -webkit-animation-delay: 0.5760063923s;
          animation-delay: 0.5760063923s;
}

.square-13 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc6bd0), to(#ff1ee6));
  background: linear-gradient(#dc6bd0, #ff1ee6);
  -webkit-animation-delay: 1.4265126433s;
          animation-delay: 1.4265126433s;
}

.square-14 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcc3cd), to(#ff97e6));
  background: linear-gradient(#dcc3cd, #ff97e6);
  -webkit-animation-delay: 0.9491488454s;
          animation-delay: 0.9491488454s;
}

.square-15 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcc176), to(#ff47e6));
  background: linear-gradient(#dcc176, #ff47e6);
  -webkit-animation-delay: 0.9252949902s;
          animation-delay: 0.9252949902s;
}

.square-16 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc1765), to(#ff78e6));
  background: linear-gradient(#dc1765, #ff78e6);
  -webkit-animation-delay: 0.7164552806s;
          animation-delay: 0.7164552806s;
}

.square-17 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcbd66), to(#e1ffe6));
  background: linear-gradient(#dcbd66, #e1ffe6);
  -webkit-animation-delay: 0.582865152s;
          animation-delay: 0.582865152s;
}

.square-18 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcbfcc), to(#92f3e6));
  background: linear-gradient(#dcbfcc, #92f3e6);
  -webkit-animation-delay: 0.1514507432s;
          animation-delay: 0.1514507432s;
}

.square-19 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc00d5), to(#de22e6));
  background: linear-gradient(#dc00d5, #de22e6);
  -webkit-animation-delay: 0.3899815177s;
          animation-delay: 0.3899815177s;
}

.square-20 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc9ac3), to(#e397e6));
  background: linear-gradient(#dc9ac3, #e397e6);
  -webkit-animation-delay: 1.1250107699s;
          animation-delay: 1.1250107699s;
}

.square-21 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcb2d3), to(#b3ffe6));
  background: linear-gradient(#dcb2d3, #b3ffe6);
  -webkit-animation-delay: 1.3460201077s;
          animation-delay: 1.3460201077s;
}

.square-22 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc0074), to(#ffffe6));
  background: linear-gradient(#dc0074, #ffffe6);
  -webkit-animation-delay: 0.2101626309s;
          animation-delay: 0.2101626309s;
}

.square-23 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc5693), to(#d04fe6));
  background: linear-gradient(#dc5693, #d04fe6);
  -webkit-animation-delay: 0.8991143502s;
          animation-delay: 0.8991143502s;
}

.square-24 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc00b8), to(#ffbbe6));
  background: linear-gradient(#dc00b8, #ffbbe6);
  -webkit-animation-delay: 1.3474850137s;
          animation-delay: 1.3474850137s;
}

.square-25 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dcc7ed), to(#ff91e6));
  background: linear-gradient(#dcc7ed, #ff91e6);
  -webkit-animation-delay: 1.8911789637s;
          animation-delay: 1.8911789637s;
}

.square-26 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc699e), to(#ff36e6));
  background: linear-gradient(#dc699e, #ff36e6);
  -webkit-animation-delay: 1.5872390635s;
          animation-delay: 1.5872390635s;
}

.square-27 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dccbab), to(#ffa3e6));
  background: linear-gradient(#dccbab, #ffa3e6);
  -webkit-animation-delay: 0.0053077312s;
          animation-delay: 0.0053077312s;
}

.square-28 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc8ff7), to(#ff28e6));
  background: linear-gradient(#dc8ff7, #ff28e6);
  -webkit-animation-delay: 1.9358004043s;
          animation-delay: 1.9358004043s;
}

.square-29 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc7b6e), to(#cb83e6));
  background: linear-gradient(#dc7b6e, #cb83e6);
  -webkit-animation-delay: 1.7403873146s;
          animation-delay: 1.7403873146s;
}

.square-30 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc1169), to(#fe8ee6));
  background: linear-gradient(#dc1169, #fe8ee6);
  -webkit-animation-delay: 1.5718907899s;
          animation-delay: 1.5718907899s;
}

.square-31 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc8d7b), to(#ff4be6));
  background: linear-gradient(#dc8d7b, #ff4be6);
  -webkit-animation-delay: 0.0132623939s;
          animation-delay: 0.0132623939s;
}

.square-32 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc009f), to(#8062e6));
  background: linear-gradient(#dc009f, #8062e6);
  -webkit-animation-delay: 1.0549934219s;
          animation-delay: 1.0549934219s;
}

.square-33 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc5de8), to(#f965e6));
  background: linear-gradient(#dc5de8, #f965e6);
  -webkit-animation-delay: 1.0159450754s;
          animation-delay: 1.0159450754s;
}

.square-34 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc418e), to(#ffa7e6));
  background: linear-gradient(#dc418e, #ffa7e6);
  -webkit-animation-delay: 0.0395886634s;
          animation-delay: 0.0395886634s;
}

.square-35 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc536a), to(#d4c5e6));
  background: linear-gradient(#dc536a, #d4c5e6);
  -webkit-animation-delay: 1.9031339651s;
          animation-delay: 1.9031339651s;
}

.square-36 {
  background: -webkit-gradient(linear, left top, left bottom, from(#dc0070), to(#ffe6e6));
  background: linear-gradient(#dc0070, #ffe6e6);
  -webkit-animation-delay: 1.5937607858s;
          animation-delay: 1.5937607858s;
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  50% {
    -webkit-transform: skewX(10deg);
            transform: skewX(10deg);
  }
  100% {
    -webkit-transform: skewX(-10deg) skewZ(-10deg);
            transform: skewX(-10deg) skewZ(-10deg);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: skewX(0);
            transform: skewX(0);
  }
  50% {
    -webkit-transform: skewX(10deg);
            transform: skewX(10deg);
  }
  100% {
    -webkit-transform: skewX(-10deg) skewZ(-10deg);
            transform: skewX(-10deg) skewZ(-10deg);
  }
}