@font-face {
  font-family: 'Andada';
  src: url('Andada-Regular.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Andada';
  src: url('Andada-Bold.otf');
  font-weight: bold;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
}
body {
  font-size: 0.78vw;
}
body > footer {
  font-family: Andada, Serif;
  display: block;
  text-align: center;
}
body > footer a {
  text-decoration: none;
  color: #C00;
}
.cards.packed .card:not(.booster) .front,
.cards.packed .card:not(.booster) .back {
  box-shadow: none;
}
.cards.hand {
  position: relative;
  width: 20em;
  height: 32em;
  margin: 5em auto;
}
.cards.hand .card {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 300% 0;
  transition: transform 0.5s;
}
.cards.hand .card:hover .front,
.cards.hand .card:hover .back {
  top: -1em;
}
.card {
  display: inline-block;
  position: relative;
  width: 20em;
  height: 32em;
  margin: 0.5em;
  cursor: pointer;
  font-family: Andada, Serif;
}
.card .front,
.card .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0.2em 0.2em 0.5em 0em rgba(0, 0, 0, 0.5);
  border-radius: 1em;
  padding: 1em;
  background: #FFF;
  background-size: cover;
  transition: transform 0.5s, top 0.3s;
  backface-visibility: hidden;
}
.card .front {
  transform: rotateY(0deg);
}
.card .back {
  transform: rotateY(180deg);
}
.card.flipped .front {
  transform: rotateY(180deg);
}
.card.flipped .back {
  transform: rotateY(0deg);
}
.card.packed .front,
.card.packed .back {
  box-shadow: none;
}
.card:hover {
  z-index: 1;
}
.card header {
  font-size: 2.1em;
  font-weight: bold;
}
.card hr {
  margin: 1em auto;
  border: none;
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.3);
}
.card summary {
  font-size: 1.2em;
}
.card summary mark {
  background: none;
  color: #C00;
}
.card summary .icon {
  display: block;
  font-size: 20em;
  line-height: 1em;
  text-align: center;
}
.card.deck-major-arcana summary .icon {
  display: none;
}
.card footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1em;
  background: rgba(255, 255, 255, 0.9);
}
.card footer .icon {
  display: block;
  font-size: 1.6em;
  text-align: center;
}
.card footer .deck {
  opacity: 0.4;
}
.card footer .value {
  float: right;
  font-weight: bold;
}
.card.booster .back {
  background-image: url(../images/cards/back.jpg);
}
.card.deck-major-arcana.value-I .back {
  background-image: url(../images/cards/1.jpg);
}
.card.deck-major-arcana.value-II .back {
  background-image: url(../images/cards/2.jpg);
}
.card.deck-major-arcana.value-III .back {
  background-image: url(../images/cards/3.jpg);
}
.card.deck-major-arcana.value-IV .back {
  background-image: url(../images/cards/4.jpg);
}
.card.deck-major-arcana.value-V .back {
  background-image: url(../images/cards/5.jpg);
}
.card.deck-major-arcana.value-VI .back {
  background-image: url(../images/cards/6.jpg);
}
.card.deck-major-arcana.value-VII .back {
  background-image: url(../images/cards/7.jpg);
}
.card.deck-major-arcana.value-VIII .back {
  background-image: url(../images/cards/8.jpg);
}
.card.deck-major-arcana.value-IX .back {
  background-image: url(../images/cards/9.jpg);
}
.card.deck-major-arcana.value-X .back {
  background-image: url(../images/cards/10.jpg);
}
.card.deck-major-arcana.value-XI .back {
  background-image: url(../images/cards/11.jpg);
}
.card.deck-major-arcana.value-XII .back {
  background-image: url(../images/cards/12.jpg);
}
.card.deck-major-arcana.value-XIII .back {
  background-image: url(../images/cards/13.jpg);
}
.card.deck-major-arcana.value-XIV .back {
  background-image: url(../images/cards/14.jpg);
}
.card.deck-major-arcana.value-XV .back {
  background-image: url(../images/cards/15.jpg);
}
.card.deck-major-arcana.value-XVI .back {
  background-image: url(../images/cards/16.jpg);
}
.card.deck-major-arcana.value-XVII .back {
  background-image: url(../images/cards/17.jpg);
}
.card.deck-major-arcana.value-XVIII .back {
  background-image: url(../images/cards/18.jpg);
}
.card.deck-major-arcana.value-XIX .back {
  background-image: url(../images/cards/19.jpg);
}
.card.deck-major-arcana.value-XX .back {
  background-image: url(../images/cards/20.jpg);
}
.card.deck-major-arcana.value-XXI .back {
  background-image: url(../images/cards/21.jpg);
}
.card.suit-coins .suit,
.card.suit-cups .suit {
  color: #C00;
}