:root{--heightWidthAbsoluteRatio: calc(339 / 633);--maxWidth: 633px;--envelopeWrapperWidth: Min(75vw, var(--maxWidth));--maxHeight: calc(var(--envelopeWrapperWidth) * var(--heightWidthAbsoluteRatio));--halfWidth: Min(calc(var(--envelopeWrapperWidth) / 2), var(--maxHeight));--halfHeight: Min(calc(var(--halfWidth) * var(--heightWidthAbsoluteRatio)), var(--maxHeight));--letterMaxHeight: Min( 40vh , var(--maxHeight))}.wrapper{border-radius:10px;aspect-ratio:633/339;width:var(--envelopeWrapperWidth);background-color:#00587c;position:relative;display:flex;justify-content:center;z-index:0}.lid{border-radius:10px;position:absolute;height:100%;width:100%;top:0;left:0;border-right:var(--halfWidth) solid transparent;border-bottom:var(--halfHeight) solid transparent;border-left:var(--halfWidth) solid transparent;transform-origin:top;transition:transform .25s linear}.lid.one{box-shadow:0 -1px 2px 2px #d79574;border-radius:10px;border-top:calc(var(--halfHeight) + 2px) solid #003449;border-bottom:solid #ffffff;transform:rotateX(0);z-index:3;transition-delay:.75s}.lid.two{top:4px;border-radius:10px;border-top:var(--halfHeight) solid #00587c;transform:rotateX(90deg);z-index:1;transition-delay:.5s}.envelope{box-shadow:2px 2px 2px #d79574,-2px 2px 2px #d79574,2px 2px 2px #d79574;border-radius:10px;position:absolute;height:100%;width:100%;top:0;left:0;border-top:var(--halfHeight) solid transparent;border-right:var(--halfWidth) solid #00587c;border-bottom:var(--halfHeight) solid #00587c;border-left:var(--halfWidth) solid #00587c;z-index:3;pointer-events:none}.letter{position:absolute;top:0;width:80%;height:var(--letterMaxHeight);padding-bottom:50px;background-color:#fff;border-radius:15px;z-index:2;transition:.5s;overflow-y:scroll}.letter p{text-align:justify}.lid.one.open{transform:rotateX(90deg);transition-delay:0s}.lid.two.open{transform:rotateX(180deg);transition-delay:.25s}.letter.open{transform:translateY(-50%);transition-delay:.5s;clip:rect(0,var(--maxWidth),var(--letterMaxHeight),0)}body{margin:0}