.envelope-wrapper-inline{justify-content:center;align-items:center;width:min(100%,360px);height:200px;display:flex;position:relative;overflow:visible}.envelope{cursor:pointer;width:min(100%,360px);height:200px;position:relative}.envelope-body{width:200px;height:150px;transition:all .5s;position:absolute}.body{z-index:2;filter:drop-shadow(-4px 0 #000);border-top:0 solid #0000;border-bottom:100px solid #ffd600;border-left:200px solid #0000;border-right:0 solid #0000;position:absolute;bottom:0}.top-fold{transform-origin:50% 0;z-index:2;filter:drop-shadow(0 4px #000);border:100px solid #0000;border-top:50px solid #ffd600;border-bottom-width:0;transition:transform .5s .5s,z-index .25s .5s;position:absolute;top:50px}.back-fold{z-index:0;background-color:#ffd600;border:4px solid #000;width:200px;height:100px;position:absolute;bottom:0}.left-fold{z-index:2;filter:drop-shadow(4px 0 #000);border:50px solid #0000;border-left:100px solid #ffd600;border-right-width:0;position:absolute;bottom:0}.letter{z-index:1;background-color:#fff;border:4px solid #000;width:160px;height:60px;padding:15px;transition:all .5s .25s;position:absolute;bottom:0;left:20px;overflow:hidden;box-shadow:6px 6px #000}.letter-body{background:repeating-linear-gradient(45deg,#0057ff,#0057ff 8px,#0000 8px 18px);width:100%;height:10px;margin-bottom:12px}.letter-content-text{color:#000;max-height:260px;font-size:11px;line-height:1.5;font-family:var(--font-body), sans-serif;padding-right:5px;font-weight:700;overflow-y:auto}.shadow{background:radial-gradient(#00000040,#0000,#0000);border-radius:50%;width:400px;height:30px;transition:all .5s;position:absolute;top:200px;left:50%;transform:translate(-50%)}.envelope:hover .envelope-body{transform:translateY(50px)}.envelope:hover .top-fold{z-index:0;transition:transform .5s,z-index .25s;transform:rotateX(180deg)}.envelope:hover .letter{height:180px}.envelope:hover .shadow{width:250px}