:root {
    --accent: rgb(60, 195, 180);
    --accentText: rgb(60, 195, 180);
    --accent-invisible: rgba(60, 195, 180, 0);
    --accent-transparent: rgba(60, 195, 180, .1);
    --accent-translucent: rgba(60, 195, 180, .3);
    --accent-acrylic: rgba(60, 195, 180, .75);
    --accent-opaque: rgba(60, 195, 180, .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;}
}

.bookNav {border: 1px solid var(--accent); }
.bookNavAll {border-right-color: var(--accent); }
.bookNav:hover {background-color: var(--accent-transclucent);}
.bookNav:active {background-color: var(--accent);}

#strQuit, #proceed {margin-left: 1em; cursor: pointer; text-decoration: underline;}

#devCtx {width: 80%; margin: 2em 10%;}
#devCtx header {font-size: 2em; font-weight: 200; margin-bottom: .25em; color: rgb(60, 195, 180); height: auto; }
#devCtx .devCards{width: 100%; margin: 0 0 .5em 0; height: 12em; }
#devCtx .devCards>.scrContainer {width: calc(100% - 6em); padding: 0 3em; height: 100%; display: flex; justify-content: flex-start; align-items: flex-start; overflow: auto; flex-wrap: nowrap;  }
#devCtx .devCards .devCard { display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid rgb(60, 195, 180); background-image: linear-gradient(var(--accent-transparent) 0%, var(--accent-transparent) 100%); background-repeat: no-repeat; background-position: 0% -12em; width: 15em; height: 10em; flex-basis: 15em; flex-shrink: 0; margin: .5em; cursor: default; justify-content: center; align-items: center; color: inherit; text-decoration: none; transition: background cubic-bezier(.17,.73,.31,1) .5s, border ease-in-out .25s, transform cubic-bezier(.17,.73,.31,1) .5s;}
#devCtx .devCards .devCard:hover, #devCtx .devCards .devCard:active {border-width: .25em; background-position: 0% 0em;}
#devCtx .devCards .devCard:active {transition-duration: 0.03s, 0.03s, 0.03s; transform: scale(.95);}
#devCtx .devCards .devCard .devCardH {font-size: 1.2em; font-weight: 800; text-decoration: underline;}
#devCtx .devCards .devCard .devCardInfo {max-width: 13.5em; max-height: calc(100% - 2.5em); margin-top: .5em;}
#devCtx .devCards .devCard .devCardInfo ul {margin: 0; padding: 0;}
#devCtx .devCards .devCard .devCardInfo ul>li {margin-left: 1em;}
#devCtx .devCards .devCardInv { width: 3em; flex-shrink: 0; height: 100%; }

article {width: 80%; margin: 0 10%;}
article>header {font-size: 2.5em; font-weight: 200; color: rgb(60, 195, 180); line-height: 1.5em; margin-top: 0.5em; margin-bottom: 0.5em; height: auto; }
article section p, article section li {max-width: 37em; line-height: 1.6em; margin-top: 0em; animation: passageIn .5s cubic-bezier(.17,.73,.31,1); }
article section p {margin: 0 0 1.5em 0; text-align:justify;}
article section .incTable {margin: 0 0 1.5em 0; overflow-x: auto;}
article section table {line-height: 1.5em; border-collapse: collapse; }
article section table td {padding: 0.2em .35em; min-width: 5em;}
article section table tr {border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: rgb(48,156,144);}
article section table thead tr {border: 1px solid; border-color: rgb(48,156,144); }
article section table thead {background-color: rgb(48,156,144); color: #fff;}
article section p.followby {margin-bottom: .5em;}
article section ul, article section ol {padding: 0; margin: 0 0 1.5em 0; }
article section ul.scrAct, article section ol.scrAct {padding: 0; animation: passageIn .5s  cubic-bezier(.17,.73,.31,1);}
article section ul li {margin: 0 0 .5em 2em;} article section ol li {margin: 0 0 .5em 2em;}
article strong, article a {color: rgb(60, 195, 180); text-decoration-color: rgb(60, 195, 180);}
article .infoLine {margin-bottom: 2em;}
article section h1 {font-weight: 200; font-size: 1.75em; color: rgb(60, 195, 180); margin-top: 1.75em;  animation: h1In .5s  cubic-bezier(.17,.73,.31,1);}
article section h2 {font-weight: 800; font-size: 1.25em; margin-top: 1.25em;  text-decoration: underline; animation: h2In .5s  cubic-bezier(.17,.73,.31,1); }
.byline-name, .dateline {display: none;}
.floatRight {float: right; margin-left: 1em;} .sideImg { display: flex; justify-content: center; align-items: center; }
.imgType1 {width: 15em; height: 10em; display: flex; justify-content: center; align-items: center;}
.imgType2 {width: 20em; height: 15em; display: flex; justify-content: center; align-items: center;}
.imgType3 {width: 25em; height: 15em; display: flex; justify-content: center; align-items: center;}
#htmlAni {font-family: serif; font-size: 3em; color: rgb(60, 195, 180); animation: circulate 3.5s infinite linear;letter-spacing: 0em;transition: all cubic-bezier(.17,.73,.31,1) 1s; }
.imgEnlargeIn { animation: enlargeIn cubic-bezier(.17,.73,.31,1) .5s; }
#htmlAniWrap:hover>#htmlAni  {letter-spacing: -.25em;}
#htmlAniWrap:active:hover>#htmlAni {letter-spacing: .5em; transition-duration: .1s;}
.inlineScroll {text-decoration: underline; cursor: pointer;}

#htmlAspWrap, #htmlStcWrap {width: 22em; margin-left: 1em;}
#htmlFEE {max-width: 49em;}

@keyframes circulate {
	0% {transform: perspective(300px) rotateY(0deg);}
	50% {transform: perspective(300px) rotateY(180deg);}
	100% {transform: perspective(300px) rotateY(360deg);}
}
@keyframes enlargeIn {
	0% {transform: scale(.9); opacity: 0;}
	100% {transform: none; opacity: 1;}
}
@keyframes passageIn {0% {transform: translateY(2em); opacity: 0;} 100% {transform: none; opacity: 1;}}
@keyframes h1In {0% {transform: translateX(-2em); opacity: 0; letter-spacing: -.25em;} 100% {transform: none; opacity: 1; letter-spacing: 0em;}}
@keyframes h2In {0% {transform: translateY(-2em); opacity: 0;} 100% {transform: none; opacity: 1;}}

#readingTitle, .chapterID, .chapterlist.activated, .bookEChap, .bookEndNote strong  {color: rgb(60, 195, 180);}

@media (max-width: 45em) {
	article {width: calc(100% - 5em); margin: 0 1.5em 0 4em;}
	#devCtx {width: 100%; margin: 2em 0;}
    #devCtx header {margin: 0 2.5% .25em 2.5%; width: 95%; text-align: center; justify-content: center;}
}
@media (max-width: 35em) {
	article {width: 90%; margin: 0 5%;}
    #devCtx .devCards {width: 100%; margin: 0 0% .5em 0%; height: 24em;  }
    #devCtx .devCards > .scrContainer {flex-direction: column; flex-wrap: wrap;}
    #devCtx .devCards .devCard {flex-basis: 10em;}
	.floatRight {float: none; width: 100%; margin-left: auto;}
	.sideImg {float: none !important; width: 100% !important; margin: unset !important;}
}


.displayCode {border: 1px solid rgb(60, 195, 180); box-sizing: border-box; margin-bottom: 1.5em; animation: fadeIn .5s ease-in-out; }

.displayCode div.codeCtx { counter-reset: dcLine; overflow-x: auto; padding: .75em; }
span.codeCtx { padding: 0 .5em; }
body.dark .codeCtx::selection, body.dark .codeCtx ::selection {background-color: rgba(255,255,255,.15);}
body.dark .codeCtx::-moz-selection, body.dark .codeCtx ::-moz-selection {background-color: rgba(255,255,255,.15);}
body.light .codeCtx::selection, body.light .codeCtx ::selection {background-color: rgba(56,56,56,.15);}
body.light .codeCtx::-moz-selection, body.light .codeCtx ::-moz-selection  {background-color: rgba(56,56,56,.15);}

.codeCtx, .codeCtx>*, .codeCtx *>* { -ms-user-select: text; -webkit-user-select: text; -moz-user-select: text; user-select: text; cursor: text;}

.codeCtx .dcLine, span.codeCtx, input.codeCtx, .codeCtx.syntax>div { font-family: "Source Code Pro", "Noto Sans Mono", Consolas, 'Lucida Console', 'Courier New', "Source Sans Pro", "Microsoft JhengHei", sans-serif; white-space: pre;}
.codeCtx.syntax {padding: 1em;}
span.codeCtx {white-space: pre-wrap;}
.svgCode {font-family: "Source Code Pro", "Noto Sans Mono", Consolas, 'Lucida Console', 'Courier New', "Source Sans Pro", "Microsoft JhengHei", sans-serif;}
.codeCtx .dcLine.calLine, .codeCtx.syntax>div {margin-left: 2em; line-height: 1.25em; height: 1.25em; outline: 2px solid rgba(28,28,28,0); box-sizing: border-box; transition: outline-color ease-in-out .25s; }
.codeCtx.syntax>div.core {line-height: 2.5em; height: 2.5em;}
.codeCtx.editable .dcLine.calLine {line-height: 1.5em; height: 1.5em; display: flex; align-items: center;}
/*.codeCtx .dcLine.calLine:hover:not(:active) {outline: 2px solid rgba(28,28,28,.3);}
body.dark .codeCtx .dcLine.calLine {outline: 2px solid rgba(228,228,228,0);}
body.dark .codeCtx .dcLine.calLine:hover {outline: 2px solid rgba(228,228,228,.3);}*/
.codeCtx .dcLine.calLine::before {counter-increment: dcLine; content: counter(dcLine); width: 1.5em; height: 1.25em; display: inline-block; position: absolute; margin-left: -2.25em; padding: 0 .25em; text-align: right; margin-right: .5em;opacity: .9; transition: opacity .25s ease-in-out; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;}
.codeCtx.editable .dcLine.calLine::before {height: 1.5em; }
body.dark .codeCtx .dcLine.calLine::before { background-color:  rgba(28, 28, 28, .9);}
body.light .codeCtx .dcLine.calLine::before { background-color:  rgba(228, 228, 228, .9);}
body.dark .codeCtx .dcLine.calLine:hover::before {opacity: 1; background-color:  rgba(66, 66, 66, .9);}
body.light .codeCtx .dcLine.calLine:hover::before {opacity: 1; background-color:  rgba(190, 190, 190, .9);}
body.light .codeCtx .dcLine.calLine::before {color: hsl(100,70%,40%); }
body.dark .codeCtx .dcLine.calLine::before {color: hsl(100,70%,80%);}
.codeCtx .dcBrk {color: hsl(0,10%,50%); }
body.dark .codeCtx .dcKey {color: hsl(165,60%,60%); }
body.light .codeCtx .dcKey {color: hsl(165,60%,40%); }
body.dark .codeCtx .dcAttr {color: hsl(0,60%,65%); }
body.light .codeCtx .dcAttr {color: hsl(0,60%,50%); }
body.dark .codeCtx .dcVal {color: hsl(120,60%,60%); }
body.light .codeCtx .dcVal {color: hsl(120,60%,45%); }
body.dark .codeCtx .dcValD {color: hsl(120,40%,50%); font-style: italic; }
body.light .codeCtx .dcValD {color: hsl(120,40%,40%); font-style: italic; }
body.dark .codeCtx .dcValN {color: hsl(120,15%,50%);}
body.light .codeCtx .dcValN {color: hsl(120,15%,40%); }
body.dark .codeCtx .dcValS {color: hsl(15,35%,55%);}
body.light .codeCtx .dcValS {color: hsl(15,35%,45%); }
body.dark .codeCtx .dcAttrD {color: hsl(0,40%,50%); font-style: italic; }
body.light .codeCtx .dcAttrD {color: hsl(0,40%,40%); font-style: italic; }
body.dark .codeCtx .dcCom {color: hsl(90,65%,35%); }
body.light .codeCtx .dcCom {color: hsl(90,65%,45%); }
body.dark .codeCtx .dcCR {color: hsl(35,70%,50%); }
body.light .codeCtx .dcCR {color: hsl(35,70%,45%); }
body.dark .codeCtx .dcFtn {color: hsl(200,65%,55%); }
body.light .codeCtx .dcFtn {color: hsl(200,65%,48%); }
body.dark .codeCtx .dcSMore {color: hsl(200,70%,60%); font-weight: 800; }
body.light .codeCtx .dcSMore {color: hsl(200,70%,55%); font-weight: 800; }
body.dark .codeCtx a {color: inherit; cursor: pointer; text-decoration: inherit; }
body.light .codeCtx a {color: inherit; cursor: pointer; text-decoration: inherit; }
body.dark .codeCtx a:hover, body.light .codeCtx a:hover { text-decoration: underline; }
.codeCtx .dcTab {display: inline-block; width: 2em; flex-shrink: 0; overflow: hidden; vertical-align:text-bottom;}
.codeCtx .dcHL {background-color: rgb(244,244,10); font-weight: 800; color: rgb(28,28,28); padding: 0 .1em;}
.codeCtx input {line-height: 1.3em; height: 1.3em; -webkit-appearance: textfield; -moz-appearance: textfield;}
.codeCtx input.error {border-color: red;}
.codeCtx input.short {width: 2em;}
.codeCtx input.med {width: 4em;}
.codeCtx input.wide {width: 4em;}

.codeTitle, .codeFootNote {background-color: var(--accent-transparent); } .codeIntDem {display: flex;}
.codeTitle {display: flex; height: 2em; line-height: 2em; align-items: center; }

.codeFootNote {height: auto; line-height: 1.3em; padding: .5em 0 .75em 0;}
.codeFootNote p, .codeFootNote ul, .codeFootNote ol, .codeFootNote dl {margin: 0 1em .5em 1em; max-width: unset; padding: unset;}

.codeFootNote div {margin: 0 1em; max-width: unset; padding: unset;}
.codeFootNote>.codeIntInst {max-width: 55%; margin: 0 .5em 0 1em;}
.codeFootNote>.codeIntRes {margin: 0 1em 0 .5em;}
.codeTName, .synRefIcon {margin: 0 1em; font-weight: 800;}
.synRef {height: 100%; display: flex; justify-content: center; align-items: center; width: 3.25em; background-color: var(--accent-transparent); margin-right: .5em; cursor: pointer; transition: all cubic-bezier(.17,.73,.31,1) .5s; color: inherit; text-decoration: none;}
.synRef:hover {text-decoration: underline;}
.synRef:active {transition-duration: .01s; background-color: var(--accent); color: #fff;}
.fullSynSwitch {width: 9em; height: 100%; display: flex; margin: 0 1em 0 auto;}
.fullSynSwitch>* {font-size: .85em;}
.fullSynSwitch>.toggleFullSyn {margin-left: .5em;}
.codeTName2 {margin: 0 1em 0 -.25em;}
.codeTType {font-size: .85em; padding: 0 .5em; background-color: rgb(70, 90, 170); color: #fff; border-radius: .25em; box-sizing: border-box; font-weight: 800; line-height: 1.5em;}
.codeTType.css {background-color: rgb(170, 65, 90);}
.codeTCopy {margin: 0 1em 0 auto; padding: 0 1em; height: 100%; box-sizing: border-box; line-height: 2em; transition: all cubic-bezier(.17,.73,.31,1) .3s; border: 1px solid rgb(60, 195, 180); border-top: 0px; border-radius: 0 0 .25em .25em;}
.codeTCopy:hover {background-color: var(--accent-translucent);}
.codeTCopy:active {background-color: rgb(60, 195, 180); color: white; transition-duration: .03s;}
.codeDem {overflow: hidden;}
body.light .codeDem {background-color: rgb(228,228,228); color: rgb(28,28,28);}
body.dark .codeDem {background-color: rgb(28,28,28); color: rgb(228,228,228);}
.codeIntDem > * {flex-grow: 1; flex-basis: 50%; margin: 0 .5em;}
.codeIntRes { border:  1px solid rgb(60, 195, 180); position: relative; overflow: auto; max-height: 25em;}
.codeFootNote .selectVals {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 1em; }
.codeFootNote .selectVals>* {margin: .25em 1em; height: auto; min-height: 2em; line-height: 2em; border: 1px solid rgb(60, 195, 180); border-radius: .5em; cursor: pointer;transition: all cubic-bezier(.17,.73,.31,1) .3s; }
.codeFootNote .selectVals>*:active {background-color: var(--accent-translucent); transition-duration: .03s;}
.codeFootNote .selectVals .codeCtx, .codeFootNote .selectVals .codeCtx>*, .codeFootNote .selectVals .codeCtx *>* {cursor: pointer; user-select: none; -ms-user-select: none;}

.flexInput {display: flex; align-items: center;}
.flexInput > label {flex-basis: 5em; flex-shrink: 0; flex-grow: 0; font-weight: 800;}
.flexInput > input {flex-basis: 50%; flex-grow: 1;}

@media (max-width: 35em) {
	.codeTName {margin: 0 .5em;}
	.codeTCopy {margin: 0 .5em 0 auto; padding: 0 .5em;}
	.codeTName2 {display: none;}
	.codeIntDem {flex-wrap: wrap;} .codeIntDem>* {flex-basis: 100%; width: 100%; }
	.codeFootNote>.codeIntInst  {max-width: calc(100% - 2em);margin: 0 1em;}
	.codeFootNote>.codeIntRes {margin: 1em 1em 0em 1em;}
}


.devPgTitle, .devPgCtx {width: 80%; margin-left: 10%; display: flex; align-items: stretch; margin-top: 1em;}
main>div:last-child {margin-bottom: 2em;}
.devLogo {width: 8em; height: 8em; display: flex; justify-content: center; align-items: center;} .devLogo > img {width: 5em; height: 5em;} 
.devPgTitleRight { width: calc(100% - 6.5em); margin-left: 1.5em; }
.devPgTitleRight:first-child {margin-left: 0;}
.devPgTitleTxt {font-size: 2.5em; font-weight: 300; line-height: 1.6em;}
body.light .devPgTitleTxt, body.light .devPgDlLc  {color: #444;}
body.dark .devPgTitleTxt {color: #fff; text-shadow: 0 0 .15em #fff;}
body.dark .devPgDlLc {color: #bbb;}

.devPgTitleDls { width: 100%; display: flex; align-items: flex-end; height: calc(100% - 4em);  }
.devPgDlBtn { 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; }
.devPgDlBtn:active {transform: scale(.95); transition-duration: .03s;}
.devPgDlLc {font-size: .85em; line-height: 1.5em;}

header {font-weight: 200; font-size: 2.3em; color: rgb(60, 195, 180); 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(60, 195, 180); 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);}

.devPgCtx1 {max-height: 23em;} .devPgCtx1>div {max-height: 23em;}
.devPgDesc {width: 35%;}
.devPgScs, .devPgDem {width: calc(65% - 2em); margin-left: 2em;}
.devPgDem iframe, .devPgDem .demArea {width: 100%; border: 1px solid rgb(60, 195, 180); box-sizing: border-box;}
.devPgDesc section {text-align: justify; max-height: 15.975em; overflow-x: hidden; overflow-y: auto; padding-right: 1em;  }
.devPgDesc section p {margin: 0 0 .5em 0; }
/*follow height, but Chrome has bug now; height: calc(100% - 4.025em);*/
.devPgScs section { display: flex; align-items: flex-start; height: 14em; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -ms-scroll-translation: vertical-to-horizontal; }
.devPgScs section img {max-width: 400px; max-height: calc(100% - 1.5em); width: auto; height: auto; flex: none;  margin: 0; display: block; margin: 0 .25em .25em 0;}
body.light .devPgScs section img { border: 1px solid rgb(210, 210, 210);}
body.dark .devPgScs section img { border: 1px solid rgb(46, 46, 46);}

.devPgCtx2 {height: 22em;}
.devPgGlr {width: calc(65% - 2em); margin-right: 2em;}
.devPgGlr 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; }
.devPgGlr section img {height: calc(50% - .75em); flex: none; width: auto; max-height: 360px; margin: 0; display: block; margin: 0 .25em .25em 0;}
.devPgGlr section a {width: 5em; height: calc(100% - 1.25em); display: flex; justify-content: center; align-items: center; color: rgb(60, 195, 180); font-weight: 700; transition: background-color .25s ease-in-out; }
.devPgGlr section a:hover {background-color: rgba(128,128,128,.25);}
.devPgInfo section {text-align: justify; max-height: calc(100% - 4.025em); overflow-x: hidden; overflow-y: auto; padding-right: 1em;  }
.devPgInfo section p {margin: 0 0 .5em 0;}
.devPgInfo section ul {margin-left: -1.5em; line-height: 1.4em;}
.devPgInfo section li {margin: 0 auto .25em 0;}
.devPgInfo section .devInfoMore, .devPgGlr header a {font-weight: 800; color: rgb(60, 195, 180);}
.devPgGlr header a {display: block; margin-left: auto; font-size: 0.4347826em;}
.devInfoMore { text-decoration: underline; cursor: pointer; display: inline-block; }

.devPgCtx3 {max-height: 28em;}
.devPgFet {width: 50%;}
.devPgVer {width: calc(50% - 2em); margin-left: 2em;}
.devPgInfo.devPgVer section ul {margin-top: 0; }

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

.appIcon, .allAppDld, .devPgDlBtn { background-color: rgb(60, 195, 180); }
.appActions { color: rgb(60, 195, 180); }

@media (max-width: 55em) {
	.devPgTitle, .devPgCtx, .devPgCtx1, .devPgCtx2, .devPgCtx3, .devPgCtx4 {width: 90%; margin-left: 5%;}
	.devPgDem, .devPgScs {width: calc(65% - 1em); margin-left: 1em;}
}
@media (max-width: 45em) {
	.devPgCtx, .devPgCtx1, .devPgCtx2, .devPgCtx3, .devPgCtx4  {height: auto; flex-wrap: wrap; max-height: unset;}
	.devPgScs, .devPgDem,.devPgDesc, .devPgGlr, .devPgKnI, .devPgReq, .devPgVer, .devPgFet {width: 100%; margin-left: 0; margin-right: 0;}
	.devPgGlr section {height: 18em;}
}
@media (max-width: 35em) {
	.devPgTitle, .devPgCtx, .devPgCtx1 {width: 95%; margin-left: 2.5%;}
	.devPgScs header {flex-wrap: wrap; height: auto; flex-direction: column; align-items: flex-start;}
	.devPgScs header select {align-self: center; margin-left: unset;}

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

	.devPgTitleRight {width: 100%; margin: 0;}
	.devPgTitleTxt {width: 100%; text-align: center;}
	.devPgTitleDls {justify-content: center;}

}

#CSSAniWrap {flex-direction: column;} #CSSAniTxt {margin-top: 4em; font-size: .9em; text-align: center;}
#fourColorArt {width: 0; height: 0; position: relative; transform-style: preserve-3d; animation: fourColor 10s linear infinite;}
#fourColorArt>div {position: absolute; width: 5em; height: 2em; transform-origin: 0 0;}
#fourColorArt>div>div:first-child {width: 1.7em; height: 1.7em; margin-left: .6em; transition: margin-left .6s cubic-bezier(.17,.73,.31,1); border-radius: 0 1em 1em 1em; transform: translateY(-1em) rotateZ(-45deg);}
body.light #fourColorArt>div>div:first-child {border: .2em solid rgb(228,228,228);}
body.dark #fourColorArt>div>div:first-child {border: .2em solid rgb(28,28,28);}
#fourColorArtWrap {min-height: 10em;}
#CSSAniWrap:hover>#fourColorArt>div>div:first-child  {margin-left: .4em; transition-duration: .3s;}
#CSSAniWrap:active>#fourColorArt>div>div:first-child  {margin-left: 2.3em; transition-duration: .1s;}
#fourColorArt>div>div { background-color: rgb(60, 195, 180);}
#fourApp {animation: appRotate 4s linear infinite;} #fourDev {animation: devRotate 4s linear infinite;} 
#fourTrv {animation: trvRotate 4s  linear infinite;} #fourDes {animation: desRotate 4s linear infinite;}
@keyframes fourColor {
	0% {transform: perspective(500px) rotateY(0deg);}
	25% {transform: perspective(500px) rotateY(90deg);}
	50% {transform: perspective(500px) rotateY(180deg);}
	75% {transform: perspective(500px) rotateY(270deg);}
	100% {transform: perspective(500px) rotateY(360deg);}
}
@keyframes appRotate {
	0% {transform: perspective(300px) rotateY(0deg) rotateZ(0deg);}
	25% {transform: perspective(300px) rotateY(0deg) rotateZ(90deg);}
	50% {transform: perspective(300px) rotateY(0deg) rotateZ(180deg);}
	75% {transform: perspective(300px) rotateY(0deg) rotateZ(270deg);}
	100% {transform: perspective(300px) rotateY(0deg) rotateZ(360deg);}
}
@keyframes trvRotate {
	0% {transform: perspective(300px) rotateY(45deg) rotateZ(90deg);}
	25% {transform: perspective(300px) rotateY(45deg) rotateZ(180deg);}
	50% {transform: perspective(300px) rotateY(45deg) rotateZ(270deg);}
	75% {transform: perspective(300px) rotateY(45deg) rotateZ(360deg);}
	100% {transform: perspective(300px) rotateY(45deg) rotateZ(450deg);}
}
@keyframes devRotate {
	0% {transform: perspective(300px) rotateY(90deg) rotateZ(180deg);}
	25% {transform: perspective(300px) rotateY(90deg) rotateZ(270deg);}
	50% {transform: perspective(300px) rotateY(90deg) rotateZ(360deg);}
	75% {transform: perspective(300px) rotateY(90deg) rotateZ(450deg);}
	100% {transform: perspective(300px) rotateY(90deg) rotateZ(540deg);}
}
@keyframes desRotate {
	0% {transform: perspective(300px) rotateY(135deg) rotateZ(270deg);}
	25% {transform: perspective(300px) rotateY(135deg) rotateZ(360deg);}
	50% {transform: perspective(300px) rotateY(135deg) rotateZ(450deg);}
	75% {transform: perspective(300px) rotateY(135deg) rotateZ(540deg);}
	100% {transform: perspective(300px) rotateY(135deg) rotateZ(630deg);}
}

#screenGrid {display: flex; width: 100%; height: 8em;}
#screenGrid>div {flex-grow: 1; flex-basis: 30%;}
.sCrn {display: flex; flex-direction: column;}
#screenGrid .sLine {display: flex; flex-grow: 1; flex-basis: 30%;}
#screenGrid .sLine>div, #sResult {box-sizing: border-box; border: 1px solid #000; border-left: 0; border-right: 0; flex-grow: 1; flex-basis: 30%; display: flex;}
#screenGrid .sLine>div>div {flex-basis: 30%;flex-grow: 1; }
#screenGrid .sLine>div>div:first-child {animation: aniRed 5s linear infinite;}
#screenGrid .sLine>div>div:nth-child(2) {animation: aniGreen 5s linear infinite;}
#screenGrid .sLine>div>div:nth-child(3) {animation: aniBlue 5s linear infinite;}
#sResult {animation: aniResult 5s linear infinite;}

@keyframes aniRed {
	0% {background-color: rgb(0,0,0);}
	5%, 15% {background-color: rgb(255,0,0);}
	20%, 60% {background-color: rgb(0,0,0);}
	65%, 100% {background-color: rgb(255,0,0);}
}
@keyframes aniGreen {
	0%, 20% {background-color: rgb(0,0,0);}
	25%, 35% {background-color: rgb(0,255,0);}
	40%, 72.5% {background-color: rgb(0,0,0);}
	77.5%, 100% {background-color: rgb(0,255,0);}
}
@keyframes aniBlue {
	0%, 40% {background-color: rgb(0,0,0);}
	45%, 55% {background-color: rgb(0,0,255);}
	60%, 87.5% {background-color: rgb(0,0,0);}
	90%, 100% {background-color: rgb(0,0,255);}
}
@keyframes aniResult {
	0% {background-color: rgb(0,0,0);}
	5%, 15% {background-color: rgb(255,0,0);}
	20% {background-color: rgb(0,0,0);}
	25%, 35% {background-color: rgb(0,255,0);}
	40% {background-color: rgb(0,0,0);}
	45%, 55% {background-color: rgb(0,0,255);}
	60% {background-color: rgb(0,0,0);}
	65%, 72.5%  {background-color: rgb(255,0,0);}
	77.5%, 87.5% {background-color: rgb(255,255,0);}
	90%, 100% {background-color: rgb(255,255,255);}
}

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