*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}


@font-face {
  font-family: 'CCComicrazy Bold Italic';
  src: url('fonts/CCFaceFront Bold Italic.ttf');
}
img[src="svg/background.svg"] {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 400px;
  transition: transform 1s linear;
}
#stamp {
  position: absolute;
  top: 110px;
  left: 31px;
  width: 103px;
  transition: transform 1s linear;
}
p0, p1, p2, p3 {
  font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic;
  font-size: 20px;
  position: absolute;
  color: black;
  transition: transform .58s linear;
}
p0 {
  top: 123px;
  left: 154px;
}

p1 {
  top: 147px;
  left: 154px;
}

p2 {
  top: 122px;
  left: 152px;
  color: white;
}
p3 {
  top: 146px;
  left: 152px;
  color: white;
}

.card  {
  transition: transform .54s linear;
}
.card.display {
  animation: slideDown .54s linear 1s 1 forwards;
}
.card.display.hold {
  transform: translateY(100px);
}
.card.display.slideUp {
  animation: slideUp .54s linear 1s 1 forwards;
}
@keyframes slideDown {
  0% {
    transform: translateY(0);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
  50% {
    transform: translateY(100px);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
  100% {
    transform: translateY(100px);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
}
@keyframes slideUp {
  0% {
    transform: translateY(100px);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
  50% {
    transform: translateY(100px);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
  100% {
    transform: translateY(0);
    font-family: 'CCComicrazy Bold Italic', CCComicrazy Bold Italic; /* add font-family property */
  }
}