.card-scene-top {
    height: 260px;
    width: 158px;
    perspective: 600px;
    -webkit-animation: cardAppear 2.4s forwards;
          animation: cardAppear 2.4s forwards;
}

.card-scene-bottom {
    height: 260px;
    width: 158px;
    perspective: 600px;
    -webkit-animation: cardAppearBottom 2.4s forwards;
          animation: cardAppearBottom 2.4s forwards;
}

@-webkit-keyframes cardAppear {
  0% {
    transform: rotate3d(0, 0, 1, 15deg) translate3d(0, -100vh, 0);
  }
  30% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  65% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg) scale3d(1.05, 1.05, 1);
  }
}

@keyframes cardAppear {
  0% {
    transform: rotate3d(0, 0, 1, 15deg) translate3d(0, -100vh, 0);
  }
  30% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  65% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg) scale3d(1.05, 1.05, 1);
  }
}

@-webkit-keyframes cardAppearBottom {
  0% {
    transform: rotate3d(0, 0, 1, 15deg) translate3d(0, +100vh, 0);
  }
  30% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  65% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg) scale3d(1.05, 1.05, 1);
  }
}

@keyframes cardAppearBottom {
  0% {
    transform: rotate3d(0, 0, 1, 15deg) translate3d(0, +100vh, 0);
  }
  30% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  65% {
    transform: rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg) scale3d(1.05, 1.05, 1);
  }
}

.card {
  height: 100%;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transform-origin: center;
}
.card.card--flipped {
  -webkit-animation: cardFlip 0.275s forwards linear;
          animation: cardFlip 0.275s forwards linear;
}
.card.card--unflip {
  -webkit-animation: cardUnFlip 0.275s forwards linear;
          animation: cardUnFlip 0.275s forwards linear;
}

@-webkit-keyframes cardFlip {
  0% {
    transform: rotateZ(0deg) rotateY(180deg);
  }
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
}

@keyframes cardFlip {
  0% {
    transform: rotateZ(0deg) rotateY(180deg);
  }
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
}
@-webkit-keyframes cardUnFlip {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(180deg);
  }
}
@keyframes cardUnFlip {
  0% {
    transform: rotateZ(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateZ(-10deg) rotateY(90deg);
  }
  100% {
    transform: rotateZ(0deg) rotateY(180deg);
  }
}
.card-backing {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
  background: url(/media/card-back.png);
  background-size: contain;
}

.card-face {
  position: absolute;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  /* box-shadow: 0 0 3px 2px #4e4e4e; */
  height: 260px;
  width: 158px;
  /* border-radius: 9px; */
  /* border: 0.5rem solid var(--color-bone); */
}

.card-front {
  grid-template-rows: 4.4rem 1fr auto;
  position: relative;
  display: grid;
  grid-template-rows: 3;
  background-color: var(--color-bone);
  background-size: contain;
}

#card-1 .card-front{
    background: url(/media/card-front-1.svg);

}
#cardu-1{
    transform: rotate(-10deg);
}

#card-2 .card-front{
    background: url(/media/card-front-2.svg);
}

#cardu-2{transform: rotate(10deg);}
#cardu-2 .card-scene{margin-bottom:30px;}


#card-3 .card-front{
    background: url(/media/card-front-3.svg);
}

#cardu-3{
    margin-top: -30px;
    transform: rotate(-10deg);
}

#card-4 .card-front{
    background: url(/media/card-front-4.svg);
}

#cardu-4{transform: rotate(10deg);}
#cardu-4 .card-scene{margin-bottom:30px;}

#card-5 .card-front{
    background: url(/media/card-front-5.svg);
}

#cardu-5{transform: rotate(10deg);}
#cardu-5 .card-scene{margin-bottom:10px;margin-left: 10px;}

#card-6 .card-front{
    background: url(/media/card-front-6.svg);
}

#cardu-6{transform: rotate(-15deg);}
#cardu-6 .card-scene{margin-bottom:20px;margin-left: -10px;}

#card-7 .card-front{
    background: url(/media/card-front-7.svg);
}

#cardu-7{transform: rotate(15deg);}
#cardu-7 .card-scene{margin-bottom:0px;margin-left: -50px;}

#card-8 .card-front{
    background: url(/media/card-front-8.svg);
}

#cardu-8{transform: rotate(-25deg);}
#cardu-8 .card-scene{margin-bottom:10px;margin-left: 0px;}

#card-9 .card-front{
    background: url(/media/card-front-9.svg);
}

.main-pane {
  overflow: hidden;
  position: relative;
}
/* .main-pane:before {
  content: "";
  position: absolute;
  top: -42rem;
  left: -32rem;
  height: 69.5rem;
  width: 100rem;
  background: repeating-conic-gradient(from 90deg, var(--color-main-lighten2) 0 25deg, var(--color-bone) 0 35deg, var(--color-main) 0 40deg, var(--color-bone) 0 47deg, var(--color-main-lighten) 0 50deg, var(--color-bone) 0 55deg, var(--color-main) 0 127deg, var(--color-bone) 0 132deg, var(--color-main-lighten) 0 135deg, var(--color-bone) 0 140deg, var(--color-main) 0 145deg, var(--color-bone) 0 155deg, var(--color-main-lighten2) 0 360deg);
  border-radius: 50%;
} */
.main-pane img.slugger {
  margin-top: -4rem;
  -webkit-clip-path: polygon(24% 33%, 50% 14.5%, 54% 15%, 62% 17%, 70% 14%, 73% 18%, 72.5% 20%, 62% 24%, 64% 36%, 60% 40%, 61% 45%, 70% 60%, 69.5% 64.5%, 63% 65%, 63% 61%, 51% 54%, 44% 65%, 36% 62%, 40% 42%, 31% 36%, 25.5% 37%);
          clip-path: polygon(24% 33%, 50% 14.5%, 54% 15%, 62% 17%, 70% 14%, 73% 18%, 72.5% 20%, 62% 24%, 64% 36%, 60% 40%, 61% 45%, 70% 60%, 69.5% 64.5%, 63% 65%, 63% 61%, 51% 54%, 44% 65%, 36% 62%, 40% 42%, 31% 36%, 25.5% 37%);
}

@media screen and (min-width: 370px) {
  html {
    font-size: 62.5%;
  }
}