<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">

/* Animated keypress */

#hitCircle, #hitCircleAlt, #hitCircleRev, #hitCircleRevAlt {
    width: 24px;
    height: 24px;
    background: #b5c6cc;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    opacity :0.5;
    border-radius: 12px;
    z-index: 10;

}

#hitSquare, #hitSquareAlt, #hitSquareRev, #hitSquareRevAlt {
    width: 24px;
    height: 24px;
    background: #b5c6cc;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    opacity :0.5;
    border-radius: 4px;
    z-index: 10;
}

#hitSquareRev, #hitSquareRevAlt 
{
    
    width: 16px;
    height: 16px;
    background: #E0E0E0;
    /*border:1px solid #b5c6cc;*/
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    opacity :0.5;
    border-radius: 2px;
    z-index: 10;    
    
}

div.hideAnimation 
{
    display :none;
}

div.prepAnimation 
{
    display :block;
    opacity: 0;
    filter: alpha(opacity=0);
}

div.goAnimation 
{
    display :block;

}


div.pauseAnimation {
  animation-play-state: paused ;
  -webkit-animation-play-state: paused;
}


.hitAnimation {
  animation: animationFrames linear 0.2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames linear 0.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames linear 0.2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames linear 0.2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames linear 0.2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    opacity:0.5;
    transform:    scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0.5;
    -moz-transform:    scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -moz-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0.5;
    -webkit-transform:    scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -webkit-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0.5;
    -o-transform:    scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -o-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0.5;
    -ms-transform:    scaleX(1.00) scaleY(1.00) ;
  }
  100% {
    opacity:0;
    -ms-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}



.unhitAnimation {
  animation: animationFrames linear 0.2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: revanimationFrames linear 0.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: revanimationFrames linear 0.2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: revanimationFrames linear 0.2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: revanimationFrames linear 0.2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes revanimationFrames{
  100% {
    opacity:0;
    transform:    scaleX(0.5) scaleY(0.5) ;
  }

  0% {
    opacity:0.5;
    transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-moz-keyframes revanimationFrames{
  100% {
    opacity:0;
    -moz-transform:    scaleX(0.5) scaleY(0.5) ;
  }

  0% {
    opacity:0.5;
    -moz-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-webkit-keyframes revanimationFrames {
  100% {
    opacity:0;
    -webkit-transform:    scaleX(0.5) scaleY(0.5) ;
  }
   
  0% {
    opacity:0.5;
    -webkit-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-o-keyframes revanimationFrames {
  100% {
    opacity:0;
    -o-transform:    scaleX(0.5) scaleY(0.5) ;
  }

  0% {
    opacity:0.5;
    -o-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}

@-ms-keyframes revanimationFrames {
  100% {
    opacity:0;
    -ms-transform:    scaleX(0.5) scaleY(0.5) ;
  }
 
  0% {
    opacity:0.5;
    -ms-transform:    scaleX(2.00) scaleY(2.00) ;
  }
}</pre></body></html>