/* TODO: Clean this up */

* {
	background-color: var(--background);
	color: white;
	font: 28px Helvetica;
}

:root {
	--border: 1px #767676 solid;
	--background: #111111;
	--inactive: #202020;
	--hovered: #444444;
	--active: #2e2e2e;
	--lively: #888;
}

textarea {
	border: var(--border);
	border-radius: 0px;
	outline: 0;
	resize: none;
	padding: 5px;
	box-sizing: border-box;
	height: 44px;
	width: 600px;
	background-color: var(--inactive);
}

li {
	counter-increment: item;
	margin-bottom: 5px;
}

ol {
	list-style: none;
	counter-reset: item;
}

button {
	border: var(--border);
	outline: 0;
	background-color: var(--inactive);
	transition: background-color 60ms ease;
	height: 44px;
}

button:hover {
	background-color: var(--hovered);
}

button:active {
	background-color: var(--active);
}

#stack {
	position: fixed;
	right: 5px;
	bottom: 0px;
	margin: 0px;
}

#stack li:before {
	margin-right: 4px;
	content: counter(item) ".";
	width: 2.2em;
	text-align: right;
	display: inline-block;
	font-size: 0.75em;
	color: var(--lively);
}

.queue li {
	margin: 5px 0px;
	margin-right: -4px;
	padding: 5px;
	min-width: 42px;
	height: 42px;
	display: inline-block;
	background-color: var(--inactive);
	box-sizing: border-box;
	text-align: center;
}

.queue {
	padding: 0px;
	padding-left: 5px;
	padding-right: 52px;
	margin: 0px;
	border: var(--border);
	border-right: none;
	position: absolute;
	bottom: 5px;
}

#stage {
	margin-top: 5px;
}

#tokens {
	bottom: initial;
	left: 620px;
	top: 8px;
	border-right: var(--border);
	padding-right: 10px;
}

#tokens li {
	font-size: 0.75em;
	min-width: 32px;
	height: 32px;
}