@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Solway:wght@400;700;800&family=ZCOOL+KuaiLe&display=swap');@font-face{font-family:LoveloBlack;src:url("./media/fonts/LoveloBlack.otf") format("opentype")}@font-face{font-family:BrittanySignature;src:url("./media/fonts/BrittanySignature.ttf") format("opentype")}@font-face{font-family:Mistrully;src:url("./media/fonts/Mistrully.ttf") format("opentype")}:root{--red:#ce3930;--card-size-reduce-ratio:0.9;--mobile-card-size-ratio:0.8;--card-width:430px;--card-height:995px;--mobile-card-width:calc(var(--card-width) * var(--mobile-card-size-ratio));--mobile-card-height:calc(var(--card-height) * var(--mobile-card-size-ratio));--action-button-width:14rem;--small-action-button-width:9rem}*{margin:0;padding:0}*,*:before,*:after{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}html,body{border:0}body{font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{height:12px;width:12px;background:#aaa}::-webkit-scrollbar-thumb{background:#393812;-webkit-border-radius:1ex;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.75)}::-webkit-scrollbar-corner{background:#000}.artboard{overflow:auto;min-height:100vh;display:flex;justify-content:center}.page{min-width:var(--card-width);min-height:var(--card-height);display:flex;justify-content:center;align-items:center}.page.hide{display:none}.page.active{display:flex}.page-inner{display:flex;align-items:center;flex-direction:column}.card-container{width:calc(var(--card-width)*var(--card-size-reduce-ratio));height:calc(var(--card-height)*var(--card-size-reduce-ratio));perspective:1000px}.card-container.appear{-webkit-animation:cardAppear 1.4s forwards;animation:cardAppear 1.4s forwards}@-webkit-keyframes cardAppear{0%{transform:rotate3d(0,0,1,15deg) translate3d(0,-100vh,0)}30%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0)}65%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1)}80%{transform:rotate3d(0,0,1,-5deg) scale3d(1.05,1.05,1)}100%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1)}}@keyframes cardAppear{0%{transform:rotate3d(0,0,1,15deg) translate3d(0,-100vh,0)}30%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0)}65%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1)}80%{transform:rotate3d(0,0,1,-5deg) scale3d(1.05,1.05,1)}100%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1)}}.card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateY(0deg);-moz-backface-visibility:hidden}.card.card--flipped{-webkit-animation:cardFlip 0.275s forwards linear;animation:cardFlip 0.275s forwards linear}.card.card--unflip{-webkit-animation:cardUnFlip 0.275s forwards linear;animation:cardUnFlip 0.275s forwards linear}@-webkit-keyframes cardUnFlip{0%{transform:rotateZ(0deg) rotateY(180deg)}50%{transform:rotateZ(-10deg) rotateY(90deg)}100%{transform:rotateZ(0deg) rotateY(0deg)}}@keyframes cardUnFlip{0%{transform:rotateZ(0deg) rotateY(180deg)}50%{transform:rotateZ(-10deg) rotateY(90deg)}100%{transform:rotateZ(0deg) rotateY(0deg)}}@-webkit-keyframes cardFlip{0%{transform:rotateZ(0deg) rotateY(0deg)}50%{transform:rotateZ(-10deg) rotateY(90deg)}100%{transform:rotateZ(0deg) rotateY(180deg)}}@keyframes cardFlip{0%{transform:rotateZ(0deg) rotateY(0deg)}50%{transform:rotateZ(-10deg) rotateY(90deg)}100%{transform:rotateZ(0deg) rotateY(180deg)}}.card-front,.card-back{width:100%;height:100%;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:8px 6px 0 0 rgba( 0,0,0,0.15 )}.card-back{transform:rotateY(180deg)}.image-holder > img{width:100%;height:100%}.background-style-1{background:linear-gradient(125deg,#fbf2e1,#ebd3b7);background-attachment:fixed;background-repeat:no-repeat}.background-style-2{background:rgb(214,76,76);background:radial-gradient(circle,rgba(214,76,76,1) 0%,rgba(155,13,13,1) 100%)}#perspective{position:fixed;top:200px;left:50%;margin-left:-200px;perspective:1000}#sealed_enveloped{width:200px;height:119px;margin-bottom:30px;-webkit-animation:cardAppear 1.4s forwards;animation:cardAppear 1.4s forwards,DACOUPLE_Title_Loop 3s infinite 3s ease-in-out}#sealed_enveloped.appear{border:0}#sealed_enveloped > img{border-radius:0.3rem 0.3rem 0.5rem 0.5rem;box-shadow:3px 6px 0 0 rgba( 0,0,0,0.15 )}#dacouple_title_group{position:relative;margin-bottom:30px;margin-top:115px}#dacouple_title{user-select:none;width:270px;height:139px;position:relative;animation:DACOUPLE_Title_Entry 2.8s forwards,DACOUPLE_Title_Loop 10s infinite 2.9s ease-in-out}#dacouple_title.text-holder{font-family:'BrittanySignature',serif;position:relative}#text_groom_name{font-size:3rem;display:block;position:absolute;top:15%;left:15%}#text_plus_symbol{font-size:4.5rem;display:block;position:absolute;top:65%;left:25%;font-family:'Mistrully',serif}#text_bride_name{font-size:3rem;display:block;position:absolute;top:60%;right:15%}#dacouple_ballon_happiness{user-select:none;width:118px;height:149px;position:absolute;left:160px;top:-105px;animation:Balloon_Entry 4.4s forwards,Balloon_Loop 25s infinite 4.5s ease-in-out;transform-origin:bottom left}#love_bubble{user-select:none;width:52px;height:47px;animation:LoveBubble_Entry 2.8s forwards ease-in-out,LoveBubble_Loop 2s infinite 3s ease-in-out;transform-origin:bottom center}#text_getting_married{margin-bottom:20px;animation:GettingMarried_Entry 2.8s forwards,GettingMarried_Loop 2s infinite 2.9s ease-in-out}#text_getting_married h3{font-size:1.7em;font-family:'ZCOOL KuaiLe',sans-serif;font-weight:400;color:var(--red);letter-spacing:0.2em;margin-left:0.65em}#text_invite{margin-bottom:30px;animation:TextInvite_Entry 2.8s forwards,TextInvite_Loop 1s infinite 2.9s ease-in-out}#text_invite h3{font-size:1em;color:var(--red);font-family:'LoveloBlack',sans-serif;letter-spacing:0.1em}#text_add_calendar{text-align:center;font-size:0.6rem;font-weight:normal;text-transform:uppercase;color:rgba(0,0,0,0.8);letter-spacing:2px;margin-top:-0.5rem;margin-bottom:0.5rem}#action_buttons{display:flex;flex-direction:column;gap:10px;animation:ActionButtons_Entry 4.4s forwards;margin-bottom:50px}#map{padding-top:1.5rem;padding-bottom:2rem}#map_icons{display:flex;justify-content:center;gap:2rem}#map_icons > a{flex-basis:40px;border:none}#map_icons img{max-width:100%}#map_on_card{position:absolute;top:35rem;width:100%}#map_on_card #map_icons{gap:3rem}#map_on_card #map_icons > a{flex-basis:30px}@keyframes SealedEnvolope_Entry{0%{transform:rotate3d(0,0,1,15deg) translate3d(0,-100vh,0)}30%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0)}65%{transform:rotate3d(0,0,0,0deg) translate3d(0,0,0) scale3d(1,1,1)}80%{transform:rotate3d(0,0,1,-5deg) scale3d(1.05,1.05,1)}}@keyframes DACOUPLE_Title_Entry{0%{opacity:0}50%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(0,200px,0) scale3d(0.5,0.5,1)}80%{opacity:1;transform:rotate3d(0,0,1,-5deg) scale3d(1.05,1.05,1)}}@keyframes DACOUPLE_Title_Loop{0%{transform:rotate3d(0,0,0,5deg) translate3d(0,0,0)}50%{transform:rotate3d(-100,0,-10,10deg) translate3d(2px,-2px,30px)}100%{transform:rotate3d(0,0,0,5deg) translate3d(0,0,0)}}@keyframes Balloon_Entry{0%{opacity:0}55%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(-100px,256px,0) scale3d(0.5,0.5,1)}90%{opacity:1}}@keyframes Balloon_Loop{20%{transform:rotate(10deg)}50%{transform:rotate(-15deg)  scale(1.1)}75%{transform:rotate(12deg)}90%{transform:rotate(-12.5deg) scale(0.9)}}@keyframes LoveBubble_Entry{0%{opacity:0}50%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(0,100px,0) scale3d(0.5,0.5,1)}80%{opacity:1}}@keyframes LoveBubble_Loop{10%{transform:translateY(-12px) scaleY(1.2)}20%{transform:translateY(0) scaleY(0.8)}30%{transform:translateY(-10px) scaleY(1.1)}40%{transform:translateY(0) scaleY(1)}}@keyframes GettingMarried_Entry{0%{opacity:0}50%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(0,200px,0) scale3d(0.5,0.5,1)}80%{opacity:1}}@keyframes GettingMarried_Loop{10%{transform:translateY(6px)}20%{transform:translateY(-4px)}30%{transform:translateY(2px)}40%{transform:translateY(0)}}@keyframes TextInvite_Entry{0%{opacity:0}50%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(0,-100px,0) scale3d(1,1,1)}80%{opacity:1;transform:rotate3d(0,0,1,-5deg) scale3d(1.05,1.05,1)}}@keyframes TextInvite_Loop{10%{transform:translateY(6px)}20%{transform:translateY(-4px)}30%{transform:translateY(2px)}40%{transform:translateY(0)}}@keyframes ActionButtons_Entry{0%{opacity:0}75%{opacity:0;transform:rotate3d(0,0,0,0deg) translate3d(0,-100px,0) scale3d(0.5,0.5,1)}85%{opacity:1;transform:rotate3d(0,0,1,5deg) scale3d(1.05,1.05,1)}}button{position:relative;display:inline-block;cursor:pointer;outline:none;border:0;vertical-align:middle;text-decoration:none;background:transparent;padding:0;font-size:inherit;font-family:inherit}button.action-btn{width:var(--action-button-width);height:auto;border:2px solid var(--red);border-radius:1.625rem}button.action-btn .circle{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:relative;display:block;margin:0;width:2.5rem;height:2.5rem;background:var(--red);border-radius:1.625rem}button.action-btn .circle .icon{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;top:0;bottom:0;margin:auto;background:#fff}button.action-btn .circle .icon.arrow{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);left:0.425rem;width:1.125rem;height:0.125rem;background:none}button.action-btn .circle .icon.arrow::before{position:absolute;content:"";top:-0.25rem;right:0.0625rem;width:0.625rem;height:0.625rem;border-top:0.125rem solid #fff;border-right:0.125rem solid #fff;transform:rotate(45deg)}button.action-btn .button-text{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;top:0;left:0;right:0;bottom:0;padding:0.75rem 0;margin:0 0 0 1.85rem;color:#282936;font-weight:700;line-height:1.1;text-align:center;text-transform:uppercase}.button-text em{font-size:0.8rem;letter-spacing:1px}button:hover .circle{width:100%}button:hover .circle .icon.arrow{background:#fff;transform:translate(1rem,0)}button:hover .button-text{color:#fff}button.small-action-btn{width:var(--small-action-button-width);font-size:0.6rem}button.small-action-btn .circle{width:1.3rem;height:1.3rem}button.small-action-btn:hover .circle{width:100%}button.small-action-btn .circle .icon.arrow{left:0;width:0.75rem}button.small-action-btn .button-text{padding:0.125rem 0;margin:0 0 0 0.85rem;line-height:1.45}button.small-action-btn:hover .circle .icon.arrow{background:#fff;transform:translate(0.4rem,0)}button.small-action-btn .circle .icon.arrow::before{width:0.525rem;height:0.525rem;top:-0.18rem}#invitation_card .card-front .rsvp-btn{position:absolute;left:calc( ((var(--card-width)*var(--card-size-reduce-ratio)) - var(--small-action-button-width)) / 2 );bottom:13.5rem;background:url(./media/background_paper_texture.jpg)}#invitation_card .card-back .rsvp-btn{position:absolute;left:calc( ((var(--card-width)*var(--card-size-reduce-ratio)) - var(--small-action-button-width)) / 2 );bottom:10rem;background:url(./media/background_paper_texture.jpg)}#music_player{position:fixed;top:0.5em;left:0.5em;z-index:999}#play_bgm{width:2.25em;height:2.25em;background:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center}#play_bgm .icon{width:1.25em;height:1.25em}#play_bgm .icon-play{opacity:0.25;background:url('./media/gvec_music.svg') no-repeat;background-size:contain}#play_bgm .playing{opacity:1;animation:Music_Playing ease-in-out 2s infinite}@keyframes Music_Playing{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}@keyframes Music_Playing_2{10%{transform:translateY(-12px) scaleY(1.2)}20%{transform:translateY(0) scaleY(0.8)}30%{transform:translateY(-10px) scaleY(1.1)}40%{transform:translateY(0) scaleY(1)}}button.close-btn{width:2em;height:2em;line-height:1.7em;font-size:1.2em;border-width:4px;border-color:#ebd3b7;background:var(--red);color:#fff;box-shadow:4px 3px 0 0 rgba( 0,0,0,0.15 )}#invitation_card button.close-btn{position:absolute;top:-1rem;right:-1rem;z-index:99}#rsvp_form button.close-btn{position:absolute;top:-1rem;right:-1rem;z-index:99}.card-holder > .form-area{width:100%;height:100%}#rsvp_form .card-holder{background:url(./media/background_red_envelope.jpg) no-repeat;background-size:100% 100%}#rsvp_form .form-area{padding:2.5em 1.25em 13em 1.25em}.bg-effects{position:absolute;top:0;left:0;width:100%;height:var(--card-height);overflow:hidden}.bg-effects li{position:absolute;display:block;list-style:none;animation:BGSpecialEffect 25s linear infinite;bottom:-250px}.heart{width:100px;height:100px;background-color:white;position:relative}.heart:before,.heart:after{content:'';width:100px;height:100px;background-color:white;border-radius:50%;position:absolute}.heart:before{top:-50px;left:0}.heart:after{top:0;left:50px}.bg-effects li:nth-child(odd) .heart{transform:rotate(-45deg) scale(0.125)}.bg-effects li:nth-child(even) .heart{transform:rotate(-45deg) scale(0.085)}.bg-effects li:nth-child(1){left:25%;width:80px;height:80px;animation-delay:0s;transform:scale(0.1)}.bg-effects li:nth-child(2){left:10%;width:20px;height:20px;animation-delay:2s;animation-duration:12s;transform:scale(0.2)}.bg-effects li:nth-child(3){left:70%;width:20px;height:20px;animation-delay:4s;transform:scale(0.3)}.bg-effects li:nth-child(4){left:40%;width:60px;height:60px;animation-delay:0s;animation-duration:18s;transform:scale(0.4)}.bg-effects li:nth-child(5){left:65%;width:20px;height:20px;animation-delay:0s;transform:scale(0.5)}.bg-effects li:nth-child(6){left:75%;width:110px;height:110px;animation-delay:3s;transform:scale(0.4)}.bg-effects li:nth-child(7){left:35%;animation-delay:7s;transform:scale(0.3)}.bg-effects li:nth-child(8){left:50%;animation-delay:15s;animation-duration:45s;transform:scale(0.2)}.bg-effects li:nth-child(9){left:20%;animation-delay:2s;animation-duration:35s;transform:scale(0.1)}.bg-effects li:nth-child(10){left:85%;animation-delay:0s;animation-duration:11s;transform:scale(0.25)}@keyframes BGSpecialEffect{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(calc(var(--card-height) * -1)) rotate(720deg);opacity:0}}#add_to_calendar{display:flex;justify-content:center;align-items:center}@media screen and (max-width:500px){.page{min-width:var(--mobile-card-width);min-height:var(--mobile-card-height)}#invitation_card.card-container{width:calc(var(--mobile-card-width) * var(--card-size-reduce-ratio));height:calc(var(--mobile-card-height) * var(--card-size-reduce-ratio))}#rsvp_form.card-container{width:calc(var(--mobile-card-width) * 0.99);height:calc(var(--mobile-card-height) * 0.95)}#landing_page_content{transform:scale(0.9)}.bg-effects{height:calc(var(--mobile-card-height) + 50px)}#rsvp_form .form-area{padding-bottom:11em}#invitation_card .card-front .rsvp-btn{left:calc( ((var(--mobile-card-width)*var(--card-size-reduce-ratio)) - var(--small-action-button-width)) / 2 );bottom:10.7rem}#invitation_card .card-back .rsvp-btn{left:calc( ((var(--mobile-card-width)*var(--card-size-reduce-ratio)) - var(--small-action-button-width)) / 2 );bottom:8.5rem}#map_on_card{top:27.6rem}}