* {
	margin: 0;
	padding: 0;
}

#info {
	position: absolute;
	right: 16px;
	top: 16px;
	background: url('./info.png');
	background-size: cover;
	width: 32px;
	height: 32px;
	z-index: 99;
	cursor: pointer;
}
#info div {
	display: none;
	border: 2px #555 solid;
	border-radius: 5px;
	width: 300px;
	padding: 8px;
	font-size: 18px;
	color: #111;
	position: absolute;
	right: 0;
	top: 32px;
	background-color: #eee;
}
#info:hover div {
	display: block;
}
#info h3 {
	margin-bottom: 8px;
	border-bottom: 2px #555 solid;
}
#info p {
	margin-bottom: 16px;
}

body {
	background: #ddd;
	color: #555;
	overflow: none;
}

.column {
}

strong {
	color: #ba1221;
	font-size: 72px;
	font-weight: bold;
}

h2 {
	border-top: 1px #999 solid;
	border-bottom: 1px #999 solid;
	margin-bottom: 24px;
	padding: 4px 8px;
	font-size: 28px;
	background: #ccc;

box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

.hidden {
	display: none;
}

#health-bar, #health-bar-filling {
	position: absolute;
	right: 0;
	transform: translate(calc(100% + 24px), 0);
	width: 16px;
	height: 100%;
	background-color: #425458;
	border: 2px #333 solid;
	border-radius: 5px;
}
	#health-bar .label {
		position: absolute;
		transform: translate(-20px, -50%) rotate(90deg);
		white-space: nowrap;
		top: 50%;
		font-size: 24px;
	}
#health-bar-filling {
	/* border-color: transparent; */
	background-color: #60bfd5;
	clip-path: polygon(0 var(--health), 100% var(--health), 100% 100%, 0 100%);
	transition: clip-path 1s;
}

#response-wrong-container, #response-right-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
	#response-wrong > * {
		font-size: 72px;
		color: #ba1221;
	}
	#response-right > * {
		font-size: 72px;
		color: #12ba21;
	}

#equations {
	color: #666;
	text-align: left;
	position: relative;
}
	#equations > .equation {
		transition: transform 0.25s;
	}
	#equations > .equation > * {
		transition: transform 0.2s;
		position: relative;
	}
		#equations > * > * > .prefix {
			position: absolute;
			top: 50%;
			transform: translate(calc(-100% - 20px), -50%);
		}
		#equations > * > * > .suffix {
			position: absolute;
			top: 50%;
			right: 0;
			transform: translate(calc(-10% - 20px), -50%);
		}
	#equations .active, #equations > .equation:hover {
		transform: scale(1.15);
		cursor: pointer;
	}

.equation span {
	display: inline-block; /* required for scale transforms */
}
.equation span.number {
	font-size: 32px;
	font-weight: bold;
	color: #555;
}

#tease-wrapper {
	border: 2px #60bfd5 solid;
	background-color: purple;
	margin: 0 auto;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: 16px;
	margin-bottom: 16px;
	/* animation: tease-countdown 5s forwards; */
}
	@keyframes tease-countdown {
		0% {
			clip-path: path('M 68 68 L 68 0 A 68 68 0 0 0 67 0 Z');
		}
		25% {
			clip-path: path('M 68 68 L 68 0 A 68 68 0 0 0 0 68 Z');
		}
		50% {
			clip-path: path('M 68 68 L 68 0 A 68 68 0 0 1 68 136 Z');
		}
		75% {
			clip-path: path('M 68 68 L 68 0 A 68 68 0 0 1 136 68 Z');
		}
		100% {
			clip-path: path('M 68 68 L 68 0 A 68 68 0 0 1 68 0 Z');
		}
	}
#tease {
	font-size: 96px;
	color: #aaa;
	animation: tease-animation 2s infinite;
}
	@keyframes tease-animation {
		0% {}
		25% { transform: rotate(-45deg); }
		50% {}
		75% { transform: rotate(45deg); }
		100% {}
	}

#timer {
	width: 100%;
	height: 8px;
	background-color: #333;
	border: 2px #333 solid;
	border-radius: 5px;
	margin: 0 0 16px 0;
}
#timer-filling {
	height: 8px;
	animation: timer-drain 2s forwards linear;
}
	@keyframes timer-drain {
		0% { width: 100%; background: #8db78e;}
		50% { width: 50%; background: gold;}
		100% { width: 0%; background: #e74d4e;}
	}
	@keyframes timer-drain2 {
		0% { width: 100%; background: green;}
		100% { width: 100%; background: red;}
	}
	@keyframes timer-paused {
		0% { width: 100%; background: #8db78e;}
		100% { width: 100%; background: #8db78e;}
	}

.flip-out {
	animation: flip-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes flip-out {
		0% {}
		100% { transform: rotateX(180deg); }
	}

.flip-in {
	animation: flip-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes flip-in {
		0% { transform: rotateX(180deg); }
		100% {}
	}

.fade-out {
	animation: fade-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes fade-out {
		0% {}
		100% { opacity: 0; }
	}

.fade-in {
	animation: fade-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes fade-in {
		0% { opacity: 0; }
		100% {}
	}

/* for answer prompt only */
.fade-out-fast {
	animation: fade-out-fast 0.15s forwards;
	backface-visibility: hidden;
}
	@keyframes fade-out-fast {
		0% {}
		100% { opacity: 0; transform: scale(0); }
	}

.fade-in-fast {
	animation: fade-in-fast 0.15s forwards;
	backface-visibility: hidden;
}
	@keyframes fade-in-fast {
		0% { opacity: 0; transform: scale(0); }
		100% {}
	}

.shrink-out {
	animation: shrink-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes shrink-out {
		0% {}
		100% { transform: scale(0); }
	}

.shrink-in {
	animation: shrink-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes shrink-in {
		0% { transform: scale(0); }
		100% {}
	}

.grow-out {
	animation: grow-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes grow-out {
		0% {}
		100% { transform: scale(3.0); opacity: 0; }
	}

.grow-in {
	animation: grow-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes grow-in {
		0% { transform: scale(3.0); opacity: 0; }
		100% {}
	}

.rotate-out {
	animation: rotate-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes rotate-out {
		0% {}
		100% { transform: rotate(180deg) scale(0); opacity: 0; }
	}

.rotate-in {
	animation: rotate-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes rotate-in {
		0% { transform: rotate(-180deg) scale(0); opacity: 0; }
		100% {}
	}

.slide-left-out {
	animation: slide-left-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-left-out {
		0% {}
		100% { transform: translate(-100%, 0); opacity: 0; }
	}

.slide-left-in {
	animation: slide-left-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-left-in {
		0% { transform: translate(100%, 0); opacity: 0; }
		100% {}
	}

.slide-right-out {
	animation: slide-right-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-right-out {
		0% {}
		100% { transform: translate(100%, 0); opacity: 0; }
	}

.slide-right-in {
	animation: slide-right-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-right-in {
		0% { transform: translate(-100%, 0); opacity: 0; }
		100% {}
	}

.slide-up-out {
	animation: slide-up-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-up-out {
		0% {}
		100% { transform: translate(0, 250%); opacity: 0; }
	}

.slide-up-in {
	animation: slide-up-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-up-in {
		0% { transform: translate(0, -250%); opacity: 0; }
		100% {}
	}

.slide-down-out {
	animation: slide-down-out 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-down-out {
		0% {}
		100% { transform: translate(0, 250%); opacity: 0; }
	}

.slide-down-in {
	animation: slide-down-in 0.5s forwards;
	backface-visibility: hidden;
}
	@keyframes slide-down-in {
		0% { transform: translate(0, -250%); opacity: 0; }
		100% {}
	}

#game-container {
	position: relative;
}

#game {
	backface-visibility: hidden;
	margin: 0 auto;
	width: 640px;
	padding: 16px;
	height: 50vh;
	text-align: center;
}

#postgame-container {
	position: absolute;
	backface-visibility: hidden;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	height: 100%;
}
	#postgame {
		margin: 0 auto;
		width: 640px;
		padding: 16px;
		height: 50vh;
		text-align: center;
	}

#stats {
	display: flex;
	flex-wrap: wrap;
}
	#stats > * {
		width: 49%;
	}
	#stats label {
		font-size: 72px;
	}

	#postgame button {
		font-size: 32px;
		background-color: #333;
		color: #eee;
		padding: 8px 32px;
		cursor: pointer;
		transition: transform 0.25s;
	}
	#postgame button:hover {
		transform: scale(1.1);
	}

#realtime-stats {
	display: flex;
	font-size: 24px;
	font-weight: bold;
}
	#realtime-stats [rel='score'] {
		width: 50%;
		text-align: left;
	}
	#realtime-stats [rel='streak'] {
		width: 50%;
		text-align: center;
	}
	#realtime-stats [rel='level'] {
		width: 50%;
		text-align: right;
	}

@keyframes symbol-size {
	0% {}
	50% { transform: scale(var(--intensity)); }
	100% {}
}
@keyframes symbol-opacity {
	0% {}
	50% { opacity: var(--intensity, 1); }
	100% {}
}
@keyframes symbol-bounce-x {
	0% {}
	25% { transform: translateX(var(--intensity)); }
	50% {}
	75% { transform: translateX(-var(--intensity)); }
	100% {}
}
@keyframes symbol-bounce-y {
	0% {}
	25% { transform: translateY(var(--intensity)); }
	50% {}
	75% { transform: translateY(-var(--intensity)); }
	100% {}
}