#titDexLogo {display: flex; justify-content: center; align-items: center; width: 100%; height: 4em; margin: 1em 0 0 0; }
.navTabTop {font-weight: 700;}
#titDexLogo:active>#dexLogoSource { transform: perspective(300px) rotateY(359deg); transition-duration: 0s;}
#dexLogoSource {width: 4em; height: 4em; animation: startLogo 1s cubic-bezier(.17,.73,.31,1) backwards; transition: transform 1s cubic-bezier(.17,.73,.31,1); transform: perspective(300px) rotateY(0deg);}
body.light #dexLogoSource {fill: rgb(210, 60, 130); }
body.dark #dexLogoSource {fill: rgb(210, 60, 130); text-shadow: 0 0 3px rgba(210, 60, 130, .8); }

@keyframes startLogo {
	0% {opacity: 0; transform: perspective(300px) translateX(2em);}
	100% {opacity: 1; transform: perspective(300px);}
}
@keyframes startTitle {
	0% {opacity: 0; transform: translateX(-.5em); letter-spacing: -0.04em;}
	100% {opacity: 1; transform: none; letter-spacing: 0;}
}
#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;}
}

/* #region - Design Main Page */
.desCards {width: 100%; height: auto; display: flex; justify-content: center; position: relative; margin-top: 1.25em; flex-wrap: wrap; margin-bottom: 1.5em;}
.desCard {width: 18em; min-width: 18em; height: 18em; margin: .25em; border-radius: .25em; position: relative; background-color: rgb(210, 60, 130); border: 1px solid rgb(210, 60, 130); color: inherit; text-decoration: none; outline: 0px solid rgb(210, 60, 130); transition: outline cubic-bezier(.17,.73,.31,1) .25s, transform cubic-bezier(.17,.73,.31,1) .35s, box-shadow cubic-bezier(.17,.73,.31,1) .35s; overflow: clip;}
.desCard:hover {box-shadow: 0 0 .25em rgba(210, 60, 130, .75), 0 0 1em rgba(210, 60, 130, .5), 0 0 1.5em rgba(210, 60, 130, .5);}
.desCard:active {outline: .25em solid rgb(210, 60, 130); transition-duration: 0.03s; }
.desImg {width: 100%; height: 10em; position: relative; pointer-events: none; overflow: clip;}
.desImg > div {width: 100%; height: 100%; background-size: cover; transition: transform cubic-bezier(.17,.73,.31,1) .35s;}
.desCard:hover > .desImg > div {transform: scale(1.05);}
.desTitle {width: 100%; height: 2em; position: absolute; z-index: 2; top: 8em; font-weight: 700; background-color: rgba(210, 60, 130, .9); color: #fff; text-align: center; line-height: 2em;}
.desInfo {width: 100%; height: 8em; display: flex; flex-direction: column; }
body.light .desInfo {background-color: rgba(228,228,228,.95);}
body.dark .desInfo {background-color: rgba(28,28,28,.95);}
.desThread {font-size: .85em; margin: 0 .5em; width: calc(100% - 1em); line-height: 1.5em; display: flex;}
.desThread:first-child {margin-top: .25em;}
.desThread>.title {width: 5em; display: block;}

.desCard.planTxt {display: flex; padding: .5em; justify-content: center; align-items: center; color: #fff;}
.desCard.planTxt>p {text-align: center;}
.desCard.planTxt strong {margin: 0 .5em;}

@media (max-width: 35em) {
    .desCards {width: 90%; margin: 1em 5%;}
	.desCard {width: calc(100% - 2px); margin: .25em 0; height: 10em;}
	.desImgs {width: 25%; height: 100%; position: absolute;}
	.desTitle {width: 75%; top: 0; left: 25%;}
	.desInfo {width: 75%; position: absolute; top: 2em; left: 25%;}
	.desThread {display: flex;}
	.desThread>.title {display: block;}
}

/* #endregion - Design Main Page */

.settingToggle:hover .settingToggleBtn>div {background-color: rgb(210, 60, 130);}
.settingToggle.true .settingToggleBtn {border-color: rgb(210, 60, 130); }