#promoScreens {width: 100%; height: 100%; overflow: hidden;}
#promoScreens>div {width: 100%; height: 100%; overflow: hidden; background-color: rgb(28,28,28);}
body.light #promoScreens>div {width: 100%; height: 100%; overflow: hidden; background-color: rgb(228,228,228);}
#promoScreens a {text-decoration: none; color: inherit; transition: transform cubic-bezier(.17,.73,.31,1) .35s ; }
.promoAction div {transition: transform cubic-bezier(.17,.73,.31,1) .35s ;}
#promoScreens a:active, .promoAction div:active {transform: scale(.95); transition-duration: .03s;}
#navLogo {width: auto; height: 100%;} 

a#home_Emoji_title, a#home_BGraphics_title, a#home_Xinyue_title  { position: absolute; left: 10%; font-size: 4em; top: 5%; z-index: 20; text-decoration: none;}
a#home_Emoji_title {color: rgb(255,69,0);}
#home_Emoji_desc, #home_BGraphics_desc, #home_Xinyue_desc { position: absolute; left: 10%; font-size: 1.1em; width: 40%; z-index: 20; top: calc(5% + 5em); }
#home_Emoji_desc > p, #home_Xinyue_desc > p, #home_BGraphics_desc > p { margin: 0 0 .5em 0; }
#home_Emoji_update, #home_BGraphics_update { position: absolute; left: 10%; font-size: 1.1em; z-index: 20; width: 40%; bottom: 4.5em; }
#home_Emoji_action, #home_BGraphics_action, #home_Xinyue_action { position: absolute; left: 10%; font-size: 1.1em; z-index: 20; bottom: 1.5em; padding: .5em 1em; background-color: rgb(255,69,0); color: #fff; font-weight: 700; }
.home_Emoji_dec { position: absolute; height: 100%; transform-origin: 50% 0; transform: perspective(300px); display: flex; align-items: center; flex-direction: column; justify-content: flex-start; transition: all ease-in-out; transition-duration: 1s; }
.home_Emoji_dec:active {transform: perspective(300px) rotateX(-5deg); transition-duration: .1s;}
.home_Emoji_icon {font-size: 2.5em; width: 2em; height: 2em; border-radius: 50%; border: .1em solid rgb(255,69,0); display: flex; justify-content: center; align-items: center; box-sizing: border-box; font-family: "Segoe UI Emoji", inherit; }
body.light .home_Emoji_icon {background-color: #fff; }
body.dark .home_Emoji_icon {background-color: #000; }
.home_Emoji_string {width: 0; border-left: 1px; border-right: 1px; border: solid rgb(180, 180, 180);}
#home_Emoji_dec1 {font-size: 1.5em; right: 10%; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .35s backwards; }
#home_Emoji_dec1 img {width: 2.3em; min-width: 2.3em; height: 2.3em;}
#home_Emoji_dec1 .home_Emoji_string { height: 30%; animation: emoji_str1 1s ease-in-out infinite alternate;}
@keyframes emoji_str1 {0% {height: 30%;} 100% {height: 45%;}}
@keyframes emoji_start1 {0% {transform: translateY(-100%);} 100% {transform: none;}}
#home_Emoji_dec2 { right: 19%; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .52s backwards; } #home_Emoji_dec2 .home_Emoji_string { height: 18%; animation: emoji_str2 1s ease-in-out .2s infinite alternate both; }
#home_Emoji_dec3 { right: 26%; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .6s backwards; } #home_Emoji_dec3 .home_Emoji_string { height: 56%; animation: emoji_str3 1s ease-in-out .5s infinite alternate both; }
#home_Emoji_dec4 { right: 37%; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .72s backwards; } #home_Emoji_dec4 .home_Emoji_string { height: 37%; animation: emoji_str4 1s ease-in-out .1s infinite alternate both; }
#home_Emoji_dec5 { right: 7%; filter: blur(3px); pointer-events: none; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .63s backwards; } #home_Emoji_dec5 .home_Emoji_string { height: 67%; animation: emoji_str5 1s ease-in-out .4s infinite alternate both; }
#home_Emoji_dec6 { right: 20%; filter: blur(8px); pointer-events: none; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .55s backwards; } #home_Emoji_dec6 .home_Emoji_string { height: 69%; animation: emoji_str6 1s ease-in-out .6s infinite alternate both; }
#home_Emoji_dec7 { right: 32%; filter: blur(4px); pointer-events: none; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .63s backwards; } #home_Emoji_dec7 .home_Emoji_string { height: 13%; animation: emoji_str7 1s ease-in-out .7s infinite alternate both; }
#home_Emoji_dec8 { right: 30%; filter: blur(5px); pointer-events: none; animation: emoji_start1 .35s cubic-bezier(.17,.73,.31,1) .68s backwards; } #home_Emoji_dec8 .home_Emoji_string { height: 45%; animation: emoji_str8 1s ease-in-out .4s infinite alternate both; }
@keyframes emoji_str2 {0% {height: 14%;} 100% {height: 19%;}}
@keyframes emoji_str3 {0% {height: 50%;} 100% {height: 57%;}}
@keyframes emoji_str4 {0% {height: 37%;} 100% {height: 42%;}}
@keyframes emoji_str5 {0% {height: 60%;} 100% {height: 65%;}}
@keyframes emoji_str6 {0% {height: 55%;} 100% {height: 60%;}}
@keyframes emoji_str7 {0% {height: 10%;} 100% {height: 15%;}}
@keyframes emoji_str8 {0% {height: 64%;} 100% {height: 69%;}}


a#home_BGraphics_title { color: rgb(182,48,108); }
#home_BGraphics_action { background-color: rgb(182,48,108); }
#home_BGraphics_dec { width: 14em; height: 80%; top: 10%; position: absolute; right: 15%; display: flex; flex-direction:column; justify-content: space-around;}
.home_BGraphics_dec {transition: all cubic-bezier(.17,.73,.31,1) 1s; transform-origin: 50% 50%; height: 8%; transform: perspective(300px) rotateY(0deg); }
#home_BGraphics_dec1 {width: 36%; opacity: 1; margin-left: 32%; background-color: hsl(0,60%,60%); transition-delay: .2s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .22s; }
#home_BGraphics_dec2 {width: 86%; opacity: 1; margin-left: 6%; background-color: hsl(40,60%,60%); transition-delay: .05s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .25s; }
#home_BGraphics_dec3 {width: 34%; opacity: 1; margin-left: 33%; background-color: hsl(80,60%,60%); transition-delay: .18s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .48s; }
#home_BGraphics_dec4 {width: 42%; opacity: 1; margin-left: 29%; background-color: hsl(120,60%,60%);transition-delay: .4s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .24s;  }
#home_BGraphics_dec5 {width: 92%; opacity: 1; margin-left: 4%; background-color: hsl(160,60%,60%); transition-delay: .35s;  animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .55s;}
#home_BGraphics_dec6 {width: 74%; opacity: 1; margin-left: 13%; background-color: hsl(200,60%,60%); transition-delay: .14s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .34s; }
#home_BGraphics_dec7 {width: 96%; opacity: 1; margin-left: 2%; background-color: hsl(240,60%,60%); transition-delay: .31s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .51s; }
#home_BGraphics_dec8 {width: 28%; opacity: 1; margin-left: 36%; background-color: hsl(280,60%,60%); transition-delay: .08s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .28s; }
#home_BGraphics_dec9 {width: 66%; opacity: 1; margin-left: 17%; background-color: hsl(320,60%,60%); transition-delay: .15s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .35s; }
#home_BGraphics_dec10 {width: 76%; opacity: 1; margin-left: 12%; background-color: hsl(360,60%,60%);transition-delay: .19s; animation: fadeIn cubic-bezier(.17,.73,.31,1) backwards .5s .39s;  }
#home_BGraphics_dec:hover #home_BGraphics_dec1 {width: 100%; opacity: 0.9; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec2 {width: 100%; opacity: 0.27; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec3 {width: 100%; opacity: 0.75; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec4 {width: 100%; opacity: 1; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec5 {width: 100%; opacity: 0.8; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec6 {width: 100%; opacity: 1; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec7 {width: 100%; opacity: 0.45; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec8 {width: 100%; opacity: 0.36; margin-left: 0%; }
#home_BGraphics_dec:hover #home_BGraphics_dec9 {width: 100%; opacity: 0.85; margin-left: 0%; }
@keyframes fadeIn {0% {filter: opacity(0);} 100% {filter: opacity(1);}}

#home_BGraphics_dec:active .home_BGraphics_dec { transform: perspective(300px) rotateY(359deg); transition-duration: 0s !important; transition-delay: 0s !important; }

#home_Xinyue_pic {width: 100%; height: 100%;}
a#home_Xinyue_title {color: rgb(90, 190, 70);}
#home_Xinyue_desc { text-shadow: 0 0 .25em rgb(0,0,0); color: rgb(228,228,228)}
#home_Xinyue_action {background-color: rgb(90, 190, 70);}

@media (max-width: 65em) {
	a#home_Emoji_title, #home_Emoji_desc, #home_Emoji_update, #home_Emoji_action, a#home_BGraphics_title, #home_BGraphics_desc, #home_BGraphics_update, #home_BGraphics_action, a#home_Xinyue_title, #home_Xinyue_desc, #home_Xinyue_action { left: 5%; }
	#home_Emoji_desc, #home_Emoji_update,#home_BGraphics_desc, #home_BGraphics_update,#home_Xinyue_desc {width: 50%;}
	#home_Emoji_dec1 { right: 5%; } #home_Emoji_dec2 { right: 14%; } #home_Emoji_dec3 { right: 21%; }
	#home_Emoji_dec4 { right: 32%; } #home_Emoji_dec5 { right: 3%; } #home_Emoji_dec6 { right: 15%; }
	#home_Emoji_dec7 { right: 27%; } #home_Emoji_dec8 { right: 25%; } 
	#home_BGraphics_dec {right: 5%;}
}
@media (max-width: 35em) {
	a#home_Emoji_title, a#home_BGraphics_title, a#home_Xinyue_title { font-size: 3.5em; }
    .home_Emoji_dec:not(#home_Emoji_dec1) {display: none;}
	#home_BGraphics_dec {right: 5%; width: 30%;}
}
@media (max-width: 25em) {
	a#home_Emoji_title, a#home_BGraphics_title, a#home_Xinyue_title  { font-size: 3.5em; }
	#home_Emoji_desc, #home_Emoji_update, #home_BGraphics_desc, #home_BGraphics_update, #home_Xinyue_desc {width: 60%;}
	#home_BGraphics_dec {right: -7em; width: 14em;}
}
@media (max-width: 20em) {
	a#home_Emoji_title, a#home_BGraphics_title, a#home_Xinyue_title { font-size: 3em; }
}