@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap);.envelope{--color-:#52603c;--duration:1000ms;--shadow-width:calc(var(--envelope-width) * 0.85);--shadow-blur:15px;--envelope-width:300px;--envelope-height:175px;--envelope-clr-bg:#52603c;--envelope-clr-bg-side:#4a5837;--envelope-clr-bg-bottom:#5c6a42;--envelope-clr-bg-top:#6a7c4f;--envelope-clr-txt:#fff;--envelope-transform-hover:rotateY(180deg);--evelope-rotate-delay:calc(var(--duration) / 1);--evelope-rotate-delay-hover:0ms;--letter-clr-bg:#fff;--letter-clr-text:black;--letter-font-size:1rem;--letter-delay:0ms;--letter-delay-hover:calc(var(--duration) * 1.25);--letter-height:calc(var(--envelope-height) - 2rem);--letter-height-hover:calc(var(--envelope-height) * 1.75);--fold-rotate:rotateX(0deg);--fold-zindex-hover:0;--fold-rotate-hover:rotateX(180deg);--fold-delay:calc(var(--duration) / 2);--fold-delay-hover:calc(var(--duration) * 0.75);--front-font-size:1rem;--snowman-width:50px;--bells-width:30px;position:relative;height:var(--envelope-height);width:var(--envelope-width);perspective:1000px;cursor:pointer}@media (min-width:720px){.envelope{--envelope-width:600px;--envelope-height:350px;--letter-font-size:1.6rem;--snowman-width:130px;--bells-width:60px;--front-font-size:1.25rem}}.envelope:after{content:"";position:absolute;top:110%;left:50%;width:var(--shadow-width);height:40px;transition:var(--duration) ease-in-out;transition-delay:var(--evelope-rotate-delay);transform:var(--shadow-transform);translate:-50% 0;border-radius:50%;background:rgba(56,6,6,.4);filter:blur(var(--shadow-blur))}.envelope-animation{--envelope-transform:var(--envelope-transform-hover,0deg);--evelope-rotate-delay:var(--evelope-rotate-delay-hover);--shadow-transform:rotateY(180deg);--fold-rotate:var(--fold-rotate-hover);--fold-delay:var(--fold-delay-hover);--fold-zindex:var(--fold-zindex-hover);--letter-height:var(--letter-height-hover);--letter-delay:var(--letter-delay-hover)}.envelope-inner{position:relative;width:100%;height:100%;transition:var(--duration) ease-in-out;transition-delay:var(--evelope-rotate-delay);transform-style:preserve-3d;transform:var(--envelope-transform);display:grid}.envelope-back,.envelope-front{position:relative;grid-area:1/1;width:100%;height:100%;background-color:var(--envelope-clr-bg);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px;isolation:isolate}.envelope-front{color:var(--envelope-clr-txt);display:grid;place-content:center}.envelope-front .postage-stamp{position:absolute;top:1em;right:.5em;width:15%}.envelope-front .address{text-align:left;font-size:var(--front-font-size)}.envelope-front .address>p>span:first-child{font-family:system-ui;font-weight:200}.envelope-front .address>p>span:last-of-type{font-weight:800}.envelope-back{transform:rotateY(180deg)}.envelope-back:after{content:"";position:absolute;inset:0;z-index:3;background-image:conic-gradient(transparent 60deg,var(--envelope-clr-bg-side) 60deg 120deg,var(--envelope-clr-bg-bottom) 120deg 240deg,var(--envelope-clr-bg-side) 240deg 300deg,transparent 300deg)}.envelope-back .top-fold{position:absolute;inset:0;z-index:var(--fold-zindex,10);background-color:var(--envelope-clr-bg-top);clip-path:polygon(0 0,50% 55%,100% 0);transform:var(--fold-rotate);transform-origin:top;transition:var(--duration) ease-in-out;transition-delay:var(--fold-delay)}.letter{position:absolute;bottom:5px;left:50%;width:90%;height:var(--letter-height);transform:translateX(-50%);background:var(--letter-clr-bg);z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;transition:var(--duration) ease-in-out;transition-delay:var(--letter-delay);overflow:hidden;border:1px solid #ccc}.letter>svg.snowman{width:var(--snowman-width)}.letter svg.bells{width:var(--bells-width);color:orange}.letter p{margin:0;font-weight:700;width:32ch;color:var(--letter-clr-text)}.custom-image{width:70px;height:70px;object-fit:contain}.custom-image2{width:150px;height:150px;object-fit:contain}.highlight{display:block;margin-top:10px;font-weight:700}