.envelope-container{position:relative;width:100%;height:100%}.envelope-container h1,.envelope-container p{margin:0;padding:0}.envelope-container h1{font-size:2rem;font-family:Dancing Script,cursive;color:white}.envelope-container small{display:block;padding:1rem 0;font-size:.8rem;transition:opacity .33s ease;color:white}.envelope-container .letter{position:absolute;left:0;right:0;top:0;width:100%;max-width:30rem;margin:auto;perspective:60rem;z-index:1;will-change:transform}.envelope-container .side{background-color:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:2rem;will-change:transform,opacity}.envelope-container .side:first-of-type{border-radius:.5rem .5rem 0 0;box-shadow:inset 0 .75rem 2rem rgba(78,12,98,.2)}.envelope-container .side.side:nth-of-type(2){border-radius:0 0 .5rem .5rem;box-shadow:0 .3rem .3rem rgba(0,0,0,.05),inset 0 -.57rem 2rem rgba(78,12,98,.2);text-align:right}.envelope-container .envelope{position:absolute;left:0;right:0;top:0;margin:auto;will-change:transform,opacity}.envelope-container .envelope.front{width:10rem;height:6rem;border-radius:0 0 1rem 1rem;overflow:hidden;z-index:9999;opacity:0}.envelope-container .envelope.front:after,.envelope-container .envelope.front:before{position:absolute;display:block;width:12rem;height:6rem;background-color:#4e0c62;transform:rotate(30deg) translateZ(0);transform-origin:0 0;box-shadow:0 0 1rem rgba(0,0,0,.1);content:"";will-change:transform}.envelope-container .envelope.front:after{right:0;transform:rotate(-30deg) translateZ(0);transform-origin:100% 0}.envelope-container .envelope.back{top:-4rem;width:10rem;height:10rem;overflow:hidden;z-index:-9998;opacity:0;transform:translateY(-6rem) translateZ(0)}.envelope-container .envelope.back:before{display:block;width:10rem;height:10rem;background-color:#371142;border-radius:1rem;content:"";transform:scaleY(.6) rotate(45deg) translateZ(0);will-change:transform}.envelope-container .result-message{opacity:1;transition:all .3s ease;transform:translateY(9rem) translateZ(0);z-index:10;color:white;font-size:1.2rem;position:relative;will-change:transform,opacity}.envelope-container.sent .letter{animation:scaleLetter 1s cubic-bezier(.4,0,.2,1) forwards}.envelope-container.sent .side:first-of-type{transform-origin:0 100%;animation:closeLetter .66s cubic-bezier(.4,0,.2,1) forwards}.envelope-container.sent .side:first-of-type h1,.envelope-container.sent .side:first-of-type textarea{animation:fadeOutText .66s linear forwards}.envelope-container.sent .envelope{animation:fadeInEnvelope .5s cubic-bezier(.4,0,.2,1) 1.33s forwards}.envelope-container.sent .result-message{animation:showMessage .5s cubic-bezier(.4,0,.2,1) 2s forwards}.envelope-container.sent small{opacity:0}.envelope-container .centered{position:relative;margin:0 auto;min-height:300px}.envelope-container .wrapper{padding-bottom:80px}@keyframes closeLetter{0%{transform:rotateX(0deg) translateZ(0)}50%{transform:rotateX(-90deg) translateZ(0)}to{transform:rotateX(-180deg) translateZ(0)}}@keyframes fadeOutText{0%{opacity:1}49%{opacity:1}50%{opacity:0}to{opacity:0}}@keyframes fadeInEnvelope{0%{opacity:0;transform:translateY(8rem) translateZ(0)}to{opacity:1;transform:translateY(4.5rem) translateZ(0)}}@keyframes scaleLetter{0%{transform:translateZ(0) scaleX(1)}66%{transform:translateY(-8rem) scale3d(.5,.5,1)}75%{transform:translateY(-8rem) scale3d(.5,.5,1)}90%{transform:translateY(-8rem) scale3d(.3,.5,1)}97%{transform:translateY(-8rem) scale3d(.33,.5,1)}to{transform:translateY(-8rem) scale3d(.3,.5,1)}}@keyframes showMessage{0%{opacity:0;transform:translateY(4rem) translateZ(0)}to{opacity:1;transform:translateY(12rem) translateZ(0)}}@media (prefers-reduced-motion:reduce){.envelope-container.sent .envelope,.envelope-container.sent .letter,.envelope-container.sent .result-message,.envelope-container.sent .side:first-of-type,.envelope-container.sent .side:first-of-type h1,.envelope-container.sent .side:first-of-type textarea{animation-duration:.1s}.envelope-container .result-message,.envelope-container small{transition-duration:.1s}}