@font-face {
  font-family: "Christmas";
  src: url("mountains-of-christmas-cyrillic.ttf");
}

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

html {
  font-family: "Christmas";
  font-size: 25px;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-clip: floralwhite;
}

.card {
  position: relative;
  width: 300px;
  aspect-ratio: 1/2;
  background-color: #b01b2e;
  color: white;
  cursor: pointer;
}

.open {
  opacity: 1;
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 2s !important;
}

.page-1,
.page-2 {
  padding: 1em;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition:
    left 0.2s,
    transform 1s,
    box-shadow 1s;
  background-color: #b01b2e;
}

.page-1 {
  display: flex;
  flex-direction: column;
  transform-origin: 0 50%;
  z-index: 2;
}

.page-1 p {
  opacity: 0;
  transform: rotateY(-180deg);
  transition: opacity 0.2s;
}

.page-1 .wish {
  margin-block: 1em auto;
}

.page-1 .from {
  align-self: flex-start;
}

.page-2 .video {
  width: 100%;
  height: 100%;
}

.card.active .page-1,
.card.active .page-2 {
  box-shadow: 0 0 1em 0 rgb(0, 0, 0, 0.5);
}

.card.active .page-1 {
  transform: rotateY(180deg);
}

.card.active .page-1 p {
  opacity: 1;
  transition: opacity 2.5s;
}

.card.active .open {
  opacity: 0;
  transition: opacity 0.2s !important;
}