/* stylesheet for favimon */

*, *::after, *::before {box-sizing: border-box; text-rendering: optimizeLegibility;}
html {font-size: 100%; scroll-behavior: smooth;}
body {
 margin: 0; color: #222; line-height: 1.5;
 font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Trebuchet MS', 'Helvetica', 'Arial', sans-serif;
 background: #d7effb radial-gradient(circle 400px at top center,  #ffffff 0%, #d7effb 100%) no-repeat;
}

a {text-decoration: none;}
a:link, a:visited {color: #9d5753;}
a:hover, a:active {color: #80b4ff;}
img {max-width: 100%; height: auto;}
iframe, .mejs-container {max-width: 100% !important;}
a img {border: none;}

.mailto::before {content: attr(data-user);}
.mailto::after {content: attr(data-domain);}

.clear {font-size: 0; height: 0; clear: both;}

.navWrapper, .button, #status, #activeconsole, #wildconsole, #collection, .faq-page .question>p {
	-webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

/*#wildtip, #activetip {pointer-events: none;}*/

#wildfav, #activefav, #collection img, ul.favactions li.submenu-pals ul li img {
 image-rendering: optimizeSpeed;
 image-rendering: -webkit-optimize-contrast;
 -ms-interpolation-mode: nearest-neighbor;
 image-rendering: crisp-edges;
 image-rendering: pixelated;
}



/* page structure */
#dimmer {
 display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0;
 background: rgba(0,0,0,0.5); z-index: 2000;
}

.page {position: relative; width: 100%; margin: 0 auto; padding: 0; overflow: hidden;}
main {position: relative; min-height: 500px; margin: 0 auto; padding: 0; overflow: hidden;}
#landscape {
 position: absolute; top: 190px; width: 100%; height: 290px; margin: 0 auto;
 background: url('images/landscape.png') top center no-repeat; background-size: 1300px; z-index: 200;
}

.button {cursor: pointer; border-radius: 2px; text-align: center;}



/* menu */
.navWrapper {position: relative; width: 100%; background-color: #fff; z-index: 3000;}
.navWrapper.index-page {opacity: 0.6;}
.navWrapper.index-page:hover {opacity: 1;}
nav {
 position: relative; max-width: 950px; list-style: none; margin: 0 auto; padding: 2px 5px 2px 5px;
 color: #888; font-size: 0.8em; overflow: hidden;
}
nav li {display: inline-block; margin: 0; padding: 4px 7px;}
nav li.selected a {color: #222; cursor: default;}
nav li#menu-help a {padding-right: 10px; background: url('icons/arrow-down.gif') right 50% no-repeat;}

nav li#menu-updates {margin-left: 10px; background-color: #fdf2d0; border-radius: 3px;}
#closeupdate {
 display: inline; width: 12px; height: 12px; line-height: 10px; margin: 0 0 0 10px; padding: 2px;
 color: #666; font-size: 1.1em; font-weight: bold; border: 1px transparent solid;
}
#closeupdate:hover {color: #fff; background-color: #e85a5a; border: 1px #999 solid;}

nav a:link, nav a:visited {color: #2a487c;}
nav a:hover, nav a:active {color: #80b4ff;}



/* header */
header {position: relative; max-width: 950px; margin: 0 auto; padding: 0.5em 20px 0 20px;}

.logo {
 float: left; width: 20%; height: 90px;
 background: url('images/favimon-logo.png') center center no-repeat; background-size: contain;
}

#querydiv {float: left; width: 75%; margin: 0 0 0 5%;}

#status {position: relative; min-height: 1em; margin: 1em 0; font-size: 0.85em; line-height: 1.3; z-index: 500;}
#status .statusaction {color: #2a487c;} /* action names */
#status .statusdamage {color: #f32626; font-size: 1.4em;} /* damage */

#queryform {position: relative; margin: 0; padding: 0; z-index: 400;}
#querybox-div {
 position: relative; max-width: 400px; padding: 0; margin: 0; border: 1px solid #aaa; background-color: #fff;
 cursor: text; z-index: 600; overflow: hidden;
}
#querybox {
 position: relative; float: left; width: 250px; height: 30px;
 font-size: 1.1em; margin: 0; padding: 4px 10px; border: 0; z-index: 600;
}

#querysubmit, #queryrandom {
 position: absolute; width: 24px; height: 30px; margin: 0; padding: 0;
 background-size: 16px 16px; background-position: center center; background-repeat: no-repeat;
 opacity: 0.6; z-index: 1000; cursor: pointer;
}
#querysubmit:hover, #queryrandom:hover {opacity: 1;}
#querysubmit {right: 25px; background-image: url('icons/magnifier.png');}
#queryrandom {right: 0; background-image: url('icons/random-dice.png');}
#queryrandom:hover {background-image: url('icons/random-dice-animated.gif');}

#loading {
 display: none; position: relative; width: 208px; height: 13px; margin: 0.5em 0;
 background: url('images/loading.gif') center center no-repeat; z-index: 700;
}



/* about and pages */
h1 {font-size: 1.6em; font-weight: normal; margin-top: 2em;}
h2 {font-size: 1.3em; font-weight: normal; margin-top: 2em;}

.page.about-page, .page.faq-page {padding: 0 20px;}
.page.about-page header, .page.faq-page header {text-align: center;}
.page.about-page .logoLarge, .page.faq-page .logoLarge {margin-top: 30px;}
.page.about-page main, .page.faq-page main {width: 560px; max-width: 100%; margin: 2em auto;}

.faq-page .question {margin: 0; padding: 0;}
.faq-page .question>p {margin: 0; padding: 20px 10px; font-size: 1.1em; border-bottom: 1px #fff solid; cursor: pointer;}
.faq-page .question>p:hover {background-color: #fff;}
.faq-page .question.currentQ>p {background-color: #ffd72d;}
.faq-page .answer {display: none; font-size: 1em; margin: 0 0 0 10px; padding: 0 0 1em 0;}

.disclaimer {font-size: 0.85em; color: #666; margin-top: 6em;}



/* wild favimon */
#wildSide {position: absolute; left: calc(50% - 70px); width: 500px; max-width: 100%; min-height: 200px;}

#wildfavdiv {position: absolute; top: auto; bottom: 0; width: 128px; height: 128px; margin: 0; padding: 0; z-index: 100;}
#wildfav {
 display: none; position: relative; width: 100%; height: 100%; margin: 0; padding: 0;
 background-image: url("images/empty.png"); background-repeat: no-repeat; background-position: 0 0; background-size: cover;
 /*transition: transform 0.5s ease-out;*/
}

#wildSide.captureable #wildfav {transform: scale(0.75); cursor: pointer;}
#wildSide.captureable #wildfav::before {
 content: " "; display: block; position: absolute; left: -38px; top: -38px; width: 200px; height: 200px;
 border-radius: 50%; background-color: rgba(255, 215, 46, 0.4); transition: background-color 0.5s ease-out;
}
#wildSide.captureable #wildfav:hover {transform: scale(0.85);}
#wildSide.captureable #wildfav:hover::before {
 background-color: rgba(255, 255, 255, 0.4);
}

#wildconsole {position: absolute; left: 153px; top: 30px; width: 345px; z-index: 200;}
#wildconsole p.favclasses {display: none;}
#wildconsole ul.favactions {display: none;}



/* active favimon */
#activeSide {position: absolute; top: 200px; left: calc(50% - 160px); width: 500px; max-width: 100%; min-height: 200px;}

#activefavdiv {
 position: absolute; top: auto; bottom: 0; width: 160px; height: 160px; margin: 0; padding: 0;
 text-align: center; z-index: 300;
}
#activefav {
 display: none; position: relative; width: 100%; height: 100%; margin: 0; padding: 0;
 background-image: url("images/empty.png"); background-repeat: no-repeat; background-position: 0 0; background-size: cover;
 /*transition: transform 0.5s ease-out;*/
}
#activeconsole {position: absolute; left: 185px; top: 20px; width: 313px; z-index: 200;}

#activeSide.empty #activeFav {background-image: url("images/empty.png") !important;}

#activeSide.activeturn:not(.empty):not(.defeated):not(.sleeping) #activefav:hover {
 cursor: pointer; /*transition: transform 0.1s ease-out; transform: scale(0.96); transform-origin: bottom center;*/
}
#activeSide.activeturn:not(.empty):not(.defeated):not(.sleeping) #activefav:not(.fadeOutDown)::after {
 content: ' '; position: absolute; left: calc(50% - 20px); bottom: -35px; width: 0; height: 0;
 border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid red; clear: both;
 opacity: 0; transition: opacity 0.15s ease-out;
}
#activeSide.activeturn:not(.empty):not(.defeated):not(.sleeping) #activefav:not(.fadeOutDown):hover::after {
 opacity: 1;
}



/* favimon collection */
#collection {
 position: relative; width: 556px; max-width: 96%; min-height: 50px; margin: 450px auto 0 auto; padding: 3px;
 background-color: #f5f5f5; /*border: 1px #ccc solid;*/ border-radius: 2px;
 box-shadow: 0 -30px 30px rgba(180, 180, 180, 0.2) inset, 0 1px 1px rgba(0, 0, 0, 0.4); overflow: hidden; z-index: 200;
}
#collection img {
 float: left; width: 40px; height: 40px; margin: 1px;
 /*transition: transform 0.2s ease-out;*/ cursor: pointer; z-index: 1000;
}
#collection img:hover {transform: translateY(-3px);}
#collectionnote {position: relative; margin: 5px auto; text-align: center; font-size: 0.9em;}

p.favname {font-size: 1.2em; color: #222; margin: 0; padding: 0; cursor: default;}
p.favclasses {
 font-size: 0.76em; color: #222; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
 margin: 0 0 3px 0; padding: 0; opacity: 0.6; text-transform: uppercase; cursor: default;
}

.favhp, .favattack, .favdefense, .favspeed {
 float: left; font-size: 1.1em; margin: 0 9px 0 0; padding: 0 16px 0 0;
 background-size: 16px 16px !important; cursor: default;
}
.favhp {color: #f32626; background: url('icons/stats-hp.png') right center no-repeat;}
.favattack {color: #222; background: url('icons/stats-attack.png') right center no-repeat;}
.favdefense {color: #222; background: url('icons/stats-defense.png') right center no-repeat;}
.favspeed {color: #222; background: url('icons/stats-speed.png') right center no-repeat;}

ul.favactions {clear: both; list-style: none; margin: 0; padding: 4px 0 0 0; font-size: 1.05em; color: #2a487c; opacity: 0.2;}
ul.favactions li {
 position: relative; margin: 0; padding: 0.18em 0 0.18em 24px; line-height: 1.1; cursor: default;
 background-image: url('icons/action-question.png'); background-position: 2px center; background-repeat: no-repeat;
}

#wildconsole ul.favactions {padding: 3px 0 0 0; font-size: 0.95em;}
#wildconsole ul.favactions li {padding: 0.12em 0 0.12em 24px; line-height: 1;}

ul.favactions li.submenu-pals, ul.favactions li.submenu-oppactions {padding-right: 10px;}
ul.favactions li.submenu-pals ul,ul.favactions li.submenu-oppactions ul  {
 display: none; position: absolute; bottom: 0; left: 15px; min-width: 250px; max-width: 450px;
 list-style: none; margin: 0; padding: 2px; background-color: #fff; border: 1px #ccc solid; overflow: auto;
}
ul.favactions li.submenu-pals ul li, ul.favactions li.submenu-oppactions ul li {cursor: pointer;}

ul.favactions li.submenu-pals ul li {
 display: inline-block; width: 28px; height: 28px; margin: 1px; padding: 0; background: none;
}
ul.favactions li.submenu-pals ul li img {width: 100%; height: 100%; margin: 0; padding: 1px; border: 1px transparent solid;}
ul.favactions li.submenu-pals ul li img:hover {border: 1px red solid;}

ul.favactions li.submenu-oppactions ul li {
 position: relative; margin: 0; padding: 1px 4px 1px 22px; line-height: 1.1; background-position: 3px 5px;
 background-repeat: no-repeat; border: 1px transparent solid; cursor: pointer;
}
ul.favactions li.submenu-oppactions ul li:hover {border: 1px red solid;}

ul.favactions li.action-a1 {background-image: url('icons/action-skull-1.png');} /* attack */
ul.favactions li.action-a2 {background-image: url('icons/action-skull-2.png');}
ul.favactions li.action-a3 {background-image: url('icons/action-skull-3.png');}
ul.favactions li.action-a4 {background-image: url('icons/action-skull-4.png');}
ul.favactions li.action-a5 {background-image: url('icons/action-skull-5.png');}
ul.favactions li.action-s1 {background-image: url('icons/action-clock-plus-1.png');} /* speed / slow */
ul.favactions li.action-s2 {background-image: url('icons/action-clock-plus-2.png');}
ul.favactions li.action-t1 {background-image: url('icons/action-clock-minus-1.png');}
ul.favactions li.action-t2 {background-image: url('icons/action-clock-minus-2.png');}
ul.favactions li.action-d1 {background-image: url('icons/action-shield-plus-1.png');} /* boost defense / erode defense */
ul.favactions li.action-d2 {background-image: url('icons/action-shield-plus-2.png');}
ul.favactions li.action-d3 {background-image: url('icons/action-shield-plus-3.png');}
ul.favactions li.action-e1 {background-image: url('icons/action-shield-minus-1.png');}
ul.favactions li.action-e2 {background-image: url('icons/action-shield-minus-2.png');}
ul.favactions li.action-f1 {background-image: url('icons/action-sword-plus-1.png');} /* boost attack / erode attack */
ul.favactions li.action-f2 {background-image: url('icons/action-sword-plus-2.png');}
ul.favactions li.action-g1 {background-image: url('icons/action-sword-minus-1.png');}
ul.favactions li.action-g2 {background-image: url('icons/action-sword-minus-2.png');}
ul.favactions li.action-h1 {background-image: url('icons/action-heart-1.png');} /* heal */
ul.favactions li.action-h2 {background-image: url('icons/action-heart-2.png');}
ul.favactions li.action-h3 {background-image: url('icons/action-heart-3.png');}
ul.favactions li.action-h4 {background-image: url('icons/action-heart-4.png');}
ul.favactions li.action-h5 {background-image: url('icons/action-heart-5.png');}
ul.favactions li.action-i1 {background-image: url('icons/action-heart-friend-1.png');} /* heal friend */
ul.favactions li.action-i2 {background-image: url('icons/action-heart-friend-2.png');}
ul.favactions li.action-i3 {background-image: url('icons/action-heart-friend-3.png');}
ul.favactions li.action-m1 {background-image: url('icons/action-disarm.png');} /* disarm */
ul.favactions li.action-m2 {background-image: url('icons/action-mimic.png');} /* mimic */
ul.favactions li.action-m3 {background-image: url('icons/action-steal.png');} /* steal */
ul.favactions li.action-p1 {background-image: url('icons/action-poison-1.png');} /* poison */
ul.favactions li.action-p2 {background-image: url('icons/action-poison-2.png');}
ul.favactions li.action-q1 {background-image: url('icons/action-look-1.png');} /* peek */
ul.favactions li.action-q2 {background-image: url('icons/action-look-2.png');}
ul.favactions li.action-r1 {background-image: url('icons/action-run-1.png');} /* run */
ul.favactions li.action-r2 {background-image: url('icons/action-run-2.png');}
ul.favactions li.action-v1 {background-image: url('icons/action-vampire-1.png');} /* vampire */
ul.favactions li.action-v2 {background-image: url('icons/action-vampire-2.png');}
ul.favactions li.action-z1 {background-image: url('icons/action-sleep-1.png');} /* sleep */
ul.favactions li.action-z2 {background-image: url('icons/action-sleep-2.png');}

ul.favactions li.disarmed {text-decoration: line-through; opacity: 0.5; cursor: default;}

#wildconsole ul.favactions {color: #333;}



/* console interactivity */
#activeSide.activeturn #activeconsole p.favname {
 padding-left: 20px; background: url('icons/star.png') left center no-repeat; background-size: 16px 16px;
}
#activeSide.activeturn #activeconsole ul.favactions {opacity: 1;}
#activeSide.activeturn #activeconsole ul.favactions li {cursor: pointer;}
#activeSide.activeturn #activeconsole ul.favactions li:hover {color: #80b4ff; background-color: #fff;}

#wildSide.activeturn #wildconsole p.favname {
 padding-left: 20px; background: url('icons/star.png') left center no-repeat; background-size: 16px 16px;
}
#wildSide.activeturn #wildconsole ul.favactions {opacity: 1;}



/* shiny, poisoned, sleeping */
#activefav.shiny::before, #wildfav.shiny::before {
	content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: url('icons/shiny.gif') center center no-repeat; background-size: cover;
	image-rendering: crisp-edges; image-rendering: pixelated; z-index: 1000;
}

#activeSide.sleeping #activefav::after, #wildSide.sleeping #wildfav::after {
	content: ""; display: block; position: absolute; top: -30px; left: -50px; width: 48px; height: 48px;
	background: url('icons/status-sleeping.gif') center center no-repeat; background-size: cover;
	image-rendering: crisp-edges; image-rendering: pixelated; z-index: 1000;
}

#activeSide.poisoned #activefavdiv::after, #wildSide.poisoned #wildfavdiv::after {
	content: ""; display: block; position: absolute; top: -30px; left: -50px; width: 48px; height: 48px;
	background: url('icons/status-poisoned.gif') center center no-repeat; background-size: cover;
	image-rendering: crisp-edges; image-rendering: pixelated; z-index: 1000;
}

#wildconsole.poisoned p.favname, #activeconsole.poisoned p.favname {color: #783daa;}

.ui-effects-transfer {width: 100px; height: 100px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); z-index: 1000;}

#activeSide.poisoned #activefav, #wildSide.poisoned #wildfav {filter: sepia(100%) contrast(110%) hue-rotate(240deg);}
#activeSide.sleeping #activefav, #wildSide.sleeping #wildfav {transform: rotateZ(-10deg); filter: grayscale(50%) blur(2px);}



/* autocomplete */
ul.ui-autocomplete {font-size: 0.9em; z-index: 1000;}



/* qtips */
.ui-tooltip {padding: 0 !important;}
.qtip p.favname {padding: 0; background: none;}
.qtip ul.favactions {opacity: 1;}
.ui-tooltip-green {font-size: 0.85em !important; line-height: 1.2 !important;}



/* fades */
.fadeOutUp {animation: fadeOutUp 300ms ease-out 1;}
@keyframes "fadeOutUp" {
 from {transform: translateY(0); opacity: 1;}
 to {transform: translateY(-50px); opacity: 0;}
}
.fadeOutDown {animation: fadeOutDown 300ms ease-out 1;}
@keyframes "fadeOutDown" {
 from {transform: translateY(0); opacity: 1;}
 to {transform: translateY(50px); opacity: 0;}
}
.fadeInUp {animation: fadeInUp 300ms ease-out 1;}
@keyframes "fadeInUp" {
 from {transform: translateY(50px); opacity: 0;}
 to {transform: translateY(0); opacity: 1;}
}
.fadeInDown {animation: fadeInDown 300ms ease-out 1;}
@keyframes "fadeInDown" {
 from {transform: translateY(-50px); opacity: 0;}
 to {transform: translateY(0); opacity: 1;}
}


/* pulse animation */
.favPulse {animation: favPulse 100ms linear 4 alternate;}
@keyframes "favPulse" {
 from {transform: translateZ(0) scale(1);}
 to {transform: translateZ(0) scale(1.25);}
}

/* shake animation */
.favShake {animation: favShake 180ms ease-out 3;}
@keyframes favShake {
 from, to {transform: translateX(0);}
 25% {transform: translateX(-10px);}
 75% {transform: translateX(10px);}
}

/* flip animation */
.favFlip {animation: favFlip 400ms linear 1; backface-visibility: visible;}
@keyframes favFlip {
 from {
  transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
  animation-timing-function: ease-out;
 }
 40% {
  transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  animation-timing-function: ease-out;
 }
 50% {
  transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  animation-timing-function: ease-in;
 }
 80% {
  transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  animation-timing-function: ease-in;
 }
 to {
  transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  animation-timing-function: ease-in;
 }
}

/* bounce animation */
.favBounce {animation: favBounce 600ms linear 1; transform-origin: center bottom;}
@keyframes favBounce {
 from, 20%, 53%, 80%,
 to {animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0);}
 40%, 43% {animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0);}
 70% {animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0);}
 90% {transform: translate3d(0, -4px, 0);}
}

/* tada animation */
.favTada {animation: favTada 600ms linear 1;}
@keyframes favTada {
 from {transform: scale3d(1, 1, 1);}
 10%, 20% {transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);}
 30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}
 40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}
 to {transform: scale3d(1, 1, 1);}
}

/* wobble animation */
.favWobble {animation: favWobble 600ms linear 1;}
@keyframes favWobble {
 from {transform: translate3d(0, 0, 0);}
 15% {transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}
 30% {transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}
 45% {transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}
 60% {transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}
 75% {transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}
 to {transform: translate3d(0, 0, 0);}
}

/* jello animation */
.favJello {animation: favJello 800ms linear 1; transform-origin: center;}
@keyframes favJello {
 from, 11.1%,
 to {transform: translate3d(0, 0, 0);}
 22.2% {transform: skewX(-12.5deg) skewY(-12.5deg);}
 33.3% {transform: skewX(6.25deg) skewY(6.25deg);}
 44.4% {transform: skewX(-3.125deg) skewY(-3.125deg);}
 55.5% {transform: skewX(1.5625deg) skewY(1.5625deg);}
 66.6% {transform: skewX(-0.78125deg) skewY(-0.78125deg);}
 77.7% {transform: skewX(0.390625deg) skewY(0.390625deg);}
 88.8% {transform: skewX(-0.1953125deg) skewY(-0.1953125deg);}
}

/* rubber animation */
.favRubber {animation: favRubber 500ms linear 1;}
@keyframes favRubber {
 from {transform: scale3d(1, 1, 1);}
 30% {transform: scale3d(1.25, 0.75, 1);}
 40% {transform: scale3d(0.75, 1.25, 1);}
 50% {transform: scale3d(1.15, 0.85, 1);}
 65% {transform: scale3d(0.95, 1.05, 1);}
 75% {transform: scale3d(1.05, 0.95, 1);}
 to {transform: scale3d(1, 1, 1);}
}

/* whack animation */
.favWhack {animation: favWhack 300ms linear 1; transform-origin: center bottom; filter: sepia(100%) contrast(105%) hue-rotate(320deg);}
@keyframes favWhack {
 from, to {transform: rotateZ(0) skewX(0) translate3d(0, 0, 0);}
 20% {transform: rotateZ(35deg) skewX(30deg) translate3d(20px, -35px, 0);}
 30% {transform: rotateZ(20deg) skewX(10deg) translate3d(15px, -25px, 0);}
 50% {transform: rotateZ(10deg) skewX(0) translate3d(0, 0, 0);}
 80% {transform: rotateZ(5deg) skewX(0) translate3d(0, 10px, 0);}
}



/* footer */
.kofiButton {margin: 2em auto; text-align: center;}





/* testing */
/*
#wildSide, #activeSide {border: 1px gold solid;}
#wildconsole, #activeconsole, #wildfavdiv, #activefavdiv {border: 1px #fff solid;}
*/
.admin {
 position: fixed; top: 40px; left: 10px; width: 100px; padding: 8px; background-color: #fff; border: 1px #ccc solid;
 font-size: 0.75rem; color: #555; line-height: 1.2; z-index: 10000;
 -webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}
.admin p {margin: 0.5em 0; cursor: pointer;}
.admin p:hover {color: #000;}






/* responsive */

/* When width is less than 950 */
@media only screen and (max-width: 950px) {
 #wildSide {left: calc(50% - 150px);}
 #activeSide {left: calc(50% - 200px);}
}


/* When width is less than 720 */
@media only screen and (max-width: 720px) {
 nav {text-align: center;}
}


/* When width is less than 500 */
@media only screen and (max-width: 500px) {
 #wildSide {left: calc(50% - 180px);}
 #activeSide {left: calc(50% - 200px);}
 
 #collection {min-height: 42px;}
 #collection img {width: 32px; height: 32px;}
}


/* When width is less than 450 */
@media only screen and (max-width: 450px) {
 header {max-width: 96%; padding-left: 0; padding-right: 0;}
 
 #wildSide {left: 40px; max-width: calc(100% - 40px);}
 #activeSide {left: 10px; max-width: calc(100% - 10px);}
 
 #activefavdiv {width: 144px; height: 144px;}
 #activeconsole {left: 164px;}
 
 #wildfavdiv {width: 112px; height: 112px;}
 #wildconsole {left: 132px;}
 #wildSide.captureable #wildfav::before {left: -35px; top: -35px; width: 180px; height: 180px;}
 
 .page.about-page, .page.faq-page {padding: 0 15px; font-size: 0.9em;}
}






/* touch devices without hover */
@media (hover: none) {
 #activeSide.activeturn #activeconsole ul.favactions li:hover {color: #2a487c; background-color: transparent;}
}