@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caladea:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

:root {
    --ib-main: #d7c080;
    --ib-main-light: #eed9a1;
    --ib-main-dark: #cfb97c;
    --ib-compliment: #3b3b3b;
    --ib-compliment-light: #7e7e7e;
    --env-inside-color: #ffd2e7;
    --env-shade-light: #ffe0e9;
    --env-lid-color: #ffdbe7;
    --env-shade-dark: #ffe3eb;
    --main-theme: #fff6ea;
    --main-text: #d1b38b;
}

#root {
    display:contents;
    /*background-color: var(--main-theme);*/
    background-image: url('/img/paper.jpg');
    background-size: cover;
    color: var(--main-text);
}

html{
    scroll-behavior:smooth;
    height: 100%;
}

img {
    pointer-events: none;
}

#nav-logo {
    display: block;
    max-height: 40px;
    -webkit-filter: drop-shadow(1px 1px 0 white)
                drop-shadow(-1px 1px 0 white)
                drop-shadow(1px -1px 0 white)
                drop-shadow(-1px -1px 0 white);
    filter: drop-shadow(1px 1px 0 white)
            drop-shadow(-1px 1px 0 white)
            drop-shadow(1px -1px 0 white)
            drop-shadow(-1px -1px 0 white);
}

nav{
    max-width: 100%;
    z-index: 10;
}

body {
    font-family: "Fjalla One", sans-serif;
    background: var(--main-theme);
    background-image: url('/img/paper.jpg');
    background-size: cover;
    font-size: 18px;
    line-height: 2;
    font-weight: 600;
    color: #7e7e7e;
    height: 100%;
    overflow-x: hidden;
}

.top {
    background: transparent !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: rgba(0, 0, 0, 0.25) !important;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    height: 30px;
}

.sticky {
    position: fixed !important;
    top: 0;
}

.navbar .navbar-nav .nav-link, .main-color{
    color: var(--ib-compliment-ligh);
    font-size: 1.4rem;
}

.nav-link-wrap {
    padding: 0;
}

.nav-link-wrap .nav-pills .nav-link.active {
    color: #fff;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid transparent;
    background: var(--ib-compliment);
}

.nav-link-wrap .nav-pills .nav-link:hover {
    color: #fff;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid transparent;
    background: var(--ib-compliment-light);
}

.nav-lg-screen .navbar-nav .nav-link:focus, .nav-lg-screen .navbar-nav .nav-link:hover {
    text-shadow: 0 0 3px rgb(214, 214, 214);
    text-decoration: underline;
}

.nav-lg-screen .navbar-nav {
    width: 80%;
    justify-content: space-evenly;
}

.nav-lg-screen .navbar-nav .nav-link {
    font-size: 3vmin;
}

.nav-sm-screen .navbar-nav .nav-link:focus, .nav-sm-screen .navbar-nav .nav-link:hover {
    text-decoration: underline;
}

.nav-sm-screen .navbar-toggler {
    background-color: #f3f3f3cb;
}

.nav-sm-screen .navbar-nav .nav-link , .nav-sm-screen .top-nav-text{
    text-shadow: 
        -2px 0 1px #f7f7f7,
        2px 0 1px #f7f7f7,
        0 -2px 1px #f7f7f7,
        0 2px 1px #f7f7f7;
}

.nav-link-wrap .nav-pills .nav-link {
    padding: 10px!important;
    border-radius: 0;
    margin-bottom: 0;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    border: 1px solid transparent;
    background: #fff;
    width: 16.6%;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.nav-link-wrap .nav-pills .nav-link:after {
    position: fixed;
    bottom: -10px;
    left: 0;
    right: 0;
    width: 0;
    content: '';
    height: 0;
    margin: 0 auto;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--ib-compliment) transparent transparent transparent;
    opacity: 0;
}

#main-cover {
    background-image: url('/img/main-bg.jpg');
    height: 500px;
    background-size: cover;
    background-position: 50% 65%;
    box-shadow: 0 0 8px 8px white inset;
}

#main-logo{
    height: 25vw;
    max-height: 200px;
}

.nav-link-wrap .nav-pills .nav-link.active:after {
    z-index: 5;
    opacity: 1;
}

.dynamic-padding{
    padding-left: 10px;
    padding-right: 10px;
}

.tabs-left .nav-tabs a.active {
    color: #fff;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid transparent;
    background: var(--ib-main);
}

.tabs-left .nav-tabs a:hover {
    color: #fff;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    border: 1px solid transparent;
    background: #e7608d;
}

.tabs-left .nav-tabs a {
    padding: 0 !important;
    border-radius: 0;
    margin-bottom: 0;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    border: 1px solid transparent;
    background: #fff;
    width: auto;
    max-width: 200px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.top-email, .top-email:hover, .top-email:active, .top-email:focus{
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

#footer{
    margin-top: 20px;
    background-color:var(--ib-main);
    border-color:var(--ib-main);
    color: whitesmoke;
    font-size: 10px;
}

#top-btn {
    font-size: 50px;
    height: 0px;
    width: 50px;
    color: var(--ib-main);
    display: none;
    position: fixed;
    bottom: 120px;
    right: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 4px;
    z-index: 1000;
    transition: opacity 0.4s;
    opacity: 0;
}

.main-names {
    color: var(--ib-main);
    font-family: 'Tangerine', cursive;
    font-size: 85px;
    font-weight: 200;
}

.main-dates {
    color: var(--ib-main);
    font-family: 'Noto Sans TC', cursive;
    font-size: 16pt;
    margin-top: -4vmin
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.show-top-btn{
    opacity: 0.8 !important;
    display: block !important;
}

.nav-sm-screen{
    display: none;
}

.nav-lg-screen{
    display: flex;
    align-self: center;
}

.top-nav-text{
    color: var(--ib-main);
    font-family: 'Great Vibes', cursive;
    font-size: 30px;
    margin-top: -15px;
    margin-bottom: -25px;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.slider-img-wrapper {
    height: 500px;
    max-height: 500px;
}

.rsvp-logo {
    width: 20vmin;
    height: auto;
}

.rsvp-building {
    width: 30vmin;
    height: auto;
}

.rsvp-names {
    width: 80vmin;
    height: auto;
}

.rsvp-texts {
    font-family: 'Caladea', serif;
    font-weight: 200;
    font-size: 3.7vmin;
    line-height: normal;
    text-shadow: 0.1vmin 0.1vmin #d5d5d5;
}

.rsvp-main {
    margin-top: 12.5vmin;
    max-height: calc(100vh - 25vmin);
    width: calc(100vw - 20vmin);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 20;
}

.rsvp-modal .modal-header {
    font-family: 'Parisienne', cursive;
}

.rsvp-dresscode {
    font-family: 'Parisienne', cursive;
    font-weight: 200;
    font-size: 4.4vmin;
    line-height: normal;
}

.rsvp-dresscode-img {
    display: inline-block;
    height: 7vmin;
    width: auto;
    margin-bottom: 10px;
}

.btn-pink {
    font-family: 'Caladea', serif;
    font-weight: 500;
    background-color: var(--env-lid-color);
    color: rgb(255, 255, 255);
}

.btn-pink:hover {
    background-color: var(--env-inside-color);
}

.btn-pink:active, .btn-pink:focus {
    background-color: var(--env-inside-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 129, 207, 0.25);
}

.btn-gold {
    background-color: var(--ib-main);
    color: rgb(255, 255, 255);
}

.btn-gold:hover {
    background-color: var(--ib-main-dark);
}

.btn-gold:active, .btn-gold:focus {
    background-color: var(--ib-main-dark);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(219, 218, 132, 0.534);
}

.rsvp-map-link, .rsvp-map-link:visited, .rsvp-map-link:hover {
    color: #7e7e7e !important;
    text-decoration: none;
}

.rsvp-map-link:hover, .nav-link:hover {
    opacity: 0.85;
    cursor: pointer;
}

.rsvp-map-pin {
    height: 3vmin;
    width: auto;
}

.rsvp-style-btn {
    font-family: 'Parisienne', cursive;
}

.add-guest-btn {
    font-size: large;
}

.contact-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#our-story-title, .contact-title {
    font-family: 'Tangerine', cursive;
    font-size: 13vmin;
    font-weight: 600;
}

.contact-name {
    font-family: "Dosis", arial, tahoma, verdana;
    font-size: 4.4vmin;
}

#contact, #our-story {
    background-image: url('/img/paper.jpg');
    background-size: cover;
    background-repeat: repeat;
    box-shadow: 0 0 8px 8px white inset;
}

.home-wrapper {
    overflow-x: hidden;
    height: 100vh;
}

@media (max-width: 767px) {
    .main-names {
        font-size: 10vw;
        font-weight: 200;
    }

    .main-dates {
        font-size: 3vw;
    }

    .nav-sm-screen{
        display: flex;
        background: rgba(0, 0, 0, 0.10);
        width: 100%;
        z-index: 10;
    }
    
    .nav-lg-screen{
        display: none;
    }

    #main-logo{
        margin-top: 50px;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sakura {
	position: fixed;
	width: 100%;
	height: 100%;
    pointer-events: none;
    z-index: 3;
}

.sakura span {
	position: fixed;
	top: -10%;
	left: 0;
	width: 1.4vmin;
	height: 0.7vmin;
	border-radius: 5% 80% 10% 80%;
	background-color: #ffb6c1;
}

/* add animation */
.sakura span:nth-child(2n+1) {
	animation: sakura-anim-1 10s 0s linear infinite;
}

.sakura span:nth-child(2n+2) {
	animation: sakura-anim-2 10s 0s linear infinite;
}

/* side position */
.sakura span:nth-child(1) {
	left: 0%;
}

.sakura span:nth-child(2) {
	left: 2%;
}

.sakura span:nth-child(3) {
	left: 4%;
}

.sakura span:nth-child(4) {
	left: 6%;
}

.sakura span:nth-child(5) {
	left: 8%;
}

.sakura span:nth-child(6) {
	left: 10%;
}

.sakura span:nth-child(7) {
	left: 12%;
}

.sakura span:nth-child(8) {
	left: 14%;
}

.sakura span:nth-child(9) {
	left: 16%;
}

.sakura span:nth-child(10) {
	left: 18%;
}

.sakura span:nth-child(11) {
	left: 20%;
}

.sakura span:nth-child(12) {
	left: 22%;
}

.sakura span:nth-child(13) {
	left: 24%;
}

.sakura span:nth-child(14) {
	left: 26%;
}

.sakura span:nth-child(15) {
	left: 28%;
}

.sakura span:nth-child(16) {
	left: 30%;
}

.sakura span:nth-child(17) {
	left: 32%;
}

.sakura span:nth-child(18) {
	left: 34%;
}

.sakura span:nth-child(19) {
	left: 36%;
}

.sakura span:nth-child(20) {
	left: 38%;
}

.sakura span:nth-child(21) {
	left: 40%;
}

.sakura span:nth-child(22) {
	left: 42%;
}

.sakura span:nth-child(23) {
	left: 44%;
}

.sakura span:nth-child(24) {
	left: 46%;
}

.sakura span:nth-child(25) {
	left: 48%;
}

.sakura span:nth-child(26) {
	left: 50%;
}

.sakura span:nth-child(27) {
	left: 52%;
}

.sakura span:nth-child(28) {
	left: 54%;
}

.sakura span:nth-child(29) {
	left: 56%;
}

.sakura span:nth-child(30) {
	left: 58%;
}

.sakura span:nth-child(31) {
	left: 60%;
}

.sakura span:nth-child(32) {
	left: 62%;
}

.sakura span:nth-child(33) {
	left: 64%;
}

.sakura span:nth-child(34) {
	left: 66%;
}

.sakura span:nth-child(35) {
	left: 68%;
}

.sakura span:nth-child(36) {
	left: 70%;
}

.sakura span:nth-child(37) {
	left: 72%;
}

.sakura span:nth-child(38) {
	left: 74%;
}

.sakura span:nth-child(39) {
	left: 76%;
}

.sakura span:nth-child(40) {
	left: 78%;
}

.sakura span:nth-child(41) {
	left: 80%;
}

.sakura span:nth-child(42) {
	left: 82%;
}

.sakura span:nth-child(43) {
	left: 84%;
}

.sakura span:nth-child(44) {
	left: 86%;
}

.sakura span:nth-child(45) {
	left: 88%;
}

.sakura span:nth-child(46) {
	left: 90%;
}

.sakura span:nth-child(47) {
	left: 92%;
}

.sakura span:nth-child(48) {
	left: 94%;
}

.sakura span:nth-child(49) {
	left: 96%;
}

.sakura span:nth-child(50) {
	left: 98%;
}

/* size */
.sakura span:nth-child(3n+1) {
	width: 1.4vmin;
	height: 0.7vmin;
}

.sakura span:nth-child(3n+2) {
	width: 1.8vmin;
	height: 0.9vmin;
}

.sakura span:nth-child(3n+3) {
	width: 1.2vmin;
	height: 0.6vmin;
}

/* animation-duration */
.sakura span:nth-child(4n+1) {
	animation-duration: 5s;
}

.sakura span:nth-child(4n+2) {
	animation-duration: 12s;
}

.sakura span:nth-child(4n+3) {
	animation-duration: 8s;
}

.sakura span:nth-child(4n+4) {
	animation-duration: 6s;
}


/* animation-delay */
.sakura span:nth-child(11n+1) {
	animation-delay: 0s;
}

.sakura span:nth-child(11n+2) {
	animation-delay: 9s;
}

.sakura span:nth-child(11n+3) {
	animation-delay: 2s;
}

.sakura span:nth-child(11n+4) {
	animation-delay: 5s;
}

.sakura span:nth-child(11n+5) {
	animation-delay: 6s;
}

.sakura span:nth-child(11n+6) {
	animation-delay: 7s;
}

.sakura span:nth-child(11n+7) {
	animation-delay: 3s;
}

.sakura span:nth-child(11n+8) {
	animation-delay: 1s;
}

.sakura span:nth-child(11n+9) {
	animation-delay: 2s;
}

.sakura span:nth-child(11n+10) {
	animation-delay: 11s;
}

.sakura span:nth-child(11n+11) {
	animation-delay: 10s;
}

/* animation */
@keyframes sakura-anim-1 {
	0% {
		top: -10%;
		transform: translateX(0) rotateX(0) rotateY(0);
	}

	100% {
		top: 100%;
		transform: translateX(15vw) rotateX(180deg) rotateY(360deg);
	}
}

@keyframes sakura-anim-2 {
	0% {
		top: -10%;
		transform: translateX(0);
	}

	100% {
		top: 100%;
		transform: translateX(-15vw) rotateX(180deg) rotateY(360deg);
	}
}