@font-face {
	font-family: "nokiafc22";
	src: url('../font/nokiafc22.ttf') format('truetype');
}

html, body {
 	overflow-x: hidden;
 	overflow-y: hidden;
}
body {
	padding: 0;
	margin: 0;
	font: 16px "nokiafc22";
	color: 222034;
}

canvas {
	image-rendering:-moz-crisp-edges;
	image-rendering:-o-crisp-edges;
	image-rendering:-webkit-optimize-contrast;
	image-rendering:crisp-edges;
	image-rendering:pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

.world {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #847e87;
}

.fight {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
	height: 100%;

	-webkit-transition: top 0.5s;
	transition: top 0.5s;

	background-color: #323c39;
	color: #9badb7
}

.fight-extra {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

.fight-countdown {
	position: absolute;
	transform: translateX(-50%);
	left: 50%;
	-webkit-transition: left 0.2s;
	transition: left 0.2s;
}

.hidden-right {
	left: 150%;
}

.hidden-left {
	left: -50%;
}

.fight-scores {
	width: 100%;
	height: 200px;
	padding: 10px;
}

.fight-player1-score {
	text-align: left;
	position: absolute;
	left: 10px;
}

.fight-player2-score {
	text-align: right;
	position: absolute;
	right: 10px;
}

.fight-shown {
	top: 0;
}

.fight-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	max-width: 800px;
	margin: auto;
	position: relative;
}

.canvas-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.stock-bar {
	width: 60vmin;
	height: 40vmin;
}

.big-button {
	border: none;
	width: 30vmin;
	height: 30vmin;
	margin: 5vmin;
	padding: 0;
	font: 32px "nokiafc22";
	transition: transform 0.1s linear;
}

.big-button:active {
    transform: scale(0.95);
}
.big-button:focus {
	outline: 0;
}

.buy-button {
	background-color: #6abe30;
}

.sell-button {
	background-color: #ac3232
}

.content {
	margin: 20px;
}

.player-info {
	float: left;
}

.world-info {
	float: right;
	text-align: right;
}