@tailwind base;@tailwind components;@tailwind utilities;.boxMail{position:fixed;background:transparent;width:100vw;height:100vh;opacity:1;top:0;display:flex;justify-content:center;align-items:center;transform:scale(1);visibility:visible;transition:all .5s;z-index:100000000}.boxMail.active{opacity:1;visibility:visible}.boxMail .boxMail-container{position:relative;width:750px;height:500px;margin:0;-webkit-perspective:2000px;perspective:2000px;transition:all .5s;box-shadow:-1px -1px 5px #0006}.boxMail .boxMail-container .card1,.boxMail .boxMail-container .card2{position:absolute;width:100%;height:100%;top:0;left:0}.boxMail .boxMail-container .card1{background:linear-gradient(to right,#ff7eb9,#ffb6e6 63%);color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:left;transition:all 1s cubic-bezier(.7,1.7,.7,1)}.boxMail .boxMail-container .card1 .userImg{position:relative;width:80px;height:80px;background-color:#fff;border-radius:50%;overflow:hidden;border:2px solid white;cursor:pointer;margin-bottom:20px}.boxMail .boxMail-container .card1 .userImg img{position:absolute;object-fit:cover;width:100%;height:100%}.boxMail .boxMail-container .card1 h3{font-family:Dancing Script,cursive;font-size:clamp(1.5rem,4vw,2.5rem);text-transform:uppercase;width:100%;text-align:center;line-height:1.5;letter-spacing:.2em;transform:rotate(-5deg);text-shadow:0 0 8px #fff,0 0 8px #e11d48;margin:0 auto;color:#fff}.boxMail .boxMail-container .card2{background:linear-gradient(to right,#ff7eb9,#ffb6e6 63%);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:left;transition:all 1s;z-index:0}.boxMail .boxMail-container .card2 .card2-content{width:100%;height:100%;position:relative;background-color:#fff;transition:all 1s;overflow:hidden;font-family:Inter,serif;color:#d291bc;text-shadow:none}.boxMail .boxMail-container:hover .card1{transform:rotateY(-140deg)}.boxMail .boxMail-container:hover .card2-content{transform:translate(20px,20px);box-shadow:-1px -1px 5px #0006}.boxMail .boxMail-container .card2 h3{font-family:Dancing Script,cursive;padding:20px 0 10px 60px;opacity:0;visibility:hidden;font-size:25px;text-shadow:0 0 8px red}.boxMail .boxMail-container .card2:hover h3{animation:texth3 3s forwards;animation-delay:2s;transition:1s}@keyframes texth3{0%{opacity:1;visibility:visible;padding:20px 0 10px 60px}to{opacity:1;visibility:visible;padding:20px 0 10px 152px}}.boxMail .boxMail-container .card2 h2{font-family:Dancing Script,cursive;font-size:17px;padding:0 20px;text-indent:20px;color:#fff;opacity:1;transition:none;animation:none;text-align:center;line-height:1.5;margin:0 auto;word-break:break-word}.boxMail .boxMail-container .card2:hover h2{animation:none;transition:none}.boxMail .boxMail-container .card2 .card2-content .imageCute2{position:absolute;top:5px;left:20px;opacity:0;transition:1s}.boxMail .boxMail-container .card2 .card2-content:hover .imageCute2{animation:cute3 1s linear infinite,cute4 3s 2s forwards;animation-delay:2s;transition:1s}@keyframes cute3{0%{opacity:1;transform:rotate(0)}25%{opacity:1;transform:rotate(5deg)}50%{opacity:1;transform:rotate(0)}75%{opacity:1;transform:rotate(-5deg)}to{opacity:1;transform:rotate(0)}}@keyframes cute4{0%{left:20px}to{left:100px}}.boxMail .boxMail-container .card2 .card2-content .imageCute2 img{width:40px}.boxMail .fa-xmark{position:fixed;top:0;right:0;font-size:38px;padding:16px 32px;cursor:pointer;color:#e11d48;z-index:10000000000000000}@media (max-width: 900px){.boxMail .boxMail-container{flex-direction:column;width:98vw;height:auto;min-width:0;min-height:0;padding:0;max-width:98vw;max-height:98vh}.boxMail .boxMail-container .card1,.boxMail .boxMail-container .card2,.boxMail .boxMail-container .card2 .card2-content{width:100%;left:0}.boxMail .boxMail-container .card1 h3{font-size:clamp(1.2rem,6vw,2rem)}.boxMail .boxMail-container .card2 h2{font-size:17px;padding:0 20px;text-indent:20px}}@media (max-width: 600px){.boxMail .boxMail-container{flex-direction:column;width:100vw;height:auto;min-width:0;min-height:0;padding:0;max-width:100vw;max-height:100vh}.boxMail .boxMail-container .card1,.boxMail .boxMail-container .card2,.boxMail .boxMail-container .card2 .card2-content{width:100%;left:0}.boxMail .boxMail-container .card1 h3{font-size:clamp(1rem,8vw,1.5rem)}.boxMail .boxMail-container .card2 h2{font-size:17px;padding:0 20px;text-indent:20px}}