@keyframes upthenscale{0%{transform:translateY(250px)}50%{transform:translateY(0)}60%{height:100px;width:90px;transform:translateY(0)}to{height:250px;width:100%;transform:translateY(0)}}@keyframes scalethendown{0%{height:250px;width:100%;transform:translateY(0)}50%{height:100px;width:90px;transform:translateY(0)}60%{transform:translateY(0)}to{transform:translateY(250px)}}@keyframes waitfade{0%,50%{opacity:0}to{opacity:1}}@keyframes wiggle{0%{transform:translateY(310px) rotate(0)}25%{transform:translateY(310px) rotate(2deg)}50%{transform:translateY(310px) rotate(0)}75%{transform:translateY(310px) rotate(-2deg)}to{transform:translateY(310px) rotate(0)}}.letter{margin:150px auto;max-width:350px;height:375px;position:relative;overflow:hidden;display:block}.letter--open .paper{animation-name:upthenscale;animation-duration:.6s;animation-fill-mode:forwards}.letter--close .paper{animation-name:scalethendown;animation-duration:.4s;animation-fill-mode:forwards}.letter--open .paper-content{animation-name:waitfade;animation-duration:1.5s;animation-fill-mode:forwards}.letter--open .envelope{animation:pause}.paper-content{color:#545454;font-family:Love Light,cursive;font-weight:400;font-style:normal;font-size:1.5rem;padding:50px;opacity:0}.paper{height:50px;width:90px;background:#f1f0c3;transform:translateY(250px);margin:0 auto;transition:transform .3s .1s ease;border-radius:2px;position:relative}.envelope{width:94px;height:60px;background:#f36363;position:relative;margin:auto;z-index:2;cursor:pointer;border-radius:3px;transition:box-shadow .3s ease;transform:translateY(310px);animation:wiggle .3s .2s infinite}.envelope:hover{animation:pause}.envelope:hover .envelope-paper{transform:translateY(-20px)}.envelope:hover .envelope-flap{transform:translateY(-45px)}.envelope:hover .envelope-detail:after{visibility:hidden}.envelope-paper{height:50px;width:90px;background:#f1f0c3;transform:translateY(0);margin:0 auto;transition:transform .3s .1s ease;border-radius:2px;position:absolute;border:2px solid transparent}.letter--open .envelope-paper{visibility:hidden}.letter--open .envelope-detail:after{visibility:hidden}.letter--close .envelope-paper{visibility:hidden}.envelope-flap{content:"";width:0;height:0;border-left:45px solid transparent;border-right:45px solid transparent;border-bottom:45px solid #f36363;display:block;position:absolute;left:0;right:0;top:0;margin:auto;transform:translateY(0)}.letter--open .envelope-flap{transform:translateY(-45px)}.letter--open .envelope-detail{border-top:2px solid #e25b5b}.envelope-detail{overflow:hidden;height:100%;width:100%;display:block;position:absolute;background:#f36363;border-top:2px solid transparent}.envelope-detail:before{content:"";width:70px;height:70px;background:#f36363;display:inline-block;display:block;position:absolute;left:0;right:0;top:30px;margin:auto;transform:rotate(45deg);border:4px solid #e65454}.envelope-detail:after{content:"";width:70px;height:70px;background:#f36363;display:block;position:absolute;left:0;right:0;top:-45px;margin:auto;transform:rotate(45deg);border:4px solid #e65454}.envelope__fold{height:25px;width:86px;background:#f36363;border:4px solid #e65454;display:block;position:absolute;bottom:30px;left:0;right:0;margin:auto;transition:all .3s ease;border-radius:3px}@media only screen and (min-device-width: 428px) and (max-device-width: 926px) and (-webkit-min-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait){.letter{margin:50px auto;max-width:300px;height:300px}.envelope{width:150px;height:80px}}.grid{display:grid;justify-items:center}.grid p{margin:0}.justify-self-start{justify-self:start}.justify-self-center{justify-self:center}.items-center{align-self:center}.justify-self-end{justify-self:end}.button-yes{margin:.5em;background-color:#f36363;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer}.button-yes:hover{background-color:#e25b5b}.calendar-btn{margin-top:1em}.second-letter--open .second-paper{animation-name:upthenscale;animation-duration:.6s;animation-fill-mode:forwards}.second-letter--open .second-paper-content{animation-name:waitfade;animation-duration:1.5s;animation-fill-mode:forwards}.second-letter--open{margin:150px auto;transform:translateY(-150px);max-width:350px;height:250px;position:relative;overflow:hidden;display:block}.second-paper-content{color:#545454;font-family:Love Light,cursive;font-weight:400;font-style:normal;font-size:1.75rem;padding:70px;opacity:0}.second-paper{height:50px;width:90px;background:#f1f0c3;transform:translateY(250px);margin:0 auto;transition:transform .3s .1s ease;border-radius:2px}@tailwind base;@tailwind components;@tailwind utilities;