/* -------------------------------- 
Variables
-------------------------------- */
:root {
  --gray: #f3f2f1;
  --darkgray: #808080;
  --white: #fff;
  --black: #000;
}

.hand-wrapper {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 25%;
  left: 40%;
  animation-name: room_click;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}

@keyframes room_click {
  0% {}
  20% {
    top: 0;
    left: 25%;
  }
  40% {
    top: 0%;
    left: 45%;
  }
  60% {
    top: 30%;
    left: 25%;
  }
  80% {
    top: 30%;
    left: 45%;
  }
  100% {
    top: 50%;
    left: 35%;
  }
}

.hand {
  width: 150px;
  height: 150px;
  position: absolute;
  bottom: 0;
  right: 60px;
}

.touch {
  color: var(--white);
  text-shadow: 2px 2px 6px var(--black);
  font-size: 8vh;
  position: absolute;
  top: 0%;
  left: 43%;
  -webkit-animation: click 1.5s infinite -250ms;
  animation: click 1.5s infinite -250ms;
}

@-webkit-keyframes click {
  0% {
    -webkit-transform: rotate(-45deg) scale3d(1.1, 1.1, 1);
  }
  30% {
    -webkit-transform: rotate(-45deg) scale3d(1.0, 1.0, 1);
  }
  80% {
    -webkit-transform: rotate(-45deg) scale3d(1.0, 1.0, 1);
  }
  100% {
    -webkit-transform: rotate(-45deg) scale3d(1.1, 1.1, 1);
  }
}

@keyframes click {
  0% {
    transform: rotate(-45deg) scale3d(1.1, 1.1, 1);
  }
  30% {
    transform: rotate(-45deg) scale3d(1.0, 1.0, 1);
  }
  80% {
    transform: rotate(-45deg) scale3d(1.0, 1.0, 1);
  }
  100% {
    transform: rotate(-45deg) scale3d(1.1, 1.1, 1);
  }
}

.inball,
.outball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--darkgray);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -webkit-transform: scale3d(0.1, 0.1, 1);
  transform: scale3d(0.1, 0.1, 1);
  -webkit-animation: grow 1.5s infinite;
  animation: grow 1.5s infinite;
}

.inball {
  border: 40px solid var(--gray);
  background: transparent;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale3d(0.1, 0.1, 1);
  }
  100% {
    -webkit-transform: scale3d(1.0, 1.0, 1);
    opacity: 0;
  }
}

@keyframes grow {
  0% {
    transform: scale3d(0.1, 0.1, 1);
  }
  100% {
    transform: scale3d(1.0, 1.0, 1);
    opacity: 0;
  }
}