*{margin:0;padding:0}h1{font-family:Solitreo}body{height:100vh;width:100vw;background:#fee2e9;font-family:Pangolin,cursive;font-size:1vmin;display:flex;align-items:center;justify-content:center}.grid-container{display:grid;grid-template-rows:auto auto;place-items:center;grid-gap:8rem;gap:8rem}.container{position:relative;top:0}.envelope{position:relative;background:#f980a1;height:30vmin;width:47.9vmin}.card{position:absolute;background:#f3f0f0;height:27vmin;width:45vmin;display:flex;flex-direction:column;justify-content:center;align-items:center;left:1.5vmin;top:0;animation:slide-rev .8s ease-out}.message{position:static;top:5vmin}.cover{position:absolute;height:0;width:0;border-bottom:15vmin solid #fba7bd;border-left:24vmin solid transparent;border-right:24vmin solid transparent;top:15vmin;z-index:3}.cover:after{border-left:24.5vmin solid #fcbbcc;left:-24vmin}.cover:after,.cover:before{position:absolute;content:"";border-bottom:15vmin solid transparent;border-top:15vmin solid transparent;top:-15vmin}.cover:before{border-right:24.5vmin solid #fcbbcc;left:-.5vmin}.lid{position:absolute;height:0;width:0;border-top:15vmin solid #f980a1;border-left:24vmin solid transparent;border-right:24vmin solid transparent;top:0;transform-origin:top;animation:open-rev 2s}.container:hover .lid{animation:open .5s;animation-fill-mode:forwards}.container:hover .card{animation:slide .2s;animation-delay:.5s;animation-fill-mode:forwards}.shadow{top:3vmin;border-radius:50%;opacity:.7;height:2vmin;width:48vmin;background:#e8c5d0}.heart,.shadow{position:relative}.heart{width:6vmin;height:5vmin;top:7vmin;left:-1vmin}.heart:after,.heart:before{position:absolute;content:"";left:2.5vmin;top:-7vmin;width:2.5vmin;height:4vmin;background:#f40b4a;border-radius:2.5vmin 2.5vmin 0 0;transform:rotate(-45deg);transform-origin:0 100%;z-index:0}.heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%}.audio-container{display:center;justify-content:center;align-items:center}@keyframes open{to{transform:rotatex(180deg)}}@keyframes slide{to{transform:translatey(-19vmin);z-index:2}}@keyframes open-rev{0%{transform:rotatex(-180deg)}}@keyframes slide-rev{0%{transform:translatey(-15vmin)}}.audio-player{width:300px;height:50px;overflow:hidden}