@import"https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap";body{margin:0;background-color:#1d0000;justify-content:center;align-items:center;padding:0}.container{margin-top:20vh;margin-inline:6vh;max-width:420px;text-align:center;line-height:1.4;background-image:url(https://www.transparenttextures.com/patterns/paper-fibers.png);background-color:#d4c8b0;padding:20px;border:2px solid #d4a373;border-radius:10px;box-shadow:0 4px 8px #00000026,inset 0 0 5px #0000000d}.mea-culpa-regular{font-family:Mea Culpa,cursive;font-weight:400;font-style:normal}.bg1,.bg2,.bg3{display:inline-block;color:#2b2b2b;opacity:0;transition:opacity 2s ease,filter 2.5s ease;font-size:1.5rem;padding:2px 5px;margin-inline:-2px;font-family:Mea Culpa,cursive;text-shadow:1px 1px 1px rgba(0,0,0,.1)}.visible{opacity:1;animation:float 3s ease-in-out infinite}.bg1.visible{animation-delay:0s}.bg2.visible{animation-delay:.2s}.bg3.visible{animation-delay:.4s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px)}}.letter-screen{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#1b140f;overflow:hidden;z-index:100}.letter-screen.opened{transition:opacity 2s ease;opacity:0;pointer-events:none}.letter-container{position:relative;width:90%;max-width:600px;height:90%;max-height:300px}.letter-envelope{position:absolute;top:0;left:0;width:100%;height:100%;background:#f8f4ef;box-shadow:0 8px 20px #00000080;z-index:1;transition:transform 1s ease,opacity 1s ease}.letter-flap{position:absolute;top:0;left:0;width:100%;height:50%;z-index:2;transform-origin:bottom center;transition:transform 1s ease}.opened.letter-flap{transform:translateY(-300%);transform-origin:bottom center}.wax-seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10vh;height:10vh;max-width:80px;max-height:80px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c62828,#8e0000);border:4px solid #5a0000;box-shadow:0 4px 8px #0006,inset 0 2px 6px #fff3;cursor:pointer;z-index:3}.opened.letter-envelope{transform:translateY(100%)}.letter-hint{position:fixed;width:100%;text-align:center;bottom:2rem;left:50%;transform:translate(-50%);font-size:3rem;color:#a10000;opacity:0;pointer-events:none;animation:fadeIn .5s ease forwards,breathe 5s ease-in-out .5s infinite alternate}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes breathe{0%{text-shadow:0 0 5px rgba(153,0,0,.5);color:#a10000}50%{text-shadow:0 0 15px rgb(134,1,1);color:#fff6f6}to{text-shadow:0 0 5px rgba(207,0,0,.5);color:#a10000}}