.wrapper {
  width: 900px;
  margin: 0 auto; }
  .wrapper .gameBoard {
    border: 1px solid blue;
    border-radius: 10px;
    display: none;
    text-align: center;
    background: url("../assets/img/BGviolet.png") no-repeat center center;
    background-size: cover; }

.startGame {
  margin: 0 auto; }

.name {
  margin: 0 auto;
  text-align: center; }

.gameTile {
  display: inline-block;
  margin: 10px 20px;
  list-style: none; }

li{
  display: inline-flex;
}

.flipImage {
  display: flex;
  width: 150px;
  height: 150px;
}
.flipImage:hover{
  animation: shake 3s ease;
}

  @keyframes rotation {
    0% {transform: rotateY(0);}
    100% {transform: rotateY(180deg);}
  }
  @keyframes opacityAnimation{

    0%  {opacity : 0; }
    100%{opacity : 1; }
  }
  @keyframes opacityAnimationReversed{
  
    0%  {opacity : 1; }
    100%{opacity : 0; }
  }
  @keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}