tile_game.css

body{
  text-align: center;
}
body img{
  text-align: center;
}
body div{
  text-align: center;
}

span{
  font-size: 2em;
  color: #FF0000;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
span#comment{
  color: #4CAF50;
  display: none;
}

.card {
  position: relative;
  float: left;
  height: 150px;
  width: 150px;
  margin: 0px;
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
  background-color: #ff5078;
}

.card__back {
  background-color: #FFFFFF;
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.card.effect__click.flipped .card__front {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}
.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}