body {
  background-image: url(../src/bg.jpg);
}

#mainBoard {
  -webkit-order: #999 1px solid;
  -ms-order: #999 1px solid;
  order: #999 1px solid;
  width: 800px;
  height: 600px;
  padding: 24px;
  margin: 0px auto;
}

#mainBoard > div {
  background: url(../src/card.jpg) no-repeat;
  border: #000 1px solid;
  width: 130px;
  height: 130px;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 30px;
  margin-left: 34px;
  font-size: 90px;
  font-family: 'Playfair Display', serif;

  cursor: pointer;
  text-align: center;
}

#myIcon {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  text-align: center;
  font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
}

/* Icon Forward */
.hvr-icon-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
}
.hvr-icon-forward .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-duration: 0.1s;
  transition-duration: 0.1s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}