@font-face { font-family: "Source Sans Pro"; src: url('../img/font/SourceSansPro-Light.ttf'); font-weight: 300;}
@font-face { font-family: "Source Sans Pro"; src: url('../img/font/SourceSansPro-Regular.ttf'); font-weight: 500;}
@font-face { font-family: "Source Sans Pro"; src: url('../img/font/SourceSansPro-It.ttf'); font-weight: 500; font-style: italic;}
@font-face { font-family: "Source Sans Pro"; src: url('../img/font/SourceSansPro-Bold.ttf');font-weight: 700;}
@font-face { font-family: "Source Sans Pro"; src: url('../img/font/SourceSansPro-BoldIt.ttf'); font-weight: 700; font-style: italic;}

:root {
    --dark: rgb(28,28,28);
    --dark-translucent: rgba(28,28,28,.3);
    --dark-seethrough: rgba(28,28,28,.5);
    --dark-acrylic: rgba(28,28,28,.75);
    --dark-opaque: rgba(28,28,28,.9);
    --darker: rgb(8,8,8);
    --darkless: rgb(48,48,48);
    --light: rgb(228,228,228);
    --light-translucent: rgba(228,228,228,.3);
    --light-seethrough: rgba(228,228,228,.5);
    --light-acrylic: rgba(228,228,228,.75);
    --light-opaque: rgba(228,228,228,.9);
    --lighter: rgb(248,248,248);
    --lightless: rgb(208,208,208);
    --accent: rgb(230, 140, 60);
    --accentText: var(--accent);
    --accent-invisible: rgba(230, 140, 60, 0);
    --accent-transparent: rgba(230, 140, 60, .1);
    --accent-translucent: rgba(230, 140, 60, .3);
    --accent-acrylic: rgba(230, 140, 60, .75);
    --accent-opaque: rgba(230, 140, 60, .9);
    --accentHome: rgb(230, 140, 60);
    --accentHome-invisible: rgba(230, 140, 60, 0);
    --accentHome-transparent: rgba(230, 140, 60, .1);
    --accentHome-translucent: rgba(230, 140, 60, .3);
    --accentHome-acrylic: rgba(230, 140, 60, .75);
    --accentHome-opaque: rgba(230, 140, 60, .9);
}

body { margin: 0; font-family: "Source Sans Pro", "Segoe UI", "微軟正黑體", "Segoe UI Emoji", sans-serif; overflow-x: hidden; cursor: default; }
body.transBG, body.transBG *>* , body.transBG>*  {transition: all cubic-bezier(.17,.73,.31,1) .75s !important; pointer-events: none;}

body.light, body.light input:not([type=checkbox]), body.light select, body.light textarea, body.light option { background-color: rgb(228,228,228); color: rgb(28,28,28); }
body.dark { color-scheme: dark; }
body.dark, body.dark input:not([type=checkbox]), body.dark select, body.dark textarea, body.dark option  { background-color: rgb(28,28,28); color: rgb(228,228,228); }

.noAni *>*, .noAni * {transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s !important; animation-delay: 0s !important;}


svg .fillable {transition: fill cubic-bezier(.17,.73,.31,1) .35s;}
svg .strokable {transition: fill cubic-bezier(.17,.73,.31,1) .35s;}
.svgBtn:active svg .fillable, .svgBtn:active svg .strokable {transition-duration: .03s;}

body.light .fitTheme svg .fillable {fill: rgb(28,28,28);}
body.dark .fitTheme svg .fillable {fill: rgb(228,228,228);}
body.dark .svgBtn:active.fitTheme svg .fillable, body.light .svgBtn:active.fitTheme svg .fillable {fill: white;}

body.light .fitTheme svg .strokable {stroke: rgb(28,28,28);}
body.dark .fitTheme svg .strokable {stroke: rgb(228,228,228);}
body.dark .svgBtn:active.fitTheme svg .strokable, body.light .svgBtn:active.fitTheme svg .strokable {stroke: white;}

.svgIcon>svg {width: 100%; height: 100%;}

.none, .closed { display: none !important; animation-fill-mode: none !important; }
.hide {opacity: 0; pointer-events: none;}

.invisible {visibility: hidden; pointer-events: none; animation: unset !important;}
.invisible * { animation: unset !important;}
*:not(a):not(input):not(textarea):not(select) { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }
.hidden { animation: fadeIn .25s normal ease-in-out reverse; pointer-events: none; }
.showing { animation: fadeIn .25s normal ease-in-out; pointer-events: none; }
.inactive {opacity: .4; pointer-events: none;} 

input, select, textarea, option {font-family: inherit; font-size: inherit; line-height: inherit; user-select: text; -ms-user-select: text; -moz-user-select: text; -webkit-user-select: text;}
input, select, textarea {border: 1px solid rgb(56,56,56); }
input, select, option { height: 2em; line-height: 2em; padding: 0 .25em; }
body.light input, body.light select, body.light textarea {border: 1px solid rgb(200,200,200); }
option {background-color: rgb(56,56,56);}
option:hover:not(:active) {background-color: rgb(76,76,76); color: rgb(255,255,255);}
option:disabled {opacity: .3;}
body.light option {background-color: rgb(200,200,200);}
body.light option:hover:not(:active) {background-color: rgb(180,180,180); color: rgb(0,0,0);}
select::-ms-expand  {background-color: transparent; color: inherit; transition: all .3s cubic-bezier(.17,.73,.31,1); }
input[type=checkbox]::-ms-check {background-color: rgb(28,28,28); border-color: rgb(228,228,228); color: rgb(228,228,228); transition: border-color .3s cubic-bezier(.17,.73,.31,1); width: 1em; height: 1em;}
body.light input[type=checkbox]::-ms-check {background-color: rgb(228,228,228); border-color: rgb(28,28,28);color: rgb(28,28,28); }
button {font-family: inherit; line-height: inherit; outline: none; border: none; background-image: none;}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes floatIn {
	0% { opacity: 0; transform: translateY(2em); }
	100% { opacity: 1; transform: none; }
}
@keyframes scaleIn {
	0% { opacity: 0; transform: scale(.95); }
	100% { opacity: 1; transform: none; }
}


/*Top Navigation*/
#topTab { display: flex; align-items: center; position: fixed; top: 0; left: 0em; z-index: 2; width: 100%; height: 2.3em; font-size: 1.2em; color: #fff; }
#topTab.home { background-color: var(--accentHome); }
#btmNav.home, #topTab.abt, #btmNav.abt { background-color: var(--accentHome); }
#topTab.app, #btmNav.app, #homeNavApp .homeNavIcon, #homeNavApp .homeNavArw  { background-color: rgb(230, 80, 60); }
#topTab.trv, #btmNav.trv, #homeNavTrv .homeNavIcon, #homeNavTrv .homeNavArw  { background-color: rgb(90, 190, 70); }
#topTab.dev, #btmNav.dev, #homeNavDev .homeNavIcon, #homeNavDev .homeNavArw  { background-color: rgb(60, 195, 180); }
#topTab.des, #btmNav.des, #homeNavDes .homeNavIcon, #homeNavDes .homeNavArw  { background-color: rgb(210, 60, 130); }
#topTab.str, #btmNav.str, #homeNavStr .homeNavIcon, #homeNavStr .homeNavArw  { background-color: hsl(289, 65%, 40%); }
/*#topTabPopUp {backdrop-filter: blur(20px);}*/
#topTabPopUp.home, #topTabPopUp.abt { background-color: var(--accentHome); }
#topTabPopUp.app { background-color: rgba(230, 80, 60, 1); }
#topTabPopUp.trv { background-color: rgba(90, 190, 70, 1); }
#topTabPopUp.dev { background-color: rgba(60, 195, 180, 1); }
#topTabPopUp.des { background-color: rgba(210, 60, 130, 1); }
#topTabPopUp.str { background-color: hsla(289, 65%, 40%, 1); }

#topTab>a, #btmNav>a {text-decoration: none; color: inherit; cursor: default;}
#topTab > .navTab, #btmNav > .navTab { display: flex; align-items: center; height: 100%; background-repeat: no-repeat;
					transition: background cubic-bezier(.17,.73,.31,1) .2s, transform cubic-bezier(.17,.73,.31,1) .35s; transform-origin: 50% 0%; }
#topTab > .navTab:not(.svgIcon), #btmNav > .navTab:not(.svgIcon) { padding: 0 1em; }
#topTab > .navTab { background-position: 0 -2.76em; }
#topTab > .navTab:hover, #btmNav > .navTab:hover, #topTab > .navTab:active, #btmNav > .navTab:active, #topTab > .navTab:focus, #btmNav > .navTab:focus {background-position: 0 0;}
#topTab > a.navTab:active {transform: scale(.9);}
#topTab > a.navTab:active {transition: .02s;}
#topTab > .navTab:not(#navDex) { font-size: .85em; }
#navLogo { width: 2.25em; height: 2.25em; margin-right: .5em;} 
#topTab > .navTab.navTrans {font-size: .75em; margin-left: auto; }
.navTrans a, .navTrans strong {margin: 0 .25em;}
.navTrans a { color: inherit; opacity: .7; transition: opacity .25s ease-in-out; }
.navTrans a:hover { opacity: 1; }
#topTab > #navTransSim, #topTab > #navTitle, #topTab > #navMore, #topTab > #navRead {display: none;}
#topTab > #navTitle {flex-grow: 1; flex-basis: 5em; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#topTab > #navMore {width: 1.75em; font-size: 1.5em; justify-content: center; height: 100%; }
#topTab > #navRead {width: 2.45em; height: 100%;}
#topTab svg {fill: white; stroke: white;}
#navHome, #navPUHome { background-image: linear-gradient(to bottom, var(--accentHome) 0%, var(--accentHome) 100%); }
#navApp, #navPUApp {background-image: linear-gradient(to bottom, rgb(230, 80, 60) 0%, rgb(230, 80, 60) 100%);}
#navTrv, #navPUTrv {background-image: linear-gradient(to bottom, rgb(90, 190, 70) 0%, rgb(90, 190, 70) 100%);}
#navDev, #navPUDev {background-image: linear-gradient(to bottom, rgb(60, 195, 180) 0%, rgb(60, 195, 180) 100%);}
#navDes, #navPUDes {background-image: linear-gradient(to bottom, rgb(210, 60, 130) 0%, rgb(210, 60, 130) 100%);}
#navSettings {background-image: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%);}
#navSettings {width: 1.75em; height: 100%; margin: 0 1em 0 0; padding: 0 .25em;}
#navSettingsQ {margin-right: 1em;}

.navTab > span.shortDesc {display: none;}

@media (max-width: 55em) {
	#topTab > .navTab:not(.svgIcon) { padding: 0 0.6em; }
	#topTab > #navTransSim {display: flex;}
	#topTab > #navTrans {display: none;}
	#navLogo {margin-right: .25em;}
	#navSettings {width: 1.75em; height: 100%; margin: 0 .6em 0 0; padding: 0 .15em;}
}
@media (max-width: 40em) {
	.navTrans a, .navTrans strong {margin: 0 .15em;}
	#topTab > .navTab:not(.svgIcon) { padding: 0 0.33em; }
	#navSettings {width: 1.75em; height: 100%; margin: 0 .33em 0 0; padding: 0 0;}
}
@media (max-width: 35em) {
	#topTab > #navMore, #topTab > #navRead {display: flex;} #topTab > #navTitle {display: block;}
	#topTab>a:not(.navTabTop), .navTabTop>span, #topTab > #navTransSim {display: none;}
	#btmNav > .navTab { padding: 0 .8em; }
	#navLogo {margin-right: 0em;}
	#navSettings {display: none;}
}
@media (max-width: 25em) {
	.navTab > span.shortDesc {display: inline-block;}
	.navTab > span.longDesc {display: none;}
}

/* Dexterux Logo Title */
#titDexLogo {display: flex; justify-content: center; align-items: center; width: 100%; height: 4em; margin: 1em 0 0 0; }
.navTabTop {font-weight: 700;}
#dexLogoSourceContainer {transition: transform 1s cubic-bezier(.17,.73,.31,1); animation: startLogo 1s cubic-bezier(.17,.73,.31,1) backwards; transform: perspective(300px) rotateY(0deg);}
#titDexLogo:active>#dexLogoSourceContainer { transform: perspective(300px) rotateY(359deg); transition-duration: 0s;}
#dexLogoSource { width: 4em; height: 4em; fill: var(--accentText); }
body.dark #dexLogoSource { text-shadow: 0 0 3px var(--accent-acrylic); }
@keyframes startLogo {
	0% {opacity: 0; transform: translateX(2em);}
	100% {opacity: 1; transform: none; }
}
@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: 35em) {
	#titleLogo {display: none;}
}
@media (max-width: 25em) {
	#titDexLogo {font-size: .85em;}
	#titName {margin-left: .25em;}
}


/*Footer*/
#btmNav { display: flex; align-items: center; position: fixed; bottom: 0; left: 0em; z-index: 2; width: 100%; height: 2em; font-size: 0.9em; color: #fff; transition: opacity ease-in-out .3s; }
#btmNav > .navTab { background-position: 0 2em; }
#btmNav > .navTab, #topTab > #navMore,  #topTab > #navRead { background-image: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%);}
#navCpr { margin-left: auto; }


/*Top Tab Mobile*/
#topTabPopUp {display: none; width: 20em; max-width: 100%; color: #fff; max-height: calc(100% - 2.76em); overflow-x: hidden; overflow-y: auto; position: fixed; top: 2.76em; right: 0; z-index: 100; transition: all cubic-bezier(.17,.73,.31,1) .25s;}
#quickActions {display: flex; justify-content: flex-end; align-items: center; height: 2em; padding: 0 5%;}
#quickActions>* {display: flex; align-items: center; justify-content: center; margin: 0 .2em; min-width: 2em; height: 100%;}
#popupNavBtns {display: flex; flex-direction: column; justify-content: center; align-items: center;}
#popupNavBtns>.navTab {display: flex; align-items: center; width: 90%; height: 3em; margin: .2em 0; color: inherit; text-decoration: none; cursor: default; background-color: rgba(0,0,0,.3); transition: background .25s cubic-bezier(.17,.73,.31,1); background-position: 0 3em; background-repeat: no-repeat; outline: 1px solid rgba(28,28,28,.5); }
#popupNavBtns > .navTab:hover, #popupNavBtns > .navTab:active, #popupNavBtns > .navTab:focus {background-position: 0 0;}
#popupNavBtns > .navTab:active, .navTab:active {transition-duration: .05s; }
#popupNavBtns>.navTab>img {width: 2em; height: 2em; margin: 0 .8em 0 .5em;}
#popupNavBtns>.navTab>div {width: calc(100% - 2.75em); font-size: 1.2em;}
#popupFooter {display: flex; height: 4em; align-items: center; padding: 0 5%;}
#popupFooter1 {width: 40%;}
#popupFooter1>.navTab {width: calc(100% - .6em); height: 2em; padding: 0 .3em; display: flex; justify-content: center; align-items: center; cursor: default; color: inherit; text-decoration: none; font-size: .85em; transition: background-color ease-in-out .25s; }
#popupFooter2 {width: calc(60% - .6em); padding: 0 .3em; height: 4em; display: flex; justify-content: center; align-items: center; cursor: default; color: inherit; text-decoration: none; font-size: .85em; transition: background-color ease-in-out .25s;  }
#popupFooter2>img {width: 3.5em; height: 3.5em;} #popupFooter2>div {text-align: center;}
#popupFooter1>.navTab:hover, #popupFooter2:hover {background-color: rgba(0,0,0,0.3);}
#topTabPopUp.hide {transform: translateY(-1em);}
#topTabPopUp.showing {animation: showTopPopUp .25s cubic-bezier(.17,.73,.31,1) both;}
#topTabPopUp.hiding {animation: showTopPopUp .25s cubic-bezier(.17,.73,.31,1) both reverse;}

@keyframes showTopPopUp {0%{opacity: 0; transform: translateY(-1em);} 100%{opacity: 1; transform: none;}}

@media (max-width: 35em) {
	#topTabPopUp { display: block; }
}

/*Home Page*/
main { position: fixed; top: 2.76em; left: 0; width: 100%; height: calc(100% - 4.56em); overflow-x: hidden; overflow-y: auto; transition: all cubic-bezier(.17,.73,.31,1) .3s, filter cubic-bezier(.17,.73,.31,1) .85s; }
main.backstage {filter: blur(20px); }
#homeScreen { width: 100%; height: 60%; min-height: 21em; position: relative;}

#homeNav { width: 100%; display: flex; flex-direction: column; align-items: center; height: 10em;}
body.light #homeNav { background-color: rgb(200,200,200); }
body.dark #homeNav { background-color: rgb(56,56,56); }
#homeSlogan { padding: 0 2em; z-index: 2; border-radius: .5em; height: 1.5em; line-height: 1.5em; transform: translateY(-.75em); font-weight: 700; font-size: 1.2em; color: var(--accentText); }
body.light #homeSlogan { background-color: rgb(228,228,228); border: 3px solid rgb(200,200,200); }
body.dark #homeSlogan { background-color: rgb(28,28,28); border: 3px solid rgb(56,56,56); }
#homeNavBtns { display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 7em; overflow: hidden;  }
#homeNavBtns>a {display: flex; width: 16em; height: 7em; margin: 0 0.5%; flex-wrap: nowrap; border: 1px solid; box-sizing: border-box; animation: showNavBtn2 .5s cubic-bezier(.17,.73,.31,1) backwards; overflow: hidden; text-decoration: none; color: inherit; cursor: default; transition: transform .25s cubic-bezier(.17,.73,.31,1);}
#homeNavBtns>a:hover .homeNavIcon, #homeNavBtns>a:active .homeNavIcon {margin-left: -3em;}
#homeNavBtns>a:active {transform: scale(.95);}
#homeNavBtns>a:active, #homeNavBtns>a:active .homeNavIcon { transition-duration: .05s; }
.homeNavIcon {min-width: 3em; height: 100%; transition: margin .25s cubic-bezier(.17,.73,.31,1); }
.homeNavIcon>img {min-width: 3em; height: 2.5em; }
.homeNavCtx {min-width: calc(100% - 3em); height: 100%;}
.homeNavTitle {font-size: 1.75em; font-weight: 700; margin: 0 0.25em; }
.homeNavTxt {width: calc(100% - .5em); margin: 0 0.25em;}
.homeNavArw {display: flex; justify-content: center; align-items: center; font-size: 1.5em;min-width: 2em; height: 100%; color: #fff; }
body.light #homeNavBtns>a { background-color: rgb(228,228,228);}
body.dark #homeNavBtns>a { background-color: rgb(28,28,28);}
#homeNavBtns>#homeNavApp { border-color: rgb(230, 80, 60); }
#homeNavBtns>#homeNavTrv { border-color: rgb(90, 190, 70); animation-delay: .03s; }
#homeNavBtns>#homeNavDev { border-color: rgb(60, 195, 180); animation-delay: .06s; }
#homeNavBtns>#homeNavDes { border-color: rgb(210, 60, 130); animation-delay: .09s; }
#homeNavApp .homeNavTitle { color:rgb(230, 80, 60); }
#homeNavTrv .homeNavTitle { color: rgb(90, 190, 70); }
#homeNavDev .homeNavTitle { color: rgb(60, 195, 180); }
#homeNavDes .homeNavTitle { color: rgb(210, 60, 130); }
#homeNavStr .homeNavTitle { color: hsl(289, 65%, 40%); }
@keyframes showNavBtn2 { 0% {transform: translateY(7em);} 100% {transform: none;} }
@media (max-width: 55em) {
	#homeScreen { min-height: 24em; }

	#homeNav { height: 14.2em; }
	#homeNavBtns {height: 11.3em; flex-wrap: wrap; }
	#homeNavBtns>a { max-width: 45%; width: 45%; min-width: 16em; margin: 0 1% .25em 1%; height: 5.5em;  }
}

@media (max-width: 35em) {
	body.light .promoTitle, body.light .promoDesc {text-shadow: 0 0 .1em rgb(228,228,228); }
	body.dark .promoTitle, body.dark .promoDesc {text-shadow: 0 0 .1em rgb(28,28,28); }
	#homeScreen { min-height: 27em; }

	#homeNav { height: auto; }
	#homeNavBtns {height: auto; flex-wrap: wrap; }
	#homeNavBtns>a { max-width: 90%; width: 90%; min-width: unset; margin: 0 1% .25em 1%; }
	
}
@media (max-height: 25em) {
	#btmNav:not(:hover):not(:active) { opacity: .35; }
	main, #galPicWrap { height: calc(100% - 2.56em); }
}
@media (max-width: 30em) {
	#homeSlogan {padding: 0 .5em;}
}
@media (max-width: 25em) {
	#homeScreen { min-height: 29em; }
}
@media (max-width: 22.5em) {
	#homeSlogan {font-size: .95em;}
}

/*Pic Gallery*/
#galPicWrap { position: fixed; top: 2.76em; left: 0; width: 100%; height: calc(100% - 4.56em); overflow-x: hidden; overflow-y: hidden; display: flex; flex: none; }
#galPicWrap.showing {animation: fadeIn .3s ease-in-out both;}
#galPicWrap.hiding {animation: fadeIn .3s ease-in-out reverse both;}
body.light #galPicWrap{background-color: rgba(228,228,228,.3);}
body.dark #galPicWrap{background-color: rgba(28,28,28,.3);}

#galPicTools { height: 3em; transition: height .25s ease-in-out; width: 12.2em; overflow-y: hidden; display: flex; align-items: flex-start; justify-content: center; position: absolute; bottom: 1em; left: calc(50% - 5.9em); z-index: 2; }
body.light #galPicTools, body.light .wrapBack {outline: .1em solid rgb(205, 205, 205);}
body.dark #galPicTools, body.dark .wrapBack {outline: .1em solid rgb(51, 51, 51);}
#galPicTools:hover {height: 4em;}
body.light #galPicTools, body.light .wrapBack, body.light #galTitle {background-color: rgba(228,228,228,.75); border: 1px solid rgb(200,200,200); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
body.dark #galPicTools, body.dark .wrapBack, body.dark #galTitle {background-color: rgba(28,28,28,.75); border: 1px solid rgb(50,50,50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}

.galPicBtn {width: 4em; height: 4.25em; transition: background-color .25s ease-in-out, opacity .2s ease-in-out; overflow-y: hidden; overflow-x: visible; display: flex; flex: none; justify-content: flex-start; align-items: center; flex-direction: column; color: inherit; text-decoration: none; cursor: default; }
.galPicBtn>svg, .galPicBtn>div.icon, .wrapBack >svg {width: 2em; height: 2em; margin: .5em; transition: all .25s ease-in-out;}
.galPicBtn>div.text { width: 5em; font-size: .8em; height: 1.25em; line-height: 1.25em; text-align: center; transition: transform .25s ease-in-out; overflow-x: visible; }
.galPicBtn:active>svg, .galPicBtn:active>div.icon, .wrapBack:active>svg {width: 2.5em; height: 2.5em; margin: .25em; transition-duration: .05s;}
#galPicTools:hover .galPicBtn>div.text  {transform: translateY(-.75em);}
body.light .galPicBtn>svg, body.light .galPicBtn>div.icon {stroke: rgb(28,28,28); color: rgb(28,28,28);}
body.dark .galPicBtn>svg, body.dark .galPicBtn>div.icon {stroke: rgb(228,228,228); color: rgb(228,228,228);}
.galPicBtn.inactive {opacity: .4; pointer-events: none;}

.galPicSep {width: .1em; height: 100%; }
body.light .galPicSep, body.light .galPicBtn:hover, body.light .galPicBtn:active, body.light .wrapBack:hover, body.light .wrapBack:active {background-color:  rgb(205, 205, 205);}
body.dark .galPicSep, body.dark .galPicBtn:hover, body.dark .galPicBtn:active, body.dark .wrapBack:hover, body.dark .wrapBack:active {background-color:  rgb(51, 51, 51);}

.wrapBack {position: absolute; top: 1em; right: 5%; z-index: 2; width: 3em; height: 2.5em; overflow: hidden; display: flex; flex-wrap: nowrap; flex: none; align-items: center; justify-content: flex-start; transition: all .25s ease-in-out; }
.wrapBack .text {min-width: 5em;}
.wrapBack:hover, .wrapBack:active {width: 7em;}
.wrapBack:active {transition: all .03s ease-in-out;}
.wrapBack>* {flex: none;}
body.light .wrapBack>svg {stroke: rgb(228,40,40); color: rgb(228,40,40);}
body.dark .wrapBack>svg {stroke: rgb(228,40,40); color: rgb(228,40,40);}

.galTitleWrap {width: 100%; height: auto; position: absolute; display: flex; justify-content: center; bottom: 5.5em; z-index: 2;}
#galTitle {width: auto; height: auto; max-width: calc(95% - 2em); min-height: 1.3em; padding: .5em 1em; line-height: 1.3em; font-size: .85em; }
.galTitleWrap.showing {animation: fadeIn .25s ease-in-out both;}
.galTitleWrap.hiding {animation: fadeIn .25s ease-in-out both reverse;}

.galPicItm {width:100%; height: 100%; position: absolute; left: 0; opacity: 1; display: flex; justify-content: center; align-items: center; transition: all cubic-bezier(.17,.73,.31,1) 1s;}
.galPicItm > img {max-width: 85%; max-height: 85%; width: auto; height: auto; box-shadow: 0 0 .5em rgba(128,128,128,.9); pointer-events: none;}
.galPicItm.inactiveL {left: -10%; opacity: 0; pointer-events: none;}
.galPicItm.inactiveR {left: 10%; opacity: 0; pointer-events: none;}


.stySlideShow {overflow: hidden; position: relative; }
.stySlideShow>div {width: 100%; height: 100%; position: absolute;z-index: 1;  background-position: center center; background-clip: content-box; background-size: cover; transition: margin cubic-bezier(.17,.73,.31,1) .8s, opacity cubic-bezier(.17,.73,.31,1) .8s, transform cubic-bezier(.17,.73,.31,1) .25s;}
.stySlideShow>div.before *, .stySlideShow>div.after * {animation: none !important; }
.stySlideShow.toBottom>div.before, .stySlideShow.toTop>div.before {margin-top: 0%; opacity: 0; z-index: 0; pointer-events: none; transition-delay: 0s, 1s, 0s;}
.stySlideShow.toBottom>div.after {margin-top: -100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toTop>div.after {margin-top: 100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toLeft>div.before, .stySlideShow.toRight>div.before {margin-left: 0%; opacity: 0; z-index: 0; pointer-events: none; transition-delay: 0s, 1s, 0s;}
.stySlideShow.toLeft>div.after {margin-left: 100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toRight>div.after {margin-left: -100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}

.stySlideShow.toLeft2>div, .stySlideShow.toRight2>div {width: 110%; transition-duration: .8s, 0s, 5s; }
.stySlideShow.toTop2>div, .stySlideShow.toBottom2>div {height: 110%; transition-duration: .8s, 0s, 5s; }
.stySlideShow.toLeft2>div.initial, .stySlideShow.toRight2>div.initial  {transform: translateX(0%);}
.stySlideShow.toTop2>div.initial, .stySlideShow.toBottom2>div.initial  {transform: translateY(0%);}
.stySlideShow.toLeft2>div {transform: translateX(-10%);}
.stySlideShow.toRight2>div {transform: translateX(10%); margin-left: 10%; }
.stySlideShow.toTop2>div {transform: translateY(-10%);}
.stySlideShow.toBottom2>div {transform: translateY(0%);}
.stySlideShow.toBottom2>div.before, .stySlideShow.toTop2>div.before {margin-top: 0%; opacity: 0; z-index: 0; pointer-events: none; transition-delay: 0s, 1s, 0s;}
.stySlideShow.toBottom2>div.after {transform: translateY(-10%); margin-top: -110%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toTop2>div.after {transform: translateY(0%); margin-top: 100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toLeft2>div.before, .stySlideShow.toRight2>div.before {margin-left: 0%; opacity: 0; z-index: 0; pointer-events: none; transition-delay: 0s, 1s, 0s;}
.stySlideShow.toLeft2>div.after {transform: translateX(0%); margin-left: 100%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toRight2>div.after {transform: translateX(0%); margin-left: -110%; opacity: 1;  z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toBottom2>div.initial {transform: translateY(-10%); }
.stySlideShow.toTop2>div.initial {transform: translateY(0%);  }

.stySlideShow.toLarge>div.initial {transform: scale(1);}
.stySlideShow.toLarge>div {transform: scale(1.09); opacity: 1; z-index: 1; transition-duration: 0s, 0s, 5s; transition-timing-function: cubic-bezier(.17,.73,.31,1), cubic-bezier(.17,.73,.31,1), linear; }
.stySlideShow.toLarge>div.after {transform: scale(1); opacity: 1; z-index: 0; pointer-events: none; transition-duration: 0s, 0s, 0s;}
.stySlideShow.toLarge>div.before {transform: scale(1.12); opacity: 0; z-index: 2; pointer-events: none; transition-duration: 0s, .8s, .8s;}

.picFlip {display: flex; flex-direction: column; overflow: hidden;}
.picFlip.vertical {flex-direction: row;}
.picFlip>div { flex-grow: 1; flex-basis: 0.5em; background-position: 50% 50%; background-size: cover; transition: all .35s cubic-bezier(.17,.73,.31,1);}
.picFlip:not(.vertical)>div {min-height: 0.5em; height: auto; width: 100%;}
.picFlip.vertical>div {min-width: 0.5em; width: auto; height: 100%;}
.picFlip>div:hover { flex-grow: 8; filter: none; box-shadow: 0 0 5em #000; z-index: 2;}
.picFlip>div, .picFlip>img {animation: flipIn 1s cubic-bezier(.17,.73,.31,1) backwards; }
@keyframes flipIn {
	0% {transform: perspective(300px) rotateX(45deg); opacity: 0;}
	100% {transform: none; opacity: 1;}
}
@media (max-width: 35em) {
	.picFlip>div,.picFlip:not(.vertical)>div {width: auto; height: 100%; flex-basis: auto; min-width: 0.25em;}
	#btmNav { display: none; }
	main, #galPicWrap { height: calc(100% - 2.56em); }
}

/*Book Reading*/
.bookNavLeft {position: fixed; top: 2.76em; left: 0em; z-index: 1; }
.bookNav {width: 2.5em; height: 2.5em; border-radius: .5em; box-sizing: border-box; margin: .5em .5em; transition: background-color cubic-bezier(.17,.73,.31,1) .35s; }
.bookNav:active {transition-duration: .03s;}
.bookNav>svg {width: 100%; height: 100%;}
.bookTitle {width: 2em; height: 2em; margin: .5em .2em; font-size: 1.25em; transform-origin: 50% 50%; overflow: visible; opacity: .5; 
			pointer-events: none; transform: rotateZ(-90deg); white-space: nowrap; display: flex; justify-content: flex-end; align-items: center;}

.bookNavAll { width: 35em; height: calc(100% - 4.56em); top: 2.76em; position: fixed; z-index: 2; opacity: 1; left: 0; box-sizing: border-box;
			  transition: opacity cubic-bezier(.17,.73,.31,1) .4s, left cubic-bezier(.17,.73,.31,1) .4s; overflow: hidden; border-right: 1px solid;}
body.light .bookNavAll { background-color: rgba(228,228,228,.9); }
body.dark .bookNavAll { background-color: rgba(28,28,28,.9); }
.bookNavAll.collapsed { left: -10em; opacity: 0; pointer-events: none;  }

#readingNote {margin: 1em 1.5em 0 1.5em; font-weight: 800; opacity: .75; line-height: 1.5em;}
#readingTitle {margin: 0em 0.75em .5em 0.75em; font-weight: 200; font-size: 2em; line-height: 1.5em; width: calc(100% - 1.5em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#readingChap {margin: 0 1.5em 0 1.5em; display: flex; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden; height: calc(100% - 6.5em);  -ms-scroll-translation: vertical-to-horizontal;}
#readingChap>div {width: 15em; flex-basis: 15em; flex-shrink: 1; margin-right: 2em; flex-grow: 1; height: 100%; overflow-y: auto; overflow-x: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; }
#readingChap>div:only-child {margin-right: 0; column-count: 2;}
.readingChapT {font-weight: 800; text-decoration: underline; margin-bottom: .5em; opacity: .75; column-span: all;}
.chapterlist {margin: .75em 0 .2em 0; cursor: pointer; color: inherit; text-decoration: none; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapterlist2 {margin: 0 0 .35em 10%; cursor: pointer; color: inherit; text-decoration: none; width: 90%; position: relative;}
.chapterlist2::before {width: .10%; display: inline-block; position: absolute; margin-left: -10%; content: "▸"; color: var(--accent); text-align: center; text-decoration: none;}
.chapterlist2:hover::before {text-decoration: none;}
.chapterlist:not(.activated):hover, .chapterlist2:hover {text-decoration: underline;}
.chapterlist:last-child {margin-bottom: 1.5em;}
.chapterlist.activated {font-weight: 800;}
.chapterID {display: inline-block; width: 2.5em; font-weight: 800;}
.readingThisChap {order: 2;}
.readingThisChap .chapterlist {font-weight: 800;}

 #bookFooter {padding: 1em 3.5em 2em 3.5em; margin-top: 2.5em;}
body.light #bookFooter {background-color: rgb(238,238,238);}
body.dark #bookFooter {background-color: rgb(18,18,18);}
.bookEBook { font-weight: 800; line-height: 1.5em;}
.bookEChap {font-size: 1.75em; font-weight: 200; margin: .1em 0 .5em 0;}
.bookEndNote {margin: .5em 0 .5em 0;}
.bookEndNote strong {width: 6.75em; display: inline-block;}
.bookEndNote > a, .bookEndNote > span {color: inherit; cursor: pointer;} 
.bookEndNote > span:hover {text-decoration: underline;}
.bookEndNote > a.inactive {display: inline-block;} 
.bookEndCpr {margin-top: 1em;}

@media (max-width: 35em) {
	.bookNavAll.collapsed { left: 5em; }
	.bookNavLeft {display: none;}
	.bookNavAll {width: 100%; height: calc(100% - 2.76em); border-right: 0px solid;}
	#readingNote, #readingTitle,#readingChap  {margin-left: 5%; margin-right: 5%;}
	#bookFooter {padding: 1em 5% 2em 5%;}
}
@media (max-width: 25em) {
	.bookNavAll {overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar;}
	#readingChap>div {margin-bottom: 1.5em;}
	#readingChap {height: auto; display: block;}
}

#clipboardWrap {display: none;}

.settingToggle {display: flex; justify-content: flex-start; align-items: center; position: relative;}
.settingToggleBtn { box-sizing: border-box; width: 3.5em; height: 1.5em; font-size: .75em; border: .15em solid; position: relative; margin-right: 1em; border-radius: .75em;}
.settingToggle.false .settingToggleBtn  { border-color: #555; } 
body.light .settingToggle.false .settingToggleBtn { border-color: #999; }
.settingToggleBtn>div { width: 1.25em; height: 1em; position: absolute; left: .1em; top: .1em; transition: all cubic-bezier(.17,.73,.31,1) .3s; border-radius: .5em 0 0 .5em ; }
.settingToggle.true .settingToggleBtn>div { left: 1.85em; border-radius: 0 .5em .5em 0 ; }
.settingToggle .settingToggleBtn>div {background-color: rgba(200,200,200,1);}
.settingToggleTxtWrap {height: 0%;}
body.light .settingToggle .settingToggleBtn>div {background-color: rgba(56,56,56,1);}
.settingToggleTxt {transition: all cubic-bezier(.17,.73,.31,1) .3s; position: absolute; line-height: 1.5em; margin-top: -0.75em; min-width: 5em;}
.settingToggle.true .settingToggleTxt.true {opacity: 1; margin-left: 0;}
.settingToggle.false .settingToggleTxt.true {opacity: 0; margin-left: -1em;}
.settingToggle.true .settingToggleTxt.false {opacity: 0; margin-left: 1em;}
.settingToggle.false .settingToggleTxt.false {opacity: 1; margin-left: 0em;}

/* Scrolling Assistent*/
.horScr {position: relative; overflow:hidden;}
.scrBtn {position: absolute; z-index: 2; transition: all cubic-bezier(.17,.73,.31,1) .3s; background-color: var(--accent-acrylic); 
         width: 2rem; height: 4rem; display: flex; font-size: 1.5rem; color: white; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
         justify-content: center; align-items: center; color: white;}
.scrBef {left: -2rem; top: calc(50% - 2rem);} 
.scrAft {right: -2rem; top: calc(50% - 2rem);}
.horScr:hover .scrBef {left: 0;}
.horScr:hover .scrAft {right: 0;}
.scrBef:hover, .scrAft:hover {width: 2.5rem}
.scrBef:active, .scrAft:active {width: 3rem; background-color: var(--accent); transition-duration: .03s;}
.horScrEnd {display: block; height: 100%; width: 3em; flex-shrink: 0;}
.scrContainer {-ms-overflow-style: none;}.scrContainer::-webkit-scrollbar {display:none;}