@import"https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap";*,:after,:before{box-sizing:border-box;margin:0;font-family:Roboto,sans-serif}html{height:100vh;width:100vw;background-color:#1e1e1e}#__next{height:100vh;display:grid;place-items:center;font-family:Oswald,sans-serif}.card{width:36em;height:20.52em}.card button{background-color:#dce5ec;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);padding:1em 2em;border-radius:6px;border:none;font-size:medium;cursor:pointer}.card button:hover{box-shadow:inset 0 0 10px #1e1e1e}.card__content{text-align:center;position:relative;height:100%;width:100%;transition:transform 3s;transform-style:preserve-3d}.card__back,.card__front{position:absolute;top:0;bottom:0;left:0;right:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;display:grid;align-content:center}.card__front{background:repeating-linear-gradient(-45deg,#fff,#fff 20px,red 0,red 40px);display:grid;place-items:center}.card__front img{height:17.442em;width:30.6em;background-color:#dce5ec}.card__body{font-weight:var(fw-normal);font-size:1.5rem;line-height:1.6}.card__back{transform:rotateY(.5turn);color:var(--clr);background:#dce5ec;transition:all 1s ease}.card__back:before{right:0;border-color:transparent #dce5ec #dce5ec transparent;border-bottom-left-radius:20px;border-bottom-right-radius:20px;z-index:5}.card__back:after,.card__back:before{content:"";position:absolute;top:0;border-style:solid;border-width:10.26em 18em}.card__back:after{left:0;border-color:transparent transparent transparent #dce5ec;border-bottom-left-radius:20px;border-bottom-right-radius:20px;z-index:4}.card.ENVELOPE_REAR .card__content{transform:rotateY(.5turn)}.card.ENVELOPE_SEAL .seal{opacity:0;transition:all .5s ease}.card.ENVELOPE_OPEN .cover:after{transform:rotateX(180deg);transition:all 1s ease;z-index:3}.card.ENVELOPE_HIDDEN .card__back{transition:background 1s ease 4s;background:transparent}.card.ENVELOPE_HIDDEN .card__back:after,.card.ENVELOPE_HIDDEN .card__back:before,.card.ENVELOPE_HIDDEN .cover:after{transition:border-color 1s ease 4s;border-color:transparent}.card.ENVELOPE_HIDDEN .letter{animation:openEnvelope 3s ease 1s;bottom:-3.078em;height:26.676em;z-index:5;transform-style:preserve-3d}.card.CARD_FRONT .letter,.card.CARD_REAR .letter{transition:all 2s ease}.card.CARD_FRONT .letter{transform:rotateY(0turn)}.card.CARD_REAR .letter{transform:rotateY(.5turn)}.card .cover{position:absolute;box-shadow:0 3px 3px 0 rgba(0,0,0,.4)}.card .cover:after{content:"";position:absolute;left:0;top:0;border-color:#d5e0e8 transparent transparent;border-style:solid;border-width:10.26em 18em;border-bottom-left-radius:20px;border-bottom-right-radius:20px;z-index:6;transform-origin:top;transform:rotateX(0deg);transition:all 1s ease}.card .letter{position:absolute;z-index:3;bottom:1.026em;left:1.8em;width:32.4em;height:18.468em;transition:all 1s ease 1s}.card .letter__back,.card .letter__front{position:absolute;top:0;bottom:0;left:0;right:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;display:grid;align-content:center}.card .letter__front{background:bisque;place-items:center;overflow:hidden}.card .letter__front img{position:absolute;top:0}.card .letter__back{transform:rotateY(.5turn);color:var(--clr);background:#d82036;color:#fff;font-weight:500;text-align:center;font-style:italic;font-size:larger;padding:10%;gap:1.5em;display:flex;flex-direction:column;justify-content:center;align-items:center}.card .letter__back img{width:5em}.card .seal{position:absolute;width:7.2em;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6}@keyframes openEnvelope{0%{bottom:1.026em;height:18.468em;z-index:4}49%{bottom:14.364em;height:26.676em;z-index:4}51%{bottom:14.364em;height:26.676em;z-index:5}to{bottom:-3.078em;height:26.676em;z-index:5}}