:root {
    --accent: rgb(230, 80, 60);
    --accentText: rgb(230, 80, 60);
    --accent-invisible: rgba(230, 80, 60, 0);
    --accent-transparent: rgba(230, 80, 60, .1);
    --accent-translucent: rgba(230, 80, 60, .3);
    --accent-acrylic: rgba(230, 80, 60, .75);
    --accent-opaque: rgba(230, 80, 60, .9);
}

#titName, .appGalTxt {font-size: 3em; font-weight: 300; margin-left: .5em; animation: startTitle 1s cubic-bezier(.17,.73,.31,1) backwards .1s;}
body.light #titName, body.light .appGalTxt {color: #666;}
body.dark #titName, body.dark .appGalTxt {color: #fff; text-shadow: 0 0 .1em rgba(255,255,255,1); }
@media (max-width: 25em) {
	#titDexLogo {font-size: .85em;}
	#titName {margin-left: .25em;}
}

#allApps { width: 100%; justify-content: center; display: flex; margin-top: 1em; flex-wrap: wrap; }
.appCard { width: 18em; height: 16em; margin: .3em .3em; position: relative; border: 1px solid; transition: transform cubic-bezier(.17,.73,.31,1) .35s; }
.appCard>.coreCard { width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: default; position: relative; display: block; }
.appTitle {width: 10em; padding: 0 1em; font-weight: 700; position: absolute; color: #fff; top: 5.5em; line-height: 1.5em;}
.appIcon { width: 100%; height: 7.5em; display: flex; justify-content: center; align-items: center; }
.appIcon > img {width: 3em; height: 3em; transition: transform .25s  cubic-bezier(.17,.73,.31,1);}
.appCard:hover .appIcon > img {transform: scale(1.2);}
.appCard:active {transform: scale(.95); transition-duration: .03s;}
.appCtx {width: 100%; height: 8.5em; overflow: hidden;}
body.light .appCtx {background-color: rgb(210,210,210); } body.light .appDesc {color: #333;}
body.dark .appCtx {background-color: rgb(46,46,46);} body.dark .appDesc {color: #ccc;}
.appDesc {width: calc(100% - 1em); margin: .25em .5em; height: calc(100% - 4.5em); overflow-y: auto; text-align: justify; font-size: 0.95em;}
.appPlat {width: calc(100% - 1em); margin: 0 .5em; height: 1.5em; font-size: 0.95em;}
.appActions {width: calc(100% - 1em); margin: 0 .5em; height: 2.5em;display: flex; justify-content: flex-end; align-items: center; font-style:italic; }
.appActions>div:last-child {margin-right: .5em;}
.allAppDld {position: absolute; bottom: .25em; left: .5em; padding: 0 .75em; line-height: 2em; font-weight: 700; color: #fff; text-decoration: none; }
.appMoreArw {width: 0; transition: all ease-in-out .25s; font-style: normal; overflow: hidden; opacity: 0; height: 2em; line-height: 2em; display: flex; justify-content: center; align-items: center; }
.appCard:hover .appMoreArw {width: 1.3em; opacity: 1;}

@media (max-width: 38em) {
	#allApps { width: 95%; margin: 1em 2.5% 1em 2.5%;}
	.appCard {width: 100%; height: 10em; margin: 0 0 .25em 0;}
	.appCard>.coreCard {display: flex; flex-direction: column; flex-wrap: wrap;}
	.appIcon {width: 20%; height: 10em; order: 1; }
	.appTitle {order: 2; height: 2em; line-height: 2em; position: static; }
	.appCtx {width: 80%; order: 3; height: 8em; }
	.allAppDld {left: calc(20% + .5em);}
}
@media (max-width: 28em) {
	.appCard {height: 12em; }
	.appIcon { height: 12em; }
	.appCtx {height: 10em;}
}
@media (max-width: 22em) {
	.appCard>.coreCard { flex-direction: row; }
	.appIcon {width: 3em; height: 2em; order: 1;} .appIcon>img {width: 1.8em; height: 1.8em;}
	.appTitle {order: 2; position: static; padding: 0 .5em;}
	.appCtx {width: 100%; }
	.allAppDld {left: .5em;}
}

.emojiViewerBg { background-color: rgb(255,69,0); border-color: rgb(255,69,0); }
.emojiViewerBg .appIcon, .emojiViewerBg .allAppDld, .appPgDlBtn.EmojiViewer { background-color: rgb(255,69,0); }
.emojiViewerBg .appActions { color: rgb(255,69,0); }
.BGraphicsBg { background-color: rgb(182,48,108); border-color: rgb(182,48,108); }
.BGraphicsBg .appIcon, .BGraphicsBg .allAppDld, .appPgDlBtn.BGRahics { background-color: rgb(182,48,108); }
.BGraphicsBg .appActions  { color: rgb(182,48,108); }
.randPixBg { background-color: rgb(182,48,108); border-color: rgb(182,48,108); }
.randPixBg .appIcon, .randPixBg .allAppDld, .appPgDlBtn.randPix { background-color: rgb(182,48,108); }
.randPixBg .appActions  { color: rgb(182,48,108); }

.appPgTitle, .appPgCtx1, .appPgCtx2, .appPgCtx3, .appPgCtx4 {width: 80%; margin-left: 10%; display: flex; align-items: stretch; margin-top: 1em;}
main>div:last-child {margin-bottom: 2em;}
.appLogo {width: 8em; height: 8em; display: flex; justify-content: center; align-items: center;} .appLogo > img {width: 5em; height: 5em;} 
.appPgTitleRight { width: calc(100% - 6.5em); margin-left: 1.5em; }
.appPgTitleTxt {font-size: 2.5em; font-weight: 300; line-height: 1.6em;}
body.light .appPgTitleTxt, body.light .appPgDlLc  {color: #444;}
body.dark .appPgTitleTxt {color: #fff; text-shadow: 0 0 .15em #fff;}
body.dark .appPgDlLc {color: #bbb;}

.appPgTitleDls { width: 100%; display: flex; align-items: flex-end; height: calc(100% - 4em);  }
.appPgDlBtn { padding: 0 1em; line-height: 2.3em; font-weight: 700; color: #fff; text-align: center; text-decoration: none; display: block; transition: transform cubic-bezier(.17,.73,.31,1) .3s; }
.appPgDlBtn:active {transform: scale(.95); transition-duration: .03s;}
.appPgDlLc {font-size: .85em; line-height: 1.5em;}

header {font-weight: 200; font-size: 2.3em; color: rgb(230, 80, 60); margin-bottom: .25em; height: 1.5em; line-height: 1.5em; display: flex; align-items: center; }
header>select {margin-left: auto; padding: 0 1em; line-height: 2em; font-family: inherit; height: 2em; border: none; background-image: none; border: 1px solid rgb(230, 80, 60); border-radius: 0; font-size: .4em;}
body.light header>select {background-color: rgb(228,228,228); color: rgb(28,28,28);}
body.dark header>select {background-color: rgb(28,28,28); color: rgb(228,228,228);}

.appPgCtx1 {max-height: 23em;} .appPgCtx1>div {max-height: 23em;}
.appPgDesc {width: 35%;}
.appPgScs {width: calc(65% - 2em); margin-left: 2em;}
.appPgDesc section {text-align: justify; max-height: 15.975em; overflow-x: hidden; overflow-y: auto; padding-right: 1em;  }
.appPgDesc section p {margin: 0 0 .5em 0; }
/*follow height, but Chrome has bug now; height: calc(100% - 4.025em);*/
.appPgScs section { height: 15em; }
.appPgScs section>.scrContainer { width: calc(100%-6em); overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; -ms-scroll-translation: vertical-to-horizontal; padding: 0 3em; display: flex; align-items: flex-start; height: 100%; flex-wrap: nowrap;  }
.appPgScs section img {max-width: 400px; max-height: calc(100% - 1em); width: auto; height: auto; flex: none;  margin: 0; display: block; margin: .25em .25em .25em 0; transition: all cubic-bezier(.17,.73,.31,1) .35s; }
body.light .appPgScs section img:hover {box-shadow: .25em .25em .75em var(--dark-translucent);}
body.dark .appPgScs section img:hover {box-shadow: .25em .25em .75em var(--light-translucent);}
.appPgScs section img:active {transform: scale(.95); transition-duration: .03s;}
body.light .appPgScs section img { border: 1px solid rgb(210, 210, 210);}
body.dark .appPgScs section img { border: 1px solid rgb(46, 46, 46);}

.appPgCtx2 {height: 22em;}
.appPgGlr {width: calc(65% - 2em); margin-right: 2em;}
.appPgGlr section { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; align-content: flex-start; height: calc(100% - 4.025em); flex-direction: column; flex-wrap: wrap; overflow-x: auto; -ms-scroll-translation: vertical-to-horizontal; }
.appPgGlr section img {height: calc(50% - .75em); flex: none; width: auto; max-height: 360px; margin: 0; display: block; margin: 0 .25em .25em 0;}
.appPgGlr section a {width: 5em; height: calc(100% - 1.25em); display: flex; justify-content: center; align-items: center; color: rgb(230, 80, 60); font-weight: 700; transition: background-color .25s ease-in-out; }
.appPgGlr section a:hover {background-color: rgba(128,128,128,.25);}
.appPgInfo section {text-align: justify; max-height: calc(100% - 4.025em); overflow-x: hidden; overflow-y: auto; padding-right: 1em;  }
.appPgInfo section p {margin: 0 0 .5em 0;}
.appPgInfo section ul {margin-left: -1.5em; line-height: 1.4em;}
.appPgInfo section li {margin: 0 auto .25em 0;}
.appPgInfo section .appInfoMore, .appPgGlr header a {font-weight: 800; color: rgb(230, 80, 60);}
.appPgGlr header a {display: block; margin-left: auto; font-size: 0.4347826em;}
.appInfoMore { text-decoration: underline; cursor: pointer; display: inline-block; }

.appPgCtx3 {max-height: 28em;}
.appPgFet {width: 50%;}
.appPgVer {width: calc(50% - 2em); margin-left: 2em;}
.appPgInfo.appPgVer section ul {margin-top: 0; }

.appPgReq {width: 100%;}
.appPgVer h3 {font-weight: 300; font-size: 1.25em; margin: 0 0 0.25em 0; }
.verDate {font-size: .8em; font-weight: 500;}

@media (max-width: 55em) {
	.appPgTitle, .appPgCtx1, .appPgCtx2, .appPgCtx3, .appPgCtx4 {width: 90%; margin-left: 5%;}
	.appPgScs {width: calc(65% - 1em); margin-left: 1em;}
}
@media (max-width: 45em) {
	.appPgCtx1, .appPgCtx2, .appPgCtx3, .appPgCtx4  {height: auto; flex-wrap: wrap; max-height: unset;}
	.appPgScs, .appPgDesc, .appPgGlr, .appPgKnI, .appPgReq, .appPgVer, .appPgFet {width: 100%; margin-left: 0; margin-right: 0;}
	.appPgGlr section {height: 18em;}
}
@media (max-width: 35em) {
	.appPgTitle, .appPgCtx1 {width: 95%; margin-left: 2.5%;}
	.appPgScs header {flex-wrap: wrap; height: auto; flex-direction: column; align-items: flex-start;}
	.appPgScs header select {align-self: center; margin-left: unset;}

	.appPgTitle {flex-direction: column; align-items: center;}
	.appLogo {width: 5.5em; height: 5.5em; border-radius: 50% 50% 50% 50%;}
	.appLogo>img {width: 3.5em; height: 3.5em;}

	.appPgTitleRight {width: 100%; margin: 0;}
	.appPgTitleTxt {width: 100%; text-align: center;}
	.appPgTitleDls {justify-content: center;}

}

.appGalTitle {width: 100%; height: 4em; display: flex; justify-content: center; align-items: center; margin: 1em 0;}
.appGalLogo {width: 4em; height: 4em; display: flex; border-radius: 50% 50% 50% 50%; justify-content: center; align-items: center; animation: startLogo 1s cubic-bezier(.17,.73,.31,1) backwards;}
.appGalLogo>img {width: 2.5em; height: 2.5em;}
.appGalTxt {font-size: 2.5em;}

.appGal {width: 80%; margin: 0 10%; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;  }
.appGal>img {max-height: 500px; width: auto; height: 12em; margin: .25em;}
@media (max-width: 35em) {
	.appGal {width: 95%;margin: 0 2.5%; display: block; text-align: center; }
	.appGal>img {max-width: 100%; max-height: 500px; width: auto; height: auto; margin: .1em 0;}
	.appGalTitle {display: none;}
}