html,
body {
  height: 100%;
  overflow: hidden;
  background: transparent;
  background: url('../assets/ladyhand.gif'), url('../assets/heart.gif'), url('../assets/space2.gif');
}

.catbox {
  color: #f03f35;
  cursor: crosshair;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: 'Modak', cursive !important;
  text-shadow: 1px 1px 0 #000000;
  z-index: 20;
  background: transparent;
  background: url('../assets/honeybooboo.gif') no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

@-webkit-keyframes rainbowdropshadow {
  0% {
    text-shadow: 1px 1px 0 #FF0000, 2px 2px 0 #FF7F00, 3px 3px 0 #FFFF00;
  }
  8% {
    text-shadow: 1px 1px 0 #FF7F00, 2px 2px 0 #FFFF00, 3px 3px 0 #7FFF00;
  }
  16% {
    text-shadow: 1px 1px 0 #FFFF00, 2px 2px 0 #7FFF00, 3px 3px 0 #00FF00;
  }
  25% {
    text-shadow: 1px 1px 0 #7FFF00, 2px 2px 0 #00FF00, 3px 3px 0 #00FF7F;
  }
  33% {
    text-shadow: 1px 1px 0 #00FF00, 2px 2px 0 #00FF7F, 3px 3px 0 #00FFFF;
  }
  41% {
    text-shadow: 1px 1px 0 #00FF7F, 2px 2px 0 #00FFFF, 3px 3px 0 #007FFF;
  }
  50% {
    text-shadow: 1px 1px 0 #00FFFF, 2px 2px 0 #007FFF, 3px 3px 0 #0000FF;
  }
  58% {
    text-shadow: 1px 1px 0 #007FFF, 2px 2px 0 #0000FF, 3px 3px 0 #7F00FF;
  }
  66% {
    text-shadow: 1px 1px 0 #0000FF, 2px 2px 0 #7F00FF, 3px 3px 0 #FF00FF;
  }
  75% {
    text-shadow: 1px 1px 0 #7F00FF, 2px 2px 0 #FF00FF, 3px 3px 0 #FF007F;
  }
  83% {
    text-shadow: 1px 1px 0 #FF00FF, 2px 2px 0 #FF007F, 3px 3px 0 #FF0000;
  }
  91% {
    text-shadow: 1px 1px 0 #FF007F, 2px 2px 0 #FF0000, 3px 3px 0 #FF7F00;
  }
  100% {
    text-shadow: 1px 1px 0 #FF0000, 2px 2px 0 #FF7F00, 3px 3px 0 #FFFF00;
  }
}

.item, .items .cell-phone, .items .laptop, .items .plant-right, .items .plant-left {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  height: 50vh;
  position: absolute;
  width: 50vh;
  z-index: 30;
}

.container {
  display: table;
  height: 100%;
  margin: 0 auto;
  max-width: 800px;
  width: 80%;
}
.container .title {
  display: table-cell;
  font-size: 80px;
  letter-spacing: .15em;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  font-family: 'Modak', cursive !important;
  text-shadow: 1px 1px 0 #000000;
  z-index: 125;
  /*-webkit-animation: rainbowdropshadow .5s infinite;
  animation: rainbowdropshadow .5s infinite;*/
}
.container .line {
  display: inline-block;
  margin: 0 15px;
}

.items .cell-phone {
  background-image: url("../assets/cuteinnocent.gif");
  right: 5%;
  top: 5%;
}
.items .laptop {
  background-image: url("../assets/brokecute.gif");
  left: 5%;
  top: 5%;
}
.items .plant-right {
  background-image: url("../assets/confident.gif");
  bottom: 5%;
  right: 5%;
}
.items .plant-left {
  background-image: url("../assets/mess.gif");
  bottom: 5%;
  left: 5%;
}
.items .mad-props {
  bottom: 10%;
  /*left: 50%;*/
  font-size: 30px;
  margin: auto;
  left: 0;
  right: 0;
  position: absolute;
  letter-spacing: .15em;
  line-height: 0.5;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  font-family: 'Modak', cursive !important;
  color: white;
  -webkit-animation: rainbowdropshadow .5s infinite;
  animation: rainbowdropshadow .5s infinite;
  z-index: 26;
}
.items .mad-props:before {
  content: "Which Adult Swim Characters Are You?";
}

.cathands {
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}
.cathands .cathands-inner {
  height: 1160px;
  left: 50%;
  margin-left: -200px;
  margin-top: 60px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 400px;
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
  -moz-transition: -moz-transform 1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
}
.cathands .left-paw-wrapper,
.cathands .right-paw-wrapper {
  height: 860px;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 387px;
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.175, 0.885, 0.425, 4);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.175, 0.885, 0.425, 4);
  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.425, 4);
}
.cathands .left-paw-wrapper[data-boost='true'],
.cathands .right-paw-wrapper[data-boost='true'] {
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -moz-transition: -moz-transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: transform 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.cathands .left-paw-wrapper {
  left: -400px;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  -webkit-transform-origin: 125px 1075px;
  -moz-transform-origin: 125px 1075px;
  -ms-transform-origin: 125px 1075px;
  -o-transform-origin: 125px 1075px;
  transform-origin: 125px 1075px;
}
.cathands .left-paw-wrapper[data-boost='true'] {
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
.cathands .right-paw-wrapper {
  right: -400px;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
  -webkit-transform-origin: 262px 1075px;
  -moz-transform-origin: 262px 1075px;
  -ms-transform-origin: 262px 1075px;
  -o-transform-origin: 262px 1075px;
  transform-origin: 262px 1075px;
}
.cathands .right-paw-wrapper[data-boost='true'] {
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}
.cathands .left-paw,
.cathands .right-paw {
  background: url("../assets/hands.png") no-repeat;
  display: block;
  height: 860px;
  width: 387px;
}
.cathands .left-paw .paw,
.cathands .right-paw .paw {
  background: url("../assets/hands.png") no-repeat;
  display: block;
  height: 300px;
  position: absolute;
  top: -185px;
  width: 140px;
}
.cathands .left-paw {
  background-position: 0 -300px;
  -webkit-animation: left-arm-idle 1.5s ease-in-out 0s infinite alternate;
  -moz-animation: left-arm-idle 1.5s ease-in-out 0s infinite alternate;
  animation: left-arm-idle 1.5s ease-in-out 0s infinite alternate;
  -webkit-transform: rotate(9deg);
  -moz-transform: rotate(9deg);
  -ms-transform: rotate(9deg);
  -o-transform: rotate(9deg);
  transform: rotate(9deg);
  -webkit-transform-origin: 125px 1075px;
  -moz-transform-origin: 125px 1075px;
  -ms-transform-origin: 125px 1075px;
  -o-transform-origin: 125px 1075px;
  transform-origin: 125px 1075px;
}
.cathands .left-paw .paw {
  background-position: 0 0;
  left: 275px;
  -webkit-animation: left-paw 2.25s ease-in-out infinite alternate;
  -moz-animation: left-paw 2.25s ease-in-out infinite alternate;
  animation: left-paw 2.25s ease-in-out infinite alternate;
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
  -webkit-transform-origin: 55px 255px;
  -moz-transform-origin: 55px 255px;
  -ms-transform-origin: 55px 255px;
  -o-transform-origin: 55px 255px;
  transform-origin: 55px 255px;
}
.cathands .right-paw {
  background-position: -390px -300px;
  -webkit-animation: right-arm-idle 2s ease-in-out 0s infinite alternate;
  -moz-animation: right-arm-idle 2s ease-in-out 0s infinite alternate;
  animation: right-arm-idle 2s ease-in-out 0s infinite alternate;
  -webkit-transform: rotate(-9deg);
  -moz-transform: rotate(-9deg);
  -ms-transform: rotate(-9deg);
  -o-transform: rotate(-9deg);
  transform: rotate(-9deg);
  -webkit-transform-origin: 262px 1075px;
  -moz-transform-origin: 262px 1075px;
  -ms-transform-origin: 262px 1075px;
  -o-transform-origin: 262px 1075px;
  transform-origin: 262px 1075px;
}
.cathands .right-paw .paw {
  background-position: -150px 0;
  left: -25px;
  -webkit-animation: right-paw 2.25s ease-in-out infinite alternate;
  -moz-animation: right-paw 2.25s ease-in-out infinite alternate;
  animation: right-paw 2.25s ease-in-out infinite alternate;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  transform: rotate(-4deg);
  -webkit-transform-origin: 85px 255px;
  -moz-transform-origin: 85px 255px;
  -ms-transform-origin: 85px 255px;
  -o-transform-origin: 85px 255px;
  transform-origin: 85px 255px;
}
.cathands.hide .cathands-inner {
  -webkit-transform: translate3d(0, 110%, 0);
  -moz-transform: translate3d(0, 110%, 0);
  -ms-transform: translate3d(0, 110%, 0);
  -o-transform: translate3d(0, 110%, 0);
  transform: translate3d(0, 110%, 0);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  transition-delay: 0s;
}
.cathands.hide .left-paw,
.cathands.hide .right-paw {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}
.cathands.hide .left-paw .paw,
.cathands.hide .right-paw .paw {
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

@-webkit-keyframes left-arm-idle {
  0% {
    -webkit-transform: translateY(0) rotate(9deg);
  }
  100% {
    -webkit-transform: translateY(3%) rotate(10deg);
  }
}
@-moz-keyframes left-arm-idle {
  0% {
    -moz-transform: translateY(0) rotate(9deg);
  }
  100% {
    -moz-transform: translateY(3%) rotate(10deg);
  }
}
@keyframes left-arm-idle {
  0% {
    -webkit-transform: translateY(0) rotate(9deg);
    -moz-transform: translateY(0) rotate(9deg);
    -ms-transform: translateY(0) rotate(9deg);
    -o-transform: translateY(0) rotate(9deg);
    transform: translateY(0) rotate(9deg);
  }
  100% {
    -webkit-transform: translateY(3%) rotate(10deg);
    -moz-transform: translateY(3%) rotate(10deg);
    -ms-transform: translateY(3%) rotate(10deg);
    -o-transform: translateY(3%) rotate(10deg);
    transform: translateY(3%) rotate(10deg);
  }
}
@-webkit-keyframes left-paw {
  0% {
    -webkit-transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(6deg);
  }
}
@-moz-keyframes left-paw {
  0% {
    -moz-transform: rotate(2deg);
  }
  100% {
    -moz-transform: rotate(6deg);
  }
}
@keyframes left-paw {
  0% {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);
  }
}
@-webkit-keyframes right-arm-idle {
  0% {
    -webkit-transform: translateY(0) rotate(-9deg);
  }
  100% {
    -webkit-transform: translateY(2%) rotate(-10deg);
  }
}
@-moz-keyframes right-arm-idle {
  0% {
    -moz-transform: translateY(0) rotate(-9deg);
  }
  100% {
    -moz-transform: translateY(2%) rotate(-10deg);
  }
}
@keyframes right-arm-idle {
  0% {
    -webkit-transform: translateY(0) rotate(-9deg);
    -moz-transform: translateY(0) rotate(-9deg);
    -ms-transform: translateY(0) rotate(-9deg);
    -o-transform: translateY(0) rotate(-9deg);
    transform: translateY(0) rotate(-9deg);
  }
  100% {
    -webkit-transform: translateY(2%) rotate(-10deg);
    -moz-transform: translateY(2%) rotate(-10deg);
    -ms-transform: translateY(2%) rotate(-10deg);
    -o-transform: translateY(2%) rotate(-10deg);
    transform: translateY(2%) rotate(-10deg);
  }
}
@-webkit-keyframes right-paw {
  0% {
    -webkit-transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(-7deg);
  }
}
@-moz-keyframes right-paw {
  0% {
    -moz-transform: rotate(-2deg);
  }
  100% {
    -moz-transform: rotate(-7deg);
  }
}
@keyframes right-paw {
  0% {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  100% {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
}