:root {
    --accentSec: hsl(57, 93%, 50%);
    --accentSec-invisible: hsla(57, 95%, 50%, 0);
    --accentSec-transparent: hsla(57, 95%, 50%, .1);
    --accentSec-translucent: hsla(57, 95%, 51%, .3);
    --accentSec-acrylic: hsla(57, 95%, 51%, .75);
    --accentSec-opaque: hsla(57, 95%, 51%, .9);
    --accentSec-lighter: hsla(57, 95%, 51%, .9);
}

#dexLogoSource {animation: fillLogo 5s infinite; }
@keyframes fillLogo {
	0% {filter: hue-rotate(0deg);}	12.5% {filter: hue-rotate(45deg);} 25% {filter: hue-rotate(90deg);}	37.5% {filter: hue-rotate(135deg);} 50% {filter: hue-rotate(180deg);}
	62.5% {filter: hue-rotate(225deg);} 75% {filter: hue-rotate(270deg);}	87.5% {filter: hue-rotate(315deg);} 100% {filter: hue-rotate(360deg);}
}

#abtDexSlogan {width: 100%; display: flex; justify-content: center; align-items: center; margin: .5em 0; flex-wrap: wrap;}
#abtDexSlogan > div { font-weight: 700; color: var(--accentText); margin: 0 .25em; font-size: 1.2em; animation: sloganIn cubic-bezier(.17,.73,.31,1) .5s both; }
#abtDexSlogan>div:first-child {animation-delay: .2s;}
#abtDexSlogan>div:nth-child(2) {animation-delay: .25s;}
@keyframes sloganIn {
	0% {opacity: 0; transform: translateY(.5em); }
	100% {opacity: 1; transform: none;}
}

/*New Style-*/
main {perspective: 20em; perspective-origin: 50% 50%; }

.abt2018 {width: 100%; margin: 0; display: block; }

#abtHeadBG {width: 100%; height: 15rem; filter: sepia(95%) hue-rotate(19deg) saturate(150%);}
#trvBG {width: 100%; height: 100%; }

.abt2018 header.abtHeader { width: 100%; height: 0; position: relative; overflow: visible; margin: 0; font-size: 1em; z-index: 7; transform: translateZ(1rem); }
.abt2018 header.abtHeader .abtHeaderTxtWrapper { 
    position: absolute; left: 10%;  color: var(--accentText);
    z-index: 11; overflow: hidden;  
    width: 35vw; height: 8em; margin-top: -5.5rem; border: solid .5rem;  box-shadow: 0rem 0rem 1.5rem var(--dark-seethrough);
    border-radius: 1em;
    backdrop-filter: blur(20px);
}
body.light .abt2018 header.abtHeader .abtHeaderTxtWrapper {border-color: var(--lighter); background-color: var(--light-opaque);}
body.dark .abt2018 header.abtHeader .abtHeaderTxtWrapper {border-color: var(--darkless); background-color: var(--dark-opaque);}

.abt2018 header.abtHeader .abtHeaderTxt {
    width: 35vw; height: 100%; font-size: 3em; line-height: 2.7em; padding: 0 5% 0 5%; 
}
.abt2018 header.abtHeader  .abtHeaderTxt::first-letter {font-weight: 800; font-size: 1.2em; line-height: 1em;}

.abtSec {display: flex; box-shadow: 0rem 0rem 2.5rem var(--dark); z-index: 5; position: relative;}
.abtSec > div {align-self: stretch;}
#abtCtxLogo {width: 30%; min-height: 25rem; }
body.light #abtCtxLogo {background-color: var(--lighter);}
body.dark #abtCtxLogo {background-color: var(--darker);}

#abtCtxDx {width: 75%; }
.abtCtx {background-color: var(--accentSec); padding-bottom: 10rem; background-size: auto 6rem; background-repeat: repeat-x; background-position: bottom;}
body.light .abtCtx { background-image: url("img/aboutCtxBG.svg"); }
body.dark .abtCtx { background-image: url("img/aboutCtxBGDark.svg"); }
.stripe {width: 1.5em; background-repeat: repeat; background-size: 1.5rem 1.5rem; background-image: url("/img/aboutStripeDark.svg");}
.stripeHor {height: 1.5em; width: 100%; background-repeat: repeat; background-size: 1.5em 1.5em; background-image: url("/img/aboutStripeDark.svg"); }
body.light .stripe.start {background-color: var(--accentSec); }
body.light .stripe.mid {background-color: var(--lighter); }
body.light .stripe.end {background-color: var(--light); }
body.dark .stripe.start {background-color: var(--light);  }
body.dark .stripe.mid {background-color: var(--accentSec);}
body.dark .stripe.end {background-color: var(--light); }
#abtDX .abtPad {width: 10%;} #abtDex .abtPad {width: 5%;}
body.light .abtPad {background-color: var(--dark)}
body.dark .abtPad {background-color: var(--dark)}

.abtCtx .abtCtxWrapperOut { border-radius: 1.5rem; margin: 2rem 15% 1rem 5%; padding: .5rem 1.25rem 1rem .5rem; }
#abtDX .abtCtxWrapperOut {width: calc(80% - 1.75rem); }
.abtCtx .abtCtxWrapperOut:first-child { margin: 5.5rem 15% 1rem 5%; position: relative; z-index: 8;}
.abtCtx .abtCtxWrapperIn { padding: 1rem 0; border-radius: 1rem; }
.abtCtx .abtCtxWrapperIn p, .abtCtxWrapperIn h2, .abtCtx .abtCtxWrapperIn>div { margin: .75em 5%; line-height: 1.6em; }
.abtCtx .abtCtxWrapperIn p strong { color: var(--accentText); }
body.light .abtCtxWrapperOut, body.dark .abtCtxWrapperIn { background-color: var(--darker); }
body.light .abtCtxWrapperIn { background-color: var(--lighter); }
body.dark .abtCtxWrapperOut {background-color: var(--darkless)}

#abtLogoAll {width: 100%; height: calc(100% - 4.5em); display: flex; justify-content: center; align-items: center;}
#abtLogoAll>* {width: 75%;}

#abtCtxDex {width: 85%;}
#abtCtxDex .abtCtxWrapperOut {width: calc(70% - 1.75em); }
#abtSlogan { text-align: center; font-size: 1.25em; margin-top: 1.5em; }

#abtCtxDex h2 {margin-bottom: .25em; margin-top: 1.5em;}
.eduRows {display: flex; flex-direction: column; }
.eduRow {display: flex; flex-wrap: wrap; margin: 0 0 1em 0;}
.eduI, .eduE, .eduP {width: 100%; font-size: .9em;}
.eduD {margin-left: auto; opacity: .85; font-style: italic;}
.eduE {display: flex; flex-wrap: wrap;}
.eduEItem {display: flex; margin-right: 2em; }
.eduEItem>div:first-child {font-weight: 800; margin-right: 1em;}

#profilePic {position: relative; width: 0%; overflow: visible; pointer-events: none;}
#profilePic > img {position: absolute; z-index: 3; height: 85%; top: 15%; transform: translateX(-50%);}
#dexBG {width: 25%; filter: saturate(200%); background-color: var(--accentSec);}
#dexBG > div {width: 100%; height: 100%; filter: brightness(130%) contrast(0.5) sepia(2) hue-rotate(19deg) saturate(200%);}
#abtDexEnd {width: 0; overflow: visible; position: relative;}
#abtDexEnd>div {position: absolute; height: 100%; z-index: 3; margin-left: -1.5em;}

@media (max-width: 75rem) {
    #abtDX .abtPad, #abtDex .abtPad {width: 0;}
    #abtCtxLogo {width: 34%;} #abtLogoAll>* {width: 85%;}
    .abt2018 header.abtHeader .abtHeaderTxtWrapper { left: 7.5%; width: 45vw; }
    .abt2018 header.abtHeader .abtHeaderTxt {width: 45vw;}
    #abtCtxLogo {width: 25%;} #abtCtxDx {width: 80%; }
    .eduD {order: 10;}
    #abtCtxDex .abtCtxWrapperOut {width: calc(75% - 1.75rem); }
}
@media (max-width: 65rem) {
    .abt2018 header.abtHeader .abtHeaderTxtWrapper { width: 50vw; }
    .abt2018 header.abtHeader .abtHeaderTxt {width: 50vw;}
    .abtCtx .abtCtxWrapperOut { margin: 2rem 5% 1rem 5%;  }
    #abtDX .abtCtxWrapperOut {width: calc(90% - 1.75rem); }
    #abtCtxDex .abtCtxWrapperOut {width: calc(80% - 1.75rem); }
    #abtCtxLogo {width: 38%;} #abtLogoAll>* {width: 100%;}
    #dexBG {width: 22%;}
    #profilePic > img {height: 80%; top: 20%;}
}
@media (max-width: 55rem) {
    #dexBG {width: 18%;}
    #profilePic > img {height: 75%; top: 25%;}
}
@media (max-width: 45rem) {
    #abtCtxLogo, #abtDX .stripe.mid {display: none; } 
    #abtCtxDx {width: 100%;}
    .abt2018 header.abtHeader .abtHeaderTxtWrapper { width: calc(70% - 1rem); left: 15%; display: flex; justify-content: center;}
    .abt2018 header.abtHeader .abtHeaderTxt {width: auto; min-width: 15em; text-align: center; }
    .abtSec {border-top: 1rem solid;}
    body.light .abtSec {border-color: var(--lighter); }
    body.dark .abtSec {border-color: var(--darkless); }
    #dexBG {width: 15%;}
    .abtCtx .abtCtxWrapperOut:first-child { margin: 4.5rem 15% 1rem 5%; }
    #profilePic > img {height: 70%; top: 30%;}
}
@media (max-width: 35rem) {
    #abtHeadBG {display: none;}
    .abt2018 header.abtHeader .abtHeaderTxtWrapper { position: relative; box-shadow: unset; width: 100%; left: 0; margin-top: 0; border-left: none; border-right: none; border-top-width: 1rem; border-bottom: none;}
    .abt2018 header.abtHeader {height: auto; transform: none;}
    body.light .abt2018 header.abtHeader {background-color: var(--light); }
    body.dark .abt2018 header.abtHeader {background-color: var(--dark); }
    .abt2018 header.abtHeader .abtHeaderTxtWrapper::before { content: unset; position: unset; backdrop-filter: unset; -webkit-backdrop-filter: unset;}

    .abtCtx .abtCtxWrapperIn p, .abtCtxWrapperIn h2, .abtCtx .abtCtxWrapperIn>div { margin: .75em 3.5%; line-height: 1.5rem; }
    .stripe {width: 1em;} #abtDexEnd>div {margin-left: -1em;}
    .abtCtx .abtCtxWrapperOut:first-child { margin: 1rem 5% 1rem 5%; }
    .abtCtx {padding-bottom: 2rem;}
    .abtCtx .abtCtxWrapperOut {padding: .5rem;}
    #abtDX .abtCtxWrapperOut {width: calc(90% - 1rem); }
    #abtCtxDex .abtCtxWrapperOut {width: calc(85% - 1rem); }
}
@media (max-width: 30rem) {
    .stripe {width: 0em;} 
    #abtCtxDex {width: 100%;}
    #dexBG {display: none;}
    #abtDX .abtCtxWrapperOut, #abtCtxDex .abtCtxWrapperOut {width: calc(95% - 1rem); margin: 1rem 2.5%; }
    .abt2018 header.abtHeader .abtHeaderTxtWrapper {height: 5em;}
    .abt2018 header.abtHeader .abtHeaderTxt { font-size: 2.5em; line-height: 2em; }
    .abt2018 header.abtHeader  .abtHeaderTxt::first-letter {line-height: 1.66em;}
    #profilePic {display: none;}
}

#abtSkills {width: 100%; display: flex; justify-content: center; align-items: center; position: relative; transform-style: preserve-3d; }
#skBGGal {width: 100%; height: 150%; position: absolute; pointer-events: none; transform: translateY(-16%) translateZ(-4em) scale(1.25); transform-origin: 50% 50%; z-index: -1;}
#abtSkillsWrapper {width: 75%; display: flex; justify-content: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#abtSkillsCtx {width: 90%; background-color: var(--light-acrylic); display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 3rem;}
body.light #abtSkillsWrapper {background-color: var(--light-translucent); }
body.dark #abtSkillsWrapper {background-color: var(--dark-translucent); }
body.light #abtSkillsCtx {background-color: var(--light-acrylic);}
body.dark #abtSkillsCtx {background-color: var(--dark-acrylic);}
#abtSkillsCtx h1 { font-size: 2.75em; font-weight: lighter; margin-bottom: .25em;}

#skillCards {width: 90%; display: flex; justify-content: space-around;}
#skillCards h2 {margin: 0 .5rem .25rem .5rem; text-align: center; display: flex; flex-direction: column;}
#skillCards h2, #abtDex h2 { opacity: .85; line-height: 2em; font-size: 1em; text-decoration: underline; }
.skillCard { border-bottom: .5rem solid var(--accentSec); padding: 1rem 1.5rem; margin: 1rem 1.5rem; border-radius: .5em; }
body.light .skillCard { box-shadow: .4rem .3rem 1.2rem var(--dark-seethrough); }
body.dark .skillCard { box-shadow: .4rem .3rem 1.2rem var(--light-seethrough); }
.skillCard:first-of-type {margin-top: 0;}
body.light .skillCard {background-color: var(--lighter); }
body.dark .skillCard {background-color: var(--darker); }
.skillCard>div:first-child {font-size: 1.25rem; text-align: center;}
.skillCard>div:last-child {text-align: center; margin-top: .5rem; font-style: italic;}

@media (max-width: 82rem) {
    #abtSkillsWrapper {width: 85%;}
    .skillCard {padding: 1rem 1.25rem; margin: 1rem 1.25rem;}
}
@media (max-width: 65rem) {
    #abtSkillsWrapper {width: 90%;}
    #abtSkillsCtx {width: 95%;}
    .skillCard {padding: 1rem 1rem; margin: 1rem .75rem;}
}
@media (max-width: 55rem) {
    #abtSkillsWrapper {width: 95%;}
    .skillCard {padding: 1rem .75rem; margin: 1rem .5rem;}
    #abtSkills {transform-style: unset;}
    #skBGGal {height: 100%; transform: none;}
}
@media (max-width: 45rem) {
    #abtSkillsWrapper {width: 100%;}
    #abtSkillsCtx {padding-bottom: 8rem;}
    #skillCards {flex-direction: column;}
    .skillCard {margin: .5em; display: flex; justify-content: center; align-items: center; border-left: .5em solid var(--accentSec); border-bottom: none;}
    .skillCard:first-of-type {margin-top: .5em;}
    .skillCard > div:last-child {margin-left: auto; margin-top: 0;}
    
}
@media (max-width: 35em) {
    #abtSkillsCtx {width: 100%;}
    #abtSkillsCtx {padding-bottom: 2em;}
}
#abtCtxMore {width: 100%;}
.moreInfoCard {display: flex; width: 100%;}
.moreInfoIcon {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 8em; flex-shrink: 0;}
.abtCtx .abtCtxWrapperIn .moreInfoIcon .icon {font-size: 3em; line-height: 1.5em;}
.abtCtx .abtCtxWrapperIn .moreInfoIcon .text {opacity: .8; font-weight: 800; font-style: italic; margin-top: .5em; text-align: center; padding: 0 .5em; line-height: 1.5em;}
.moreInfoCtx {flex-grow: 1; padding: .25em 1em .25em .25em; display: flex; flex-direction: column; justify-content: center;}

#abtCtxMore {display: flex; flex-direction: row; justify-content: center; padding-bottom: 6rem; align-items: stretch;}
#abtCtxMore .abtCtxWrapperOut {margin: 5.5em 1em 2em 1em; flex-basis: calc(33% - 4.5em);}
#abtCtxMore .abtCtxWrapperIn {height: calc(100% - 2em); display: flex; align-items:stretch;}
#abtCtxMore .stripe.end {background-color: var(--accentSec);}
#abtCtxMore p.noPad {text-align: left;}

@media (max-width: 85em) and (min-width: 65em) {
    .moreInfoCard {flex-direction: column; flex-wrap: wrap;}
    .moreInfoIcon {width: 100%; height: 2.5em; flex-direction: row; justify-content: center;} 
    .moreInfoIcon .icon {font-size: 1.75em;}
    .moreInfoIcon .text {font-size: 1.25em; font-style: normal;}
}
@media (max-width: 65em) {
    #abtCtxMore {display: flex; flex-direction: column; justify-content: center; padding-bottom: 2em; align-items: stretch;}
    #abtCtxMore .abtCtxWrapperOut {margin: .5em 10%; flex-basis: calc(80% - 2.5em);}
    #abtCtxMore .abtCtxWrapperOut:first-child {margin-top: 5.5rem;}
}
@media (max-width: 55em) {
    #abtCtxMore {display: flex; flex-direction: column; justify-content: center; padding-bottom: 2em; align-items: stretch;}
    #abtCtxMore .abtCtxWrapperOut {margin: .5em 5%; flex-basis: calc(90% - 2.5em);}
}
@media (max-width: 45em) {
    #abtCtxMore .abtCtxWrapperOut:first-child {margin-top: 4.5em;}
}
@media (max-width: 35em) {
    #abtCtxMore .abtCtxWrapperOut:first-child {margin-top: 1em;}
    .moreInfoCard {flex-direction: column; flex-wrap: wrap;}
    .moreInfoIcon {width: 100%; line-height: 2.5em; flex-direction: row; justify-content: center;} 
    .moreInfoIcon .icon {font-size: 1.75em;}
    .moreInfoIcon .text {font-size: 1.25em; font-style: normal;}
}
/*Old Styling*/
p {margin: 0.75em 10%; text-align: justify;}
p:not(.noPad) { text-indent: 2em; }
header { font-weight: 200; font-size: 2.5em; color: var(--accentText); margin: .5em 14.8% .25em 14.8%; }
#unknownPage {font-family: inherit, "Segoe UI Emoji"; }
section.contxtSec {width: 80%; margin: 0 10%;} section.contxtSec:last-child {margin-bottom: 2em;}
section.contxtSec:not(#secLogo):not(.abt2018) {display: flex;}
.contxtSec > div:first-child {width: 60%;}
.contxtSec > div:nth-child(2) {width: 40%;}

.contxtSec .settingsWrap {margin: 0.75em 10%;}
.settingItem {display: flex; flex-grow: 0; flex-shrink: 0; margin-bottom: .5em; }
.settingItem label {font-weight: bolder; margin-right: 1em; height: 1.5em; line-height: 1.5em; width: 7.5em;}
#resetButton {background-image: none;font-weight: 800;  border: none; background-color: var(--accentText); color: #fff; padding: .2em .5em; height: 2.5em; line-height: 2em; width: 20em; transition: all cubic-bezier(.17,.73,.31,1) .3s;}
#resetButton:hover {background-color: rgb(230, 50, 50); transition-duration: .1s;}
#resetButton:active {background-color: rgb(250, 10, 10); transform: scale(.95); transition-duration: .03s;}
.settingToggle:hover .settingToggleBtn > div { background-color: var(--accentText); }
.settingToggle.true .settingToggleBtn { border-color: var(--accentText); }


@media (max-width: 55em) {
	section.contxtSec {width: 90%; margin: 0 5%;}
	header {margin: .5em 10.4% .25em 10.4%; }
}
@media (max-width: 45em) {
	section.contxtSec {width: 95%; margin: 0 2.5%;}
	header {margin: .5em 8.2% .25em 8.2%; }
}
@media (max-width: 35em) {
	.contxtSec {flex-direction: column;}
	.contxtSec > div:first-child {width: 100%;}
	.contxtSec > div:nth-child(2) {width: 100%;}
	p {margin: 0.75em 5%; } header { margin: .5em 7.5% .25em 7.5%; }
}




.aboutPicWrap {display: flex; justify-content: center; align-items: center;}
#aboutGraph { position: relative; width: 18em; height: 9em; display: flex; overflow: hidden; align-items: center; justify-content: center; border: .2em solid var(--accentText); border-radius: 2em; background-image: linear-gradient(to right, hsl(0,80%,50%) 0%, hsl(45,80%,50%) 12.5%, hsl(90,80%,50%) 25%, hsl(135,80%,50%) 37.5%, hsl(180,80%,50%) 50%, hsl(225,80%,50%) 62.5%, hsl(270,80%,50%) 75%, hsl(315,80%,50%) 87.5%, hsl(360,80%,50%) 100%); transition: box-shadow ease-out .3s; }
#aboutGraphWrap:hover #aboutGraph {box-shadow: 0 0 2em rgba(230, 140, 60, .75);}
#aboutGraph > .abtGraphTxt {pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height:100%; display: flex; justify-content: center; align-items: center; font-size: 3em; font-weight: 700; }
body.light #aboutGraph > .abtGraphTxt {color: rgb(208,208,208); }
body.dark #aboutGraph > .abtGraphTxt {color: rgb(48,48,48); }
#aboutGraph > div:not(.abtGraphTxt) { width: 1em; height: 100%; flex-grow: 1; display: flex; justify-content:center; align-items: center; }
#aboutGraph > div:not(.abtGraphTxt) > div { width:100%; height: 100%; transition: all ease-in-out 4s .25s;}
body.light #aboutGraph > div:not(.abtGraphTxt) > div  {background-color: rgb(208,208,208);}
body.dark #aboutGraph > div:not(.abtGraphTxt) > div  {background-color: rgb(48,48,48);}
#aboutGraph > div:not(.abtGraphTxt):hover > div {height: 0%; transition-duration: 0s; transition-delay: 0s;}
#aboutGraph:active > div:not(.abtGraphTxt) > div {height: 0%; transition-duration: 0.05s; transition-delay: 0s;}
@media (max-width: 35em) {
	#aboutGraph {display: none;}
}

#aboutDexTech {font-family: Cambria, 'Times New Roman', '仿宋', '標楷體',serif; border-radius: 0 0 1em 0; width: 80%; max-width: 18em;  border: .1em solid rgb(230, 225, 150);}
body.light #aboutDexTech { background-color: rgb(255, 253, 180); }
body.dark #aboutDexTech { background-color: rgb(60, 55, 28); border-color: rgb(95, 90, 58); }
#dexTecTit {font-size: 1.1em; width: 90%; margin: .5em 5% .3em 5%; text-decoration: underline; text-align: center;}
.dexTecSub {font-size: .75em; font-weight: 600; margin-left: 5%;}
.dexTecTxt {font-size: .95em; width: 90%; text-align: center; margin: .1em 5% .3em 5%; }
body.light .dexTecSub {color: #666;}
body.dark .dexTecSub {color: #aaa;}
body.light .dexTecTxt {color: #000;}
body.dark .dexTecTxt {color: #fff;}
.dexTecTxt:last-child {margin-bottom: .5em;}
.contactInfo > strong {display: inline-block; width: 8em;}
.contactInfo a {color: hsl(205, 80%, 50%);}
body.dark .contactInfo a {color: hsl(205, 80%, 65%);}

#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: 2em; height: 2em; margin-left: 1em; transition: margin-left .6s cubic-bezier(.17,.73,.31,1); border-radius: 0 1em 1em 1em; transform: translateY(-1em) rotateZ(-45deg);}
#fourColorArtWrap {min-height: 10em;}
#fourColorArtWrap:hover>#fourColorArt>div>div:first-child  {margin-left: .5em; transition-duration: .3s;}
#fourColorArtWrap:active>#fourColorArt>div>div:first-child  {margin-left: 2.3em; transition-duration: .1s;}
#fourApp>div { background-color: rgb(230, 80, 60); }
#fourTrv>div   { background-color: rgb(90, 190, 70); }
#fourDev>div  { background-color: rgb(60, 195, 180); }
#fourDes>div   { background-color: rgb(210, 60, 130);}
#fourStr>div   { background-color: hsl(289, 65%, 40%);}
#fourApp {animation: appRotate 4s linear infinite;} #fourDev {animation: devRotate 4s linear infinite;} 
#fourTrv {animation: trvRotate 4s  linear infinite;} #fourDes {animation: desRotate 4s linear infinite;}
#fourStr {animation: strRotate 4s linear infinite;}
@keyframes fourColor {
	0% {transform: perspective(500px) rotateY(0deg);}
	100% {transform: perspective(500px) rotateY(0deg);}
}
@keyframes appRotate {
	0% {transform: perspective(300px) rotateY(0deg) rotateZ(226deg);}
	100% {transform: perspective(300px) rotateY(0deg) rotateZ(586deg);}
}
@keyframes trvRotate {
	0% {transform: perspective(300px) rotateY(36deg) rotateZ(288deg);}
	100% {transform: perspective(300px) rotateY(36deg) rotateZ(648deg);}
}
@keyframes devRotate {
	0% {transform: perspective(300px) rotateY(72deg) rotateZ(0deg);}
	100% {transform: perspective(300px) rotateY(72deg) rotateZ(360deg);}
}
@keyframes desRotate {
	0% {transform: perspective(300px) rotateY(108deg) rotateZ(72deg);}
	100% {transform: perspective(300px) rotateY(108deg) rotateZ(432deg);}
}
@keyframes strRotate {
	0% {transform: perspective(300px) rotateY(144deg) rotateZ(144deg);}
	100% {transform: perspective(300px) rotateY(144deg) rotateZ(504deg);}
}

#fontArtWrap {min-height: 10em; font-weight: 300;}
#fontArt1 {font-size: 3em; text-align: center; transition: all cubic-bezier(.17,.73,.31,1) .35s;}
#fontArt2 {font-size: 2.4em; text-align: center; color: #555; transition: all cubic-bezier(.17,.73,.31,1) .35s;}
body.light #fontArt1 {color: #000;}
body.dark #fontArt1 {color: #fff;}
body.light #fontArt2 {color: #666;}
body.dark #fontArt2 {color: #aaa;}
#fontArtWrap:hover #fontArt2 {margin-top: -.3em; transition-duration: .5s;}
#fontArtWrap:active #fontArt2 {margin-top: 1em; letter-spacing: .5em; transition-duration: .07s;}
#fontArtWrap:active #fontArt1 {letter-spacing: .3em; transition-duration: .07s}