@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  perspective: 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0.25) 100%), white;
}

main {
  margin-inline: 1rem;
}

.title {
  position: relative;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  font-family: "comic sans ms", sans-serif;
}
.title::after {
  content: "";
  position: absolute;
  inset: -4px;
  background-color: #22bbff;
  z-index: -2;
  -webkit-animation: title-bg-animate 1s infinite ease-in-out;
          animation: title-bg-animate 1s infinite ease-in-out;
}

@-webkit-keyframes title-bg-animate {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  51% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

@keyframes title-bg-animate {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  51% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
.deck {
  margin-top: 2rem;
  display: flex;
}
.deck > * + * {
  margin-left: -8rem;
}

.card {
  min-width: 245px;
  min-height: 350px;
  display: grid;
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 250ms, margin, 250ms;
}
.card > * {
  display: grid;
  transition: transform 250ms;
  box-sizing: border-box;
  border-radius: 10px;
}
.card > * img {
  grid-area: 1/-1;
  place-self: end left;
  -o-object-fit: cover;
     object-fit: cover;
}
.card > * .character {
  position: relative;
  left: 25px;
  width: 223px;
  bottom: 95px;
  height: 438px;
  z-index: 0;
}
.card > * .top-img {
  position: relative;
  z-index: 0;
}
.card > * p {
  grid-area: 1/-1;
  padding: 3rem 2.5rem;
  place-self: end;
  margin: 0;
  color: white;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 2em;
  z-index: 1;
}
.card .front {
  grid-area: 1/-1;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  transform: rotateY(0turn);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .back {
  grid-area: 1/-1;
  text-align: center;
  transform: rotateY(0.5turn);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card:hover {
  transform: translateY(-1rem);
}
.card:hover ~ .card {
  transform: translateX(8rem);
}

.card-flip .front {
  transform: rotateY(0.5turn);
}
.card-flip .back {
  transform: rotateY(1turn);
}