@import "https://fonts.googleapis.com/css2?family=Coiny&family=Titan+One&display=swap";
@import "https://fonts.googleapis.com/css2?family=Nerko+One&family=Sriracha&display=swap";
@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap";
.profile-tab{--color-pink:#feecea;--color-white:#fff;--color-black:#333;--color-text-pink:#ff7882;--color-heart:#ff7882;--color-bg-letter:#fff8e4;--color-border:#daccbf;background-image:linear-gradient(var(--color-pink),var(--color-pink));width:100%;min-height:100vh;font-family:Poppins,sans-serif;font-size:16px;position:relative;overflow:hidden}.profile-tab *{box-sizing:border-box}.profile-tab #wrapper{z-index:1;background-color:#0000;background-image:linear-gradient(#0000,#0000 23%,#fff 24% 25%,#0000 26% 73%,#fff 74% 75%,#0000 76%),linear-gradient(90deg,#0000 24%,#fff 25% 26%,#0000 27% 74%,#fff 75% 76%,#0000 77%,#0000);background-size:80px 80px;height:100%;min-height:100vh;position:relative;overflow:hidden}.flag__birthday{justify-content:space-between;animation:1.5s .5s forwards translateYFlag;display:flex;transform:translateY(-200px)}@keyframes translateYFlag{to{transform:translateY(-10px)}}.flag__birthday .flag__left{transform:rotate(-10deg)translate(-20px,30px)}.flag__birthday .flag__right{transform:rotate(10deg)translate(20px,30px)scaleX(-1)}.content{width:100%;padding-top:3rem;display:flex;position:relative}.content .left,.content .right{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.content .left{width:40%}.content .right{width:60%}.left .btn{animation:2s ease-in-out 4s forwards scaleCricle;transform:scale(0)}#btn__letter{background-color:var(--color-text-pink);border:3px solid var(--color-black);cursor:pointer;z-index:2;border-radius:50px;outline:none;justify-content:center;align-items:center;margin-top:30px;padding:5px 15px;font-family:Sriracha,cursive;font-size:1rem;transition:all .5s ease-in-out;display:flex;position:relative;transform:scale(1)}#btn__letter:active{transform:scale(.7)}#btn__letter i{margin-left:5px}#btn__letter:hover{border-color:var(--color-heart);background-color:var(--color-heart);color:#fff;box-shadow:0 3px 8px #0000003d}#btn__letter:hover i{animation:1s linear infinite rotateHeart}@keyframes rotateHeart{0%,50%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}.title{perspective:1000px;flex-direction:column;justify-content:center;width:100%;font-family:Titan One,sans-serif;font-size:3rem;display:flex;position:relative}.title .happy,.title .birthday{text-shadow:4px 4px var(--color-black),-4px 4px var(--color-black),4px -4px var(--color-black),-4px -4px var(--color-black),4px 8px 0 var(--color-black);justify-content:center;font-weight:700;display:flex;position:relative}.title .happy{color:var(--color-white)}.title .happy span,.title .birthday span{opacity:0;visibility:hidden;animation:txtTranslateY .5s var(--t)forwards;transform:translateY(50px)}@keyframes txtTranslateY{to{opacity:1;visibility:visible;transform:translateY(0)}}.title .birthday{color:var(--color-text-pink)}.title .hat{z-index:-1;animation:4s 2s forwards topHat;position:absolute;top:-350px;right:45px;transform:rotate(-40deg)}@keyframes topHat{20%,30%{transform-origin:0;top:-30px;transform:rotate(-40deg)}35%,to{top:-30px;transform:rotate(0)}}.date__of__birth,.names{background-color:var(--color-text-pink);border-radius:50px;justify-content:space-around;align-items:center;margin-top:20px;font-family:Sriracha,cursive;display:flex}.date__of__birth{border:3px solid var(--color-black);z-index:-1;opacity:0;visibility:hidden;width:0;animation:4s 3s forwards dateOfBirth;position:relative;transform:translateY(-100px)}@keyframes dateOfBirth{20%,40%{opacity:1;visibility:visible;width:0;height:0;transform:translateY(0)}45%{opacity:1;visibility:visible;width:300px;height:0;transform:translateY(0)}50%,to{opacity:1;visibility:visible;width:300px;height:50px;transform:translateY(0)}}.names{border:3px solid var(--color-black);padding:0 20px;font-family:Dancing Script,cursive;position:absolute;bottom:-20px}.date__of__birth span,.names span{margin:0 40px;font-weight:700}.date__of__birth span{font-size:1.2rem}.names span{font-size:1.7rem}.right .box__account{animation:5s ease-in 2s forwards topBoxImage;position:relative;transform:translateY(700px)}@keyframes topBoxImage{to{transform:translateY(0)}}.content .right .image{border:6px solid var(--color-black);border-radius:50%;align-items:center;width:400px;height:400px;display:flex;position:relative;overflow:hidden}.content .right .image img{object-fit:cover;width:100%}.cricle{justify-content:center;align-items:center;animation:3s ease-in-out 4s forwards scaleCricle;display:flex;position:absolute;top:20px;right:50px;transform:scale(0)}@keyframes scaleCricle{0%{transform:scale(0)}10%{transform:scale(1.3)}20%{transform:scale(.7)}30%,to{transform:scale(1)}}.text__cricle{background-color:var(--color-text-pink);border:5px solid var(--color-black);border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;animation:5s linear infinite rotateCricle;display:flex}@keyframes rotateCricle{to{transform:rotate(360deg)}}.text__cricle span{color:var(--color-black);transform:rotate(calc(var(--i)*24deg));transform-origin:0 45px;text-transform:uppercase;font-family:Sriracha,cursive;font-size:.7rem;position:absolute;top:0%;left:50%}.fa-heart{color:var(--color-heart);filter:drop-shadow(0 0 3px var(--color-heart));animation:1s linear infinite scaleHeart}.cricle .fa-heart{position:absolute;transform:scale(.85)}@keyframes scaleHeart{50%{transform:scale(1.2)}}.right .balloon_one{animation:2s linear infinite balloon1;position:absolute;top:-70px;left:-70px}@keyframes balloon1{0%,50%,to{transform-origin:100% 100%;transform:rotate(0)}25%{transform-origin:100% 100%;transform:rotate(3deg)}75%{transform-origin:100% 100%;transform:rotate(-3deg)}}.right .balloon_two{z-index:-1;animation:2s linear infinite balloon2;position:absolute;top:170px;right:-65px;transform:rotate(10deg)}@keyframes balloon2{0%,50%,to{transform-origin:0 100%;transform:rotate(10deg)}25%{transform-origin:0 100%;transform:rotate(7deg)}75%{transform-origin:0 100%;transform:rotate(13deg)}}.decorate_star{background-color:var(--color-black);clip-path:polygon(0 50%,35% 35%,50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%);animation:scaleCricle 3s var(--t)forwards,scaleStar 2s 4s infinite ease-in-out;position:absolute;transform:scale(0)}.decorate_star.star1{width:20px;height:20px;top:75px;left:300px}.decorate_star.star2{width:15px;height:20px;top:35px;right:360px}.decorate_star.star3{width:14px;height:14px;top:290px;left:630px}.decorate_star.star4{width:18px;height:18px;bottom:60px;left:35px}.decorate_star.star5{width:16px;height:18px;bottom:140px;left:500px}@keyframes scaleStar{25%{transform:scale(.8)}50%{transform:scale(1.1)}}.decorate_bottom{position:absolute;bottom:-10px;right:0}.decorate_flower--one{animation:scaleCricle 3s var(--t)forwards ease-in-out;position:absolute;top:250px;left:50px;transform:scale(0)}.decorate_flower--two{animation:scaleCricle 3s var(--t)forwards ease-in-out;position:absolute;top:225px;left:540px;transform:scale(0)}.decorate_flower--three{animation:scaleCricle 3s var(--t)forwards ease-in-out;position:absolute;top:150px;right:235px;transform:scale(0)}.smiley__icon{animation:3s ease-in-out 4s forwards scaleCricle;position:absolute;bottom:180px;left:600px;transform:scale(0)}.box__letter{z-index:10;background-color:#00000080;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.box__letter.active{display:block}.box__letter .letter__border{background-color:var(--color-white);border-radius:27px;width:55vw;height:450px;padding:17px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 8px #0000003d}.letter__border .close{background-color:var(--color-white);cursor:pointer;color:#000;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 2px 8px #63636333}.letter__border .letter{background-color:var(--color-bg-letter);border-radius:10px;width:100%;height:100%;padding-top:15px}.letter__border .letter .title__letter{text-align:center;color:#000;font-family:Dancing Script,cursive;font-size:2.4rem;font-weight:700}.letter__border .letter .content__letter{width:100%;height:100%;padding-top:1.5rem;padding-bottom:70px;display:flex;position:relative}.letter__border .letter .content__letter .left{border-right:3px solid var(--color-border);width:50%;height:100%;padding:1.7rem;position:relative}.content__letter .left #heart__letter{opacity:0;width:100%}#heart__letter.animationOp{animation:1s .5s forwards opacityHeart}@keyframes opacityHeart{to{opacity:1}}.content__letter .left .heart{opacity:0;position:absolute}.content__letter .left .heart.animation{animation:scaleHeartLetter 1s var(--t)infinite ease-in-out}@keyframes scaleHeartLetter{0%{opacity:1;transform:scale(0)}10%{opacity:1;transform:scale(1.3)}20%{opacity:1;transform:scale(.7)}30%,to{opacity:1;transform:scale(1)}}.content__letter .left .heart_1{top:90px;left:30px}.content__letter .left .heart_2{top:20px;right:70px}.content__letter .left .heart_3{bottom:50px;left:145px}.content__letter .left .heart_4{top:140px;right:35px}.content__letter .right{width:50%;position:relative}.content__letter .right .love__img{opacity:0;position:absolute;top:-100px;right:20px}.love__img.animationOp{animation:1s .5s forwards opacityHeart}.content__letter .right .text__letter{color:#000;margin-top:60px;padding:20px 15px 10px;font-family:Dancing Script,cursive;font-size:1.3rem}.content__letter .right #mewmew{opacity:0;position:absolute;bottom:0;right:0}#mewmew.animationOp{animation:1s .5s forwards opacityHeart}@media screen and (max-width:658px){.flag__birthday .flag__left{transform:rotate(-10deg)translate(-119px,3px)}.flag__birthday .flag__right{transform:rotate(10deg)translate(-106px,39px)scaleX(-1)}.content{flex-direction:column;gap:25px;padding-top:2rem}.content .left,.content .right{width:100%}.title{letter-spacing:8px;font-size:1.5rem}#btn__letter{width:209px;margin-top:17px}.cricle{top:10px;right:-54px}.title .hat{right:-98px;top:-51px!important}.box__letter .letter__border{width:90vw;height:315px}.letter__border .letter .title__letter{font-size:1.4rem}.letter__border .letter .content__letter{padding-top:.7rem}.content__letter .right .text__letter{margin-top:-14px;font-size:.8rem}.content__letter .right .love__img{top:167px;right:126px}.love__img img{width:84px}.content .right .image{width:200px;height:200px}.names{padding:0 3px;bottom:-6px}.names span{font-size:1rem}.right .balloon_one{top:10px;left:-77px}.right .balloon_one img{width:76px!important}}