/***
* Datei:           memory-game.css
* Internetsite:    https://realmath.de
* Version:         3.1
* Sprache:         Cascading Style Sheets
* Autor:           Andreas Meier
* Datum:           2022-05-22
* Letzte Änderung: 2022-05-24

***/

.memcontainer{
  width: 250px;  /* 600 */
  margin:auto;
  background-color: #fbfbfb;
   border: 1px solid #b3b3b5;
   border-radius: 10px;
  }

.memtext-center {
  text-align: center;
}

.memicon-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#cardDesk > div{
   margin: 10px 5px;
   width: 50px; /* 120 */
   height: 50px;/* 120 */
   background-color: #f0f0f0; */
   border: 1px solid #b3b3b5;
   border-radius: 8px;
}

.icon {
   font-size: 33px; /* 80 */
   text-align: center;
   visibility: visible;
   opacity:100;
   width: 100%;
   height: 100%;
   cursor: pointer;
}

.disabled {
   pointer-events: none;
   cursor:wait;
}

.show {
   animation-name: rotation-icon;
   animation-duration: .5s;
   background-color:white;
   border: 1px solid #3889c4;
   border-radius: 10px;
   visibility: visible;
   opacity: 100;
}

.find {
   animation-name: guessed;
   animation-duration: .5s;
   background-color:#D8EBF5;
   border: 1px solid #3889c4;
   border-radius: 10px;
}


@keyframes guessed{
 from {
    transform: rotate(0deg);
   }
  to {
   transform: rotate(360deg);
  }
}

@keyframes rotation-icon {
   from {
        transform: perspective(300px) rotate3d(0, 1, 0, 80deg); /* 300 */
        animation-timing-function: ease-in;
   }

   50% {
        transform: perspective(300px) rotate3d(0, 1, 0, -10deg); /* 300 */
        animation-timing-function: ease-in;
   }

   to {
        transform: perspective(300px);  /* 300 */
        animation-timing-function: ease-in;
   }
}