@keyframes cardDrawBack {
    0% {
      transform: scale(1, 1);
    }
    30% {
      transform: scale(1.5, 1.5) rotateY(0);
    }
    60% {
      transform: scale(1.5, 1.5) rotateY(180deg);
    }
    100% {
      transform: scale(1.5, 1.5) rotateY(180deg);
    }
  }
  
  @keyframes cardDrawFront {
    0% {
      transform: scale(1, 1) rotateY(180deg);
    }
    30% {
      transform: scale(1.5, 1.5) rotateY(180deg);
    }
    60% {
      transform: scale(1.5, 1.5) rotateY(0);
      z-index: 2;
      bottom: 0;
    }
    90% {
      transform: scale(1.5, 1.5) rotateY(0);
      z-index: 2;
      bottom: -150px;
      opacity: 1;
    }
    100% {
      transform: scale(1.5, 1.5) rotateY(0);
      z-index: 2;
      bottom: -200px;
      opacity: 0;
    }
  }
  
  @keyframes cardDrawHiddenRight {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
      right: 0;
    }
    80% {
      transform: scale(1.5, 1.5);
      right: -120px;
      opacity: 1;
    }
    100% {
      transform: scale(1.5, 1.5);
      right: -200px;
      opacity: 0;
    }
  }
  
  @keyframes cardDrawHiddenLeft {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
      left: 0;
    }
    80% {
      transform: scale(1.5, 1.5);
      left: -120px;
      opacity: 1;
    }
    100% {
      transform: scale(1.5, 1.5);
      left: -200px;
      opacity: 0;
    }
  }
  
  @keyframes cardDrawHiddenUp {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
      top: 0;
    }
    80% {
      transform: scale(1.5, 1.5);
      top: -120px;
      opacity: 1;
    }
    100% {
      transform: scale(1.5, 1.5);
      top: -200px;
      opacity: 0;
    }
  }
  
  @keyframes unoButtonInvalid {
    0% {
      background-color: none;
    }
    50% {
      background-color: red;
    }
    100% {
      background-color: none;
    }
  }
  
  @keyframes shakeHorizontal {
    0% {
      left: 0;
    }
    33% {
      left: 5px;
    }
    66% {
      left: -5px;
    }
    100% {
      left: 0;
    }
  }
  
  .drawCardAnimationBack {
    z-index: 1;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin-left: -75px;
    animation-name: cardDrawBack;
    animation-duration: 1s;
  }
  
  .drawCardBackHidden {
    transform: rotateY(180deg);
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    margin-left: -75px;
  }
  
  .drawCardAnimationHidden {
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-name: cardDrawHidden;
    animation-duration: 1.2s;
  }
  
  .drawCardAnimationFrontDown {
    transform: rotateY(180deg);
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-name: cardDrawFront;
    animation-duration: 1s;
  }
  
  .drawCardAnimationHiddenRight {
    z-index: 1;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-name: cardDrawHiddenRight;
    animation-duration: 1.2s;
  }
  
  .drawCardAnimationHiddenLeft {
    z-index: 1;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-name: cardDrawHiddenLeft;
    animation-duration: 1.2s;
  }
  
  .drawCardAnimationHiddenUp {
    z-index: 1;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation-name: cardDrawHiddenUp;
    animation-duration: 1.2s;
  }
  
  .invalid {
    animation-name: shakeHorizontal;
    animation-duration: 0.1s;
    animation-iteration-count: 5;
  }