* {
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	outline: none;
}
a {
	white-space: nowrap;
}
input {
	user-select: auto;
	-webkit-user-select: auto;
}

.spinner {
	display: inline-block; /*or else if it's a div and its really wide, when it spins it can become taller than its container causing overflow scroll to show a scrollbar*/
	margin: auto; /*inline-block but for flex*/
	line-height: 1;/*so it spins on its center*/
	opacity: 0;
	animation-name: fadein;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes fadein{
	0%{opacity:0}
	100%{opacity:1}
}

.spinner:after {
	display: inline-block;
	content: '⏳';
	animation-name: spin;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}

@keyframes spin{
	0%{rotate:0deg}
	40%{rotate:180deg}
	50%{rotate:180deg}
	90%{rotate:360deg}
	100%{rotate:360deg}
}

.scoreAdd {
	animation-name: scoreAdd;
	animation-delay: .2s;
	animation-duration: .3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes scoreAdd{
	0%{transform:color:#000}
	40%{transform:translateY(-15%);color:#3D3}
	100%{transform:translateY(0);color:#3D3}
}

.goodWord {
	animation-name: goodWord;
	animation-duration: .3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes goodWord{
	0%{transform:scale(1);color:#000}
	40%{transform:scale(1.2) translateY(5%);color:#3D3}
	100%{transform:scale(.5) translateY(-55%);color:#6F6;opacity:0}
}

.badWord {
	animation-name: badWord;
	animation-duration: .3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes badWord{
	0%{transform:translateX(0);color:#000}
	33%{transform:translateX(2%);color:#C33}
	66%{transform:translateX(-2%);color:#C33}
	100%{transform:translateX(0);color:#C33}
}

.didWord {
	animation-name: didWord;
	animation-duration: .3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes didWord{
	0%{transform:translateX(0);color:#000}
	33%{transform:translateX(1%);color:#888}
	66%{transform:translateX(-1%);color:#888}
	100%{transform:translateX(0);color:#888}
}

.shake {
	animation-name: shake;
	animation-duration: .4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	background:#F55;
	transition:all .2s ease;
}
@keyframes shake{
	0%{transform:translateX(0)}
	33%{transform:translateX(2%)}
	66%{transform:translateX(-2%)}
	100%{transform:translateX(0)}
}

.bob {
	animation-name: bob;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes bob{
	0%{transform:translateY(0)}
	50%{transform:translateY(-6%)}
	100%{transform:translateY(0)}
}

.tilt {
	animation-name: tilt;
	animation-duration: 1.1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes tilt{
	0%{transform:rotate(10deg)}
	50%{transform:rotate(-10deg)}
	100%{transform:rotate(10deg)}
}

.swipe {
	animation-name: swipe;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes swipe{
	0%{transform:translateX(-.7rem)}
	50%{transform:translateX(.7rem)}
	100%{transform:translateX(-.7rem)}
}

.flip {
	animation-name: flip;
	animation-duration: 4s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	perspective-origin: center;
}
@keyframes flip{
	0%{transform:rotateY(0)}
	25%{transform:rotateY(0)}
	50%{transform:rotateY(180deg)}
	75%{transform:rotateY(180deg)}
	100%{transform:rotateY(0)}
}

.pulse {
	animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes pulse{
	0%{opacity:0}
	50%{opacity:1}
	100%{opacity:0}
}

.bright {
	animation-name: bright;
	animation-duration: 1.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes bright{
	0%{filter:contrast(1)}
	15%{filter:contrast(1)}
	50%{filter:contrast(1.7)}
	85%{filter:contrast(1)}
	100%{filter:contrast(1)}
}

.glow {
	animation-name: glow;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}
@keyframes glow{
	0%{opacity:1}
	50%{opacity:.8}
	100%{opacity:1}
}

@keyframes blink{
	0%{opacity:1}
	10%{opacity:0}
	50%{opacity:0}
	60%{opacity:1}
	100%{opacity:1}
}
.tileOuter {transition:all 1s linear}

.tile{overflow:hidden;z-index:1;background:linear-gradient(0deg, #B7B 50%, #FCE 100%);color:#FFF;position:relative;font-size:18rem;font-weight:bold;cursor:pointer;width:100%;height:100%;border-radius:3rem;display:flex;align-items:center;justify-content:center;border-bottom:.5rem solid #111;}
.tile.down{background:linear-gradient(0deg, #5DD 50%, #FFE 100%)}
.tile.did{animation:.8s ease 0s 1 normal forwards running goGrey}
.tile.bad{animation:.8s ease 0s 1 normal forwards running goRed}
.tileBg{position:absolute;top:0;left:0;bottom:0;right:0}
.tileGoodBg{position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;background:linear-gradient(0deg, #0D5 50%, #EFE 100%)}
.tile.good .tileGoodBg{animation:.4s ease 0s 1 normal forwards running fadeInBlink}
.tile.goodDemo .tileGoodBg{animation:.7s ease 0s 1 normal forwards running fadeInBlinkDemo}


@keyframes goRed{
	0%{filter:brightness(.8) hue-rotate(55deg)}
	100%{filter:brightness(1) hue-rotate(0deg)}
}
@keyframes goGrey{
	0%{filter:brightness(.8) grayscale(1)}
	100%{filter:brightness(1) grayscale(0)}
}
@keyframes fadeInBlink{
	0%{opacity:0}
	5%{opacity:1;filter:brightness(1)}
	25%{opacity:1;filter:brightness(1.5)}
	45%{opacity:1;filter:brightness(1)}
	100%{opacity:0}
}
@keyframes fadeInBlinkDemo{
	0%{opacity:.5;filter:brightness(1)}
	0%{opacity:.7;filter:brightness(1.2)}
	100%{opacity:0}
}

.goGreenEmoji{animation:.4s ease 0s 1 normal forwards running goGreenEmoji}
@keyframes goGreenEmoji{
	0%{color:#000}
	50%{color:#0F0;filter:sepia(100%) hue-rotate(64deg) saturate(4)}
	100%{color:#000}
}

.fadeOutUp{animation:.4s ease 0s 1 normal forwards running fadeOutUp}
@keyframes fadeOutUp{
	0%{top:10rem;opacity:0}
	10%{top:9rem;opacity:1}
	100%{top:4rem;opacity:0}
}

button,.button {
	background-color:#79E;
	box-shadow:0 .5rem .4rem rgba(0,0,0,.3), 0 0.5rem 1rem rgba(255,255,255,.5) inset;
	cursor:pointer;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	border-radius:2rem;
	border:none;
	border-bottom:.4rem solid #349;
	background-clip:padding-box !important;
	padding:0;
}
.tab{
	border-bottom-width:.2rem;
}
button:active,.button:active{
	background-color:#8AF;
	box-shadow:none;
	transform:translateY(.2rem);
	border-bottom-color:transparent;
}
button:active:disabled,.button:active:disabled{
	box-shadow:0 .5rem .4rem rgba(0,0,0,.3), 0 0.5rem 1rem rgba(255,255,255,.5) inset;
}
button:disabled,.button:disabled{
	background-color:#888 !important;
	border-color:#333 !important;
	cursor: auto !important;
}

.tab{
	padding: .6rem 0 .2rem;
	width: 3.3rem;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.tab.selected{
	background:#348;
	transform:translateY(.2rem);
	border-bottom:0;
	box-shadow:rgb(0, 0, 0) 0 1rem 1rem inset;
}

.scroll {
  position: relative;
  overflow: hidden;
  background: #348;
}

.scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 -1rem 1rem -1rem #000, inset 0 1rem 1rem -1rem #000;
  pointer-events: none;
}

.scroll>div {
  height: 100%;
  overflow: auto;
}

.emoji, .tilt, .flip{
	font-family:segoe ui emoji;
}

a:not(.button){
	text-decoration:none;
	text-shadow:0 2px 0 #000;
}

a:not(.button):active{
	position:relative;top:2px;
	filter: brightness(0.8);
	text-shadow:none;
}

.score{font-family:courier;font-weight:bold}

.textButton{
	cursor:pointer;
	color:inherit;
	text-decoration:none;
	text-shadow:0 3px 0 #333;
	font-size:inherit;
	background:none;
	border:none;
	box-shadow:none;
}
.textButton:active{
	position:relative;top:2px;
	filter: brightness(0.8);
	text-shadow:none;
	background:none;
	transform:none;
}