.card {
      width: 135px;
      height: 175px;
      background: radial-gradient(circle,rgb(252, 245, 111) 0%, rgb(196, 131, 35) 80%, rgb(151, 49, 5) 100%);
      background-size:cover;
      color: black;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      font-size: 0.5 em;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px;
      padding: 1em;
      color:black;
      font-family:'preahvihear', sans-serif;
      position: relative;
      transition: transform 0.3s;


    }

     .card2 {
      width: 135px;
      height: 175px;
      background: radial-gradient(circle,rgba(222, 253, 255, 1) 0%, rgba(44, 215, 245, 1) 61%, rgb(3, 73, 215) 100%);
      background-size:cover;
      color: black;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      font-size: 0.5 em;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-radius: 8px;
      padding: 1em;
      color:black;
      font-family:'preahvihear', sans-serif;
      position: relative;
      transition: transform 0.3s;

    }

  .firstPhraseMove{
    animation: firstPhrase 3s ease-in-out 0s 1 normal forwards;
  }
  
  .secondPhraseMove{
    animation: secondPhrase 3s ease-in-out 0s 1 normal forwards;
  }

.card:hover{
    transform: scale(1.1);
}

.card2:hover{
    transform: scale(1.1);
}
.flipped {
        background: radial-gradient(circle,rgb(191, 191, 191) 0%, rgb(130, 133, 130) 61%, rgb(68, 69, 68) 100%);
      pointer-events: none;
    }

.matched {
    background: radial-gradient(circle,rgb(132, 202, 92) 0%, rgb(51, 228, 51) 61%, rgb(2, 144, 31) 100%);

      cursor: default;
    }


@keyframes firstPhrase {
    0% {
        transform: translateY(-100px) translateX(-500px) rotateZ(30deg);
    }
    80% {
        transform: translateY(0px) translateX(0px) rotateZ(15deg);
        
    }
    90%{
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(1.3);

    }
     95%{
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(0.8);

    }
    100% {
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(1);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }
}



@keyframes secondPhrase {
    0% {
        transform: translateY(100px) translateX(+500px) rotateZ(-30deg);
    }
    80% {
        transform: translateY(0px) translateX(0px) rotateZ(-15deg);

    }
    90%{
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(1.3);

    }
     95%{
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(0.8);

    }
    100% {
        transform: translateY(0px) translateX(0px) rotateZ(0deg) scale(1);
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    }
}