.virtual-envelope *{margin:0;padding:0;box-sizing:border-box}.virtual-envelope,.virtual-envelope *{border-radius:.5rem;transition:transform .3s ease,box-shadow .3s ease}.virtual-envelope{height:200px;width:300px;background-color:#F8FCFF;position:relative;display:flex;justify-content:center;z-index:0;cursor:pointer}.virtual-envelope .lid{position:absolute;height:100%;width:100%;border-right:150px solid transparent;border-bottom:100px solid transparent;border-left:150px solid transparent;transform-origin:top;transition:transform .25s linear}.virtual-envelope .lid.one{border-top:100px solid #6d8be6;transform:rotateX(0deg);z-index:3;transition-delay:.75s}.virtual-envelope .lid.two{border-top:100px solid #6d8be6;transform:rotateX(90deg);z-index:1;transition-delay:.5s}.virtual-envelope .envelope{position:absolute;height:100%;width:100%;border-color:transparent #f8fcff #f8fcff #e0f2ff;border-style:solid;border-width:100px 150px;z-index:3}.virtual-envelope .letter{position:absolute;top:0;width:80%;height:80%;background-color:#FFFCE9;border-radius:15px;z-index:2;transition:transform .5s;overflow:hidden;padding:20px}.virtual-envelope .letter p{text-align:center;font-size:20px;letter-spacing:-.0125em;margin-top:30px;color:#3B4049;pointer-events:auto}.virtual-envelope:hover .lid.one{transform:rotateX(90deg);transition-delay:0s}.virtual-envelope:hover .lid.two{transform:rotateX(180deg);transition-delay:.25s}.virtual-envelope:hover .letter{transform:translateY(-50px);transition-delay:.5s}.letter.clicked{animation:bounceAndExpand .5s forwards}@keyframes bounceAndExpand{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(20);opacity:0}}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);background-color:#FFFCE9;border-radius:.5rem;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.3);opacity:0;visibility:hidden;z-index:100;transition:visibility 0s,opacity .5s linear,transform .5s ease;animation:modalFadeIn .5s forwards;animation-delay:.5s}@keyframes modalFadeIn{to{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible}}.virtual-envelope:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(255,255,255,.3)}