* {
	box-sizing: border-box;
}

html, body {
	height: 512px;
}

body {
	margin: 0;
	text-align: center;
	font-family: Helvetica;
}

.game__container {
	position: relative;
	width: 100%;
	height: 100%;
}

.game__play-container {
	display: inline-block;
	z-index: 100;
    background: #289cff;
    color: #fff;
	padding: 8px;
	text-align: left;
}

.game__play-controls {
	position: absolute;
	bottom: 8px;
	left: 8px;
}

.game__paused-container {
	z-index: 100;
	background: #22222299;
	color: #fff;
	font-size: 32px;
}

.game__ui-container {
	display: inline-block;
	z-index: 50;
	text-align: left;
}

.game__canvas {
	z-index: 25;
}

.game__play-container,
.game__paused-container,
.game__ui-container,
.game__canvas {
    width: 512px;
    height: 512px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -256px;
}

.game__ui-paused-text {
	position: absolute;
	top: 45%;
	width: 100%;
	text-align: center;
}

.game__ui-btn {
	border-radius: 4px;
	cursor: pointer;
	border: none;
}

.game__ui-btn:hover {
	opacity: 0.8;
}

.game__ui-btn:focus {
	outline: none;
	border: none;
}

.game__ui-btn:active {
	opacity: 0.6;
}

.game__ui-play-btn {
	background: #0267ff;
	color: #fff;
	padding: 8px 32px;
	font-size: 32px;
	width: 126px;
	height: 53px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -26px 0 0 -68px;
}

canvas {
	width: 100%;
	height: 100%;
}

.game__assets-container {
	display: none;
}

button {
	font-family: inherit;
}

.game__ui-inventory-col {
    display: inline-block;
    width: 33.33%;
    vertical-align: top;
}

.game__ui-inventory-row {
    white-space: nowrap;
    position: absolute;
    left: 0;
    padding: 4px 16px;
    width: 100%;
    color: #fff;
    bottom: 0;
	background: #22222290;
	opacity: 0.5;
	transition: opacity 0.5s ease-in-out;
}

.game__ui-container:hover .game__ui-inventory-row {
	opacity: 1.0;
}

.game__ui-inventory-title {
    font-size: 20px;
    margin-bottom: 8px;
}

.game__ui-buy-btn,
.game__ui-sell-btn {
    display: block;
    font-size: 14px;
    color: #fff;
    padding: 4px 12px;
    margin-bottom: 8px;
    border-radius: 16px;
    text-align: left;
    box-shadow: #222 2px 2px 2px;
}

.game__ui-buy-btn {
	background: #ff4444;
}

.game__ui-sell-btn {
	background: #2c94ff;
}

.game__ui-info-row {
	position: absolute;
	top: 16px;
	left: 16px;
}

.game__ui-egg-price-row {
	position: absolute;
    left: 250px;
    top: 80px;
}

.game__ui-info-item {
	font-size: 20px;
}

.game__ui-info-value {
	display: inline-block;
}

.game__ui-money-modifier {
	display: inline-block;
	margin-left: 2px;
}

.modifier-red {
	color: #ff3636;
	text-shadow: #ff4e4e 0 0 4px;
}

.modifier-green {
	color: green;
	text-shadow: limegreen 0 0 4px;
}

.fade-out {
	animation: fadeOut forwards 3s;
	-webkit-animation: fadeOut forwards 3s;
	-moz-animation: fadeOut forwards 3s;
	-o-animation: fadeOut forwards 3s;
	-ms-animation: fadeOut forwards 3s;
}

@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-o-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

@-ms-keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

.game__play-img {
	width: 128px;
    height: 128px;
    image-rendering: pixelated;
    position: absolute;
    left: 50%;
    margin-left: -64px;
    bottom: 0;
}

.game__logo-img {
	width: 512px;
	height: 69px;
	position: absolute;
    left: 50%;
    margin-left: -256px;
    top: 100px;
}

.game__ui-game-over {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.game__ui-game-over-text {
	position: absolute;
	top: 30%;
	text-align: center;
	width: 100%;
	color: #fff;
	font-weight: bold;
}

.game__ui-credits {
    z-index: 75;
    background: #0a0a0a;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
	left: 0;
	padding-top: 30%;
}