styles.css

.ting {
  border: black solid;
  font-size: 3.75em;
  font-weight: bold;
  border-radius: 10em;
  cursor: default;
  border-width: .15em;
  padding: 0;
  margin: 1.5%;
  width: 47%;
  height: 47%;
  animation: floatBreathe 7s linear infinite;
}

@keyframes floatBreathe {
  25% {
    transform: scale(0.99, 0.99) translateY(.04em);
  }
  50% {
    transform: scale(1, 1) translateX(.04em);
  }
  75% {
    transform: scale(1.01, 1.01) translateY(-.04em);
  }
  50% {
    transform: scale(1, 1) translateX(-.04em);
  }
}

.boingting {
  animation: boing .3s linear;
}
@keyframes boing {
  30% {
    transform: scale(0.8, 0.8);
  }
  80% {
    transform: scale(1.05, 1.05);
  }
}

#cont {
  position: absolute;
  text-align: center;
}

#scoreInner {
  padding: 0 .2em;
}

#pc {
  width: 20%;
  height: 20%;
  top: 40%;
  left: 40%;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(#eee, #999);
  padding: .15em 0;
  border-width: .15em;
  animation: floatBreathe 7s linear infinite;
}

#pa {
  position: absolute;
  top: 0px;
  width: 300%;
  height: 100%;
  left: -100%;
  transition: left .5s;
}

#pi {
  float: left;
  width: 33.333%;
  height: 100%;
  background: linear-gradient(#7e7, #191);
}

#pf {
  float: right;
  width: 33.333%;
  height: 100%;
  background: linear-gradient(#e77, #911);
}

#pt {
  position: absolute;
  top: 0px;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 3em;
}
.swellp {
  animation: swell .3s linear;
}
@keyframes swell {
  50% {
    transform: scale(1.2, 1.2);
  }
}