@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";html{height:100%;width:100%}body{position:relative;font-size:16px;margin:0;padding:0;height:100%;width:100%;overflow:hidden}#root{height:100%;width:100%}*{padding:0;margin:0;box-sizing:border-box}:root{--color-pink: #feecea;--color-white: #fff;--color-black: #333;--color-text-pink: #FF7882;--color-heart: #FF7882;--color-bg-letter: #fff8e4;--color-border: #DACCBF}html{height:100%}body{position:relative;font-size:16px;margin:0;padding:0;height:100%;background-image:linear-gradient(var(--color-pink),var(--color-pink))}#wrapper{position:relative;background-color:transparent;background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 26%,transparent 27%,transparent 74%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 26%,transparent 27%,transparent 74%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 76%,transparent 77%,transparent);min-height:100vh;height:100%;width:100%;background-size:80px 80px;overflow:hidden;z-index:1}.flag__birthday{display:flex;justify-content:space-between;transform:translateY(-200px);animation:translateYFlag 1.2s 1.5s forwards}@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%;position:relative;display:flex;padding-top:8rem;max-width:1400px;margin:0 auto}.content .left,.content .right{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.content .left{width:40%}.content .right{width:60%}.left .btn{transform:scale(0);animation:scaleCricle 2s 9.5s forwards ease-in-out}#btn__letter{position:relative;margin-top:30px;background-color:var(--color-text-pink);outline:none;padding:5px 15px;font-size:1rem;border-radius:50px;border:3px solid var(--color-black);font-family:Sriracha,cursive;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:var(--color-black);transform:scale(1);transition:all .5s ease-in-out}#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:#0000003d 0 3px 8px}#btn__letter:hover i{animation:rotateHeart 1s infinite linear}#btn__letter .mail{color:inherit}@keyframes rotateHeart{0%,50%,to{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}.title{position:relative;width:100%;display:flex;justify-content:center;font-family:Titan One,sans-serif;font-size:3rem;flex-direction:column;perspective:1000px}.title .happy,.title .birthday{position:relative;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);font-weight:700;display:flex;justify-content:center}.title .happy{color:var(--color-white)}.title .happy span,.title .birthday span{transform:translateY(50px);opacity:0;visibility:hidden;animation:txtTranslateY .5s var(--t) forwards}@keyframes txtTranslateY{to{transform:translateY(0);opacity:1;visibility:visible}}.title .birthday{color:var(--color-text-pink)}.title .hat{position:absolute;right:45px;top:-500px;transform:rotate(-40deg);z-index:-1;animation:topHat 2.5s 4s forwards ease;opacity:0}@keyframes topHat{0%{opacity:0}10%{opacity:1}20%,30%{opacity:1;top:-30px;transform-origin:left;transform:rotate(-40deg)}35%,to{opacity:1;top:-30px;transform:rotate(0)}}.date__of__birth,.name{display:flex;justify-content:space-around;align-items:center;background-color:var(--color-text-pink);border-radius:50px;margin-top:20px;font-family:Sriracha,cursive}.date__of__birth{border:3px solid var(--color-black);position:relative;transform:translateY(-100px) scale(.1);z-index:-1;opacity:0;visibility:hidden;width:50px;height:50px;min-height:50px;background-color:var(--color-black);animation:dateOfBirth 2s 5s forwards;overflow:hidden}@keyframes dateOfBirth{20%,40%{width:50px;transform:translateY(0) scale(.1);opacity:1;visibility:visible;background-color:var(--color-black)}41%{background-color:var(--color-text-pink)}45%{transform:translateY(0) scaleY(.2);opacity:1;visibility:visible;width:300px;background-color:var(--color-text-pink)}50%,to{transform:translateY(0) scaleY(1);opacity:1;visibility:visible;width:300px;background-color:var(--color-text-pink)}}.name{position:absolute;padding:0 20px;bottom:-20px;border:3px solid var(--color-black);font-family:Dancing Script,cursive}.date__of__birth span,.name span{font-weight:700;margin:0 40px}.date__of__birth span{font-size:1.2rem}.name span{font-size:1.7rem}.right .box__account{position:relative;transform:translateY(700px);animation:topBoxImage 5s 4s forwards ease-in}@keyframes topBoxImage{to{transform:translateY(0)}}.content .right .image{position:relative;width:400px;height:400px;border-radius:50%;overflow:hidden;display:flex;align-items:center;border:6px solid var(--color-black)}.content .right .image img{width:100%;object-fit:cover}.cricle{position:absolute;top:20px;right:50px;display:flex;justify-content:center;align-items:center;transform:scale(0);animation:scaleCricle 2s 9.5s forwards ease-in-out;cursor:pointer;transition:transform .3s ease}.cricle:hover{transform:scale(1.1)}.cricle:active{transform:scale(.95)}@keyframes scaleCricle{0%{transform:scale(0)}10%{transform:scale(1.3)}20%{transform:scale(.7)}30%,to{transform:scale(1)}}.text__cricle{width:100px;height:100px;background-color:var(--color-text-pink);border-radius:50%;border:5px solid var(--color-black);display:flex;justify-content:center;align-items:center;animation:rotateCricle 5s linear infinite}@keyframes rotateCricle{to{transform:rotate(360deg)}}.text__cricle span{top:0%;left:50%;position:absolute;color:var(--color-black);transform:rotate(calc(var(--i) * 24deg));transform-origin:0 45px;font-family:Sriracha,cursive;text-transform:uppercase;font-size:.7rem}.fa-heart{color:var(--color-heart);filter:drop-shadow(0 0 3px var(--color-heart));animation:scaleHeart 1s infinite linear}.cricle .fa-heart{position:absolute;transform:scale(.85)}@keyframes scaleHeart{50%{transform:scale(1.2)}}.right .balloon_one{position:absolute;top:-70px;left:-70px;animation:balloon1 2s infinite linear}@keyframes balloon1{0%,50%,to{transform-origin:bottom right;transform:rotate(0)}25%{transform-origin:bottom right;transform:rotate(3deg)}75%{transform-origin:bottom right;transform:rotate(-3deg)}}.right .balloon_two{position:absolute;top:170px;right:-65px;z-index:-1;transform:rotate(10deg);animation:balloon2 2s infinite linear}@keyframes balloon2{0%,50%,to{transform-origin:bottom left;transform:rotate(10deg)}25%{transform-origin:bottom left;transform:rotate(7deg)}75%{transform-origin:bottom left;transform:rotate(13deg)}}.decorate_star{position:absolute;transform:scale(0);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 2s var(--t) forwards,scaleStar 2s 9.5s infinite ease-in-out}.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;right:0;bottom:-10px;transform:translateY(200px);animation:translateYBottom 1.2s 1.5s forwards}@keyframes translateYBottom{to{transform:translateY(0)}}.decorate_flower--one{position:absolute;top:250px;left:50px;transform:scale(0);animation:scaleCricle 2s var(--t) forwards ease-in-out}.decorate_flower--two{position:absolute;top:100px;left:540px;transform:scale(0);animation:scaleCricle 2s var(--t) forwards ease-in-out}.decorate_flower--three{position:absolute;top:150px;right:235px;transform:scale(0);animation:scaleCricle 2s var(--t) forwards ease-in-out}.smiley__icon{position:absolute;bottom:180px;left:600px;transform:scale(0);animation:scaleCricle 2s 9.5s forwards ease-in-out}.box__letter{position:fixed;top:0;left:0;background-color:#00000080;width:100%;height:100%;z-index:10;display:none}.box__letter .letter__border{position:absolute;width:55vw;height:450px;background-color:var(--color-white);border-radius:27px;padding:17px;box-shadow:#0000003d 0 3px 8px;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.letter__border .close{position:absolute;right:-10px;top:-10px;width:30px;height:30px;background-color:var(--color-white);border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:#63636333 0 2px 8px;cursor:pointer}.letter__border .letter{width:100%;height:100%;background-color:var(--color-bg-letter);border-radius:10px;padding-top:15px}.letter__border .letter .title__letter{text-align:center;font-family:Dancing Script,cursive;font-weight:700;font-size:2.4rem}.title__letter .fa-solid{margin-left:5px;font-size:1.3rem}.letter__border .letter .content__letter{position:relative;width:100%;height:100%;display:flex;padding-top:1.5rem;padding-bottom:70px}.letter__border .letter .content__letter .left{position:relative;width:50%;height:100%;padding:1.7rem;border-right:3px solid var(--color-border)}.content__letter .left #heart__letter{opacity:0;width:100%}#heart__letter.animationOp{animation:opacityHeart 1s 1s forwards}@keyframes opacityHeart{to{opacity:1}}.content__letter .left .heart{position:absolute;opacity:0}.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{position:relative;width:50%}.content__letter .right .love__img{opacity:0;position:absolute;right:20px;top:-100px}.love__img.animationOp{animation:opacityHeart 1s 1s forwards}.content__letter .right .text__letter{margin-top:60px;padding:20px 15px 10px;font-family:Dancing Script,cursive;font-size:1.3rem}.content__letter .right #mewmew{position:absolute;bottom:0;right:0;opacity:0}#mewmew.animationOp{animation:opacityHeart 1s 1s forwards}#copy{position:fixed;bottom:12px;left:50%;transform:translate(-50%);font-size:1rem}#copy a{text-decoration:none;color:#191919d7}#copy p{color:#4275ff;text-align:center;font-weight:700;cursor:pointer}@media screen and (max-width:658px){html,body{width:100%;min-height:100vh;margin:0;padding:0}#wrapper{width:100vw;height:100vh;overflow:hidden}.flag__birthday .flag__left{transform:rotate(-10deg) translate(-119px,3px)}.flag__birthday .flag__right{transform:rotate(10deg) translate(-106px,39px) scaleX(-1)}.content{width:100%;position:relative;display:flex;flex-direction:column;justify-content:center;gap:25px;align-items:center;padding-top:3rem}.title{position:relative;width:100%;display:flex;justify-content:center;font-family:Titan One,sans-serif;font-size:1.5rem;letter-spacing:8px;flex-direction:column;perspective:1000px}#btn__letter{position:relative;margin-top:17px;width:209px;background-color:var(--color-text-pink);outline:none;padding:6px 4px;font-size:1rem;border-radius:50px;border:3px solid var(--color-black);font-family:Sriracha,cursive;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;color:var(--color-black);transition:all .5s ease-in-out}#btn__letter .mail{color:var(--color-black)}.cricle{top:240px;left:-70px;right:auto;display:flex;justify-content:center;align-items:center;transform:scale(0);animation:scaleCricle 2s 9.5s forwards ease-in-out;cursor:pointer}.cricle:active{transform:scale(.85)}.title .hat{position:absolute;right:-70px;top:-35px!important;transform:rotate(-40deg);z-index:-1;animation:topHat 2.5s 4s forwards ease}.title .hat img{width:90px}.box__letter .letter__border{position:absolute;width:90vw;height:315px;background-color:var(--color-white);border-radius:27px;padding:17px;box-shadow:#0000003d 0 3px 8px;top:50%;left:50%;transform:translate(-50%,-50%);display:none}.letter__border .letter{width:100%;height:100%;background-color:var(--color-bg-letter);border-radius:10px;padding-top:15px}.letter__border .letter .title__letter{text-align:center;font-family:Dancing Script,cursive;font-weight:700;font-size:1.4rem}.letter__border .letter .content__letter{position:relative;width:100%;height:100%;display:flex;padding-top:.7rem;padding-bottom:70px}.content__letter .right .text__letter{margin-top:-14px;padding:20px 15px 10px;font-family:Dancing Script,cursive;font-size:.8rem}.content__letter .right .love__img{opacity:0;position:absolute;right:126px;top:167px}.love__img img{width:84px}.content .right .image{position:relative;width:230px;height:230px;border-radius:50%;overflow:hidden;display:flex;align-items:center;border:6px solid var(--color-black)}.name{position:absolute;padding:5px 15px;bottom:-12px;border:3px solid var(--color-black)}.name span{font-size:1.2rem}.right .balloon_one{position:absolute;top:-30px;left:-45px;animation:balloon1 2s infinite linear}.right .balloon_one img{width:60px!important}.right .balloon_two{position:absolute;top:90px;right:-40px;z-index:-1;transform:rotate(10deg);animation:balloon2 2s infinite linear}.right .balloon_two img{width:60px!important}.decorate_star.star1{top:20px;left:20px}.decorate_star.star2{top:30px;right:20px}.decorate_star.star3{top:350px;left:30px}.decorate_star.star4{bottom:40px;left:200px}.decorate_star.star5{bottom:100px;left:auto;right:25px}.decorate_flower--one{top:115px;left:50px}.decorate_flower--two{top:450px;left:auto;right:20px}.decorate_flower--three{top:500px;left:20px;right:auto}.smiley__icon{bottom:315px;left:auto;right:15px;transform:scale(0);animation:scaleCricle 2s 9.5s forwards ease-in-out}.smiley__icon img{width:70px}.decorate_bottom{right:0;bottom:-10px}.decorate_bottom img{width:80px}}.boxMail{position:fixed;background:#000c;width:100%;height:100%;opacity:0;top:0;display:flex;justify-content:center;align-items:center;transform:scale(.3);visibility:hidden;transition:all .5s;z-index:100000000}.boxMail.active{opacity:1;visibility:visible;transform:scale(1)}.boxMail .boxMail-container{position:absolute;width:750px;height:500px;display:flex;margin:0;transform:scale(.9);-webkit-perspective:2000px;perspective:2000px;transition:all .5s}.boxMail .boxMail-container:hover{transform:rotate(-5deg);filter:drop-shadow(0 0 10px #FF7882)}.boxMail .boxMail-container:hover .card1{transform:translate(-187px,-250px) rotateY(-140deg)}.boxMail .boxMail-container .card1,.boxMail .boxMail-container .card2{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid black}.boxMail .boxMail-container .card1{position:absolute;width:50%;height:100%;background:linear-gradient(to right,#ff7882,#ff7882 63%);color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column}.boxMail-container .card1{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:left;transition:all 1s ease-in-out}.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:40px;text-transform:uppercase;width:80%;text-align:center;line-height:1.5;letter-spacing:5px;transform:rotate(-5deg);text-shadow:0 0 5px white,0 0 10px white}.boxMail .boxMail-container .card2{position:relative;width:50%;height:100%;background:linear-gradient(to right,#e0e0e0,#fff 30%);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:left;transition:all 1s}.boxMail .boxMail-container .card2 .card2-content{width:100%;height:100%;position:relative;background-color:#ff7882;transition:all 1s;overflow:hidden;font-family:Inter,serif;color:#fff}.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 #FF7882}.boxMail.active .boxMail-container .card2 h3{animation:texth3 2.5s forwards;animation-delay:.75s;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;padding:0 20px;text-indent:20px;font-size:22px;opacity:0}.boxMail.active .boxMail-container .card2 h2{animation:texth2 2.5s forwards;animation-delay:3s;transition:1s}@keyframes texth2{0%{opacity:0}to{opacity:1}}.boxMail .boxMail-container .card2 .card2-content .imageCute2{position:absolute;top:5px;left:20px;opacity:0;transition:1s}.boxMail.active .boxMail-container .card2 .card2-content .imageCute2{animation:cute3 1s linear infinite,cute4 3s 2s forwards;animation-delay:1s;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:30px;padding:10px 25px;cursor:pointer;color:#fff;z-index:10000000000000000}