:root{--envelope-color: #f5f5f5;--envelope-shadow: rgba(0, 0, 0, .2);--bg-color: #ffed93;--transition-speed: .6s;--flap-open-time: .8s;--envelope-remove-time: 1.6s;--card-slide-out-time: 3s}::selection{background-color:#fff2b3;color:#000}body,html{margin:0;padding:0;width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;font-family:EB Garamond,serif;background-color:var(--bg-color)}#container{width:100%;min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}#envelope-wrapper{position:relative;width:85vw;max-width:500px;aspect-ratio:132 / 182;display:flex;justify-content:center;align-items:center;perspective:1500px;margin:auto}#envelope-wrapper:not(.is-open){cursor:pointer}#envelope-back,#envelope-top-flap,#envelope-other-flaps{position:absolute;top:0;left:0;width:100%;height:100%}#envelope-back{z-index:1;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}#envelope-top-flap,#envelope-other-flaps{z-index:3;pointer-events:none}#card{position:absolute;width:calc(178 / 182 * 100%);aspect-ratio:128 / 178;z-index:2}#card svg,#envelope-back svg,#envelope-top-flap svg,#envelope-other-flaps svg{width:100%;height:100%;display:block;overflow:visible}@keyframes openFlap{0%,49.9%{filter:brightness(1)}50%{filter:brightness(.8)}to{transform:rotateX(180deg);filter:brightness(.98)}}#top-flap{transform-origin:top;transform-box:fill-box}@keyframes peakFlap{0%,20%,50%,80%,to{transform:rotateX(0)}40%{transform:rotateX(10deg)}60%{transform:rotateX(5deg)}}#top-flap:not(.is-open){animation:peakFlap 4s infinite}#envelope-wrapper.is-open #top-flap{animation:openFlap var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) forwards}@keyframes layerBehind{0%,49.9%{z-index:3}50%,to{z-index:1}}@keyframes slideDown{0%{transform:translateY(0)}50%{opacity:1}99.9%{height:auto;display:auto}to{transform:translateY(160vh);opacity:0;height:0;display:none}}#envelope-wrapper.is-open #envelope-top-flap{animation:layerBehind var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) forwards,slideDown var(--envelope-remove-time) ease-in var(--flap-open-time) forwards}#envelope-wrapper.is-open #envelope-other-flaps,#envelope-wrapper.is-open #envelope-back{animation:slideDown var(--envelope-remove-time) ease-in var(--flap-open-time) forwards}@keyframes slideOut{0%{transform:translateY(0)}30%{transform:scale(1) translateY(-15%)}60%{transform:scale(1.1) translateY(0);filter:drop-shadow(11px 11px 14px rgba(0,0,0,.2))}to{transform:scale(1) translateY(0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}}#envelope-wrapper.is-open #card{animation:slideOut var(--card-slide-out-time) ease-in-out var(--flap-open-time) forwards}