:root {
  --main-bg-color: #5fbef4;
  --pixel-size: 2;
  --sprite-size: 16px;
  --grid-cell: calc(var(--pixel-size) * var(--sprite-size));
  /* Z-Indexes for layers */
  --menu-z: 4000;
  --herd-z: 3000;
  --ui-z: 2000;
  --bg-z: 1000;
}
@font-face {
  font-family: 'Pixel';
  src: url('VT323-Regular.ttf') format('truetype');
}
/**
 *	CSS Animations
*/
/*
	Site CSS
*/
body{
	background-color: #000;
	margin: 0px;
	padding: 0px;
	font-family: Pixel;
	font-size: 20px;
	line-height: 20px;
}

h1{
	text-align: center;
}
/*
	Game CSS
*/
#slime-farmer{
	width: 100%;
	overflow: hidden;
	position: relative;
}
#slime-farmer *{
	image-rendering: auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	position: absolute;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
#slime-farmer img.item{
	cursor: pointer;
	z-index: var(--herd-z);
	height: calc(var(--grid-cell)*2);
	width: var(--grid-cell);
	display: block;
}
#slime-farmer img.food{
	cursor: pointer;
	z-index: calc(var(--herd-z) + 10);
	height: var(--grid-cell);
	width: var(--grid-cell);
	display: block;
	position: absolute;
}
#slime-farmer img.crystals{
	z-index: calc(var(--herd-z) + 20);
	height: var(--grid-cell);
	width: var(--grid-cell);
	display: block;
	position: absolute;
}
#slime-farmer img.slime{
	z-index: calc(var(--herd-z) + 30);
	cursor: pointer;
	width: var(--grid-cell);
	display: block;
	position: absolute;
}
#slime-farmer img.objects{
	z-index: calc(var(--herd-z) + 40);
	height: var(--grid-cell);
	width: var(--grid-cell);
	display: block;
	position: absolute;
}

/*
	Background UI Elements
*/
#slime-farmer #ui{
	z-index: var(--ui-z);
	width: 100%;
	height: 100%;
}
#slime-farmer #ui > div *{
	position: relative;
}
#slime-farmer #menu{
	z-index: var(--menu-z);
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
}
#slime-farmer #menu .wrapper{
	width: calc(var(--grid-cell)*6);
	margin: calc(var(--grid-cell)*4) auto 0;
	border-radius: var(--grid-cell);
	position: relative;
	text-align: center;
	padding: var(--grid-cell);
	background-color: #666;
}
#slime-farmer #menu .button{
	cursor: pointer;
	position: relative;
	display: block;
	width: calc(var(--grid-cell)*4);
	height: var(--grid-cell);
	margin: 0 auto var(--grid-cell);
	font-size: 26px;
	line-height: 42px;
	text-align: initial;
	background-image: url('../images/menu.button.png');
	background-size: calc(var(--grid-cell)*4);
}
#slime-farmer #menu .button:last-of-type{
	margin-bottom: 0px;
}
#slime-farmer #menu .button > span{
	width: 100%;
	height: 100%;
	text-align: center;
	display: inline-block;
	margin-top: -6px;
}
#slime-farmer #menu .button:hover{
	color: #FFF;
	background-position: bottom;
}
#slime-farmer #ui #bank{
	width: calc(var(--grid-cell) * 4);
	height: calc(var(--grid-cell) * 8);
	padding: calc(var(--grid-cell)/2);
	margin: var(--grid-cell);
	background-image: url('../images/bg.frame-metal.png');
	background-size: 100% auto;
	background-color: rgba(0,0,0,.5);
	border-radius: 3px;
	box-shadow:  5px 5px rgba(0,0,0,.5);
}
#slime-farmer #ui #food-box{
	width: calc(100% - var(--grid-cell) * 14);
	max-height: calc(var(--grid-cell) * 3);
	margin-top: calc(var(--grid-cell)*3);
	margin-left: calc(var(--grid-cell) * 7);
	text-align: center;
	background-color: #EEEEEE;
	border-radius: 8px;
	box-shadow:  5px 5px rgba(0,0,0,.5);
	padding: calc(var(--grid-cell)/2) var(--grid-cell);
}
#slime-farmer #ui #food-box .item,
#slime-farmer #ui #food-box .food{
	width: var(--grid-cell);
	margin-right: calc(var(--grid-cell) * 1.5);
	float: left;
}
#slime-farmer #ui #food-box span{
	display: block;
}

#slime-farmer #ui #food-box img{
	width: calc(var(--grid-cell));
	cursor: pointer;
}
#slime-farmer #ui #bank .item,
#slime-farmer #ui #bank .food{
	cursor: pointer;
}
#slime-farmer #ui #bank span{
	height: 16px;
}
#slime-farmer #ui #bank img{
	margin-right: 5px;
	width: calc(var(--grid-cell)/2);
}
#slime-farmer #ui #herd{
	right: 0px;
	width: calc(var(--grid-cell) * 4);
	height: calc(var(--grid-cell) * 8);
	margin: var(--grid-cell);
	/*padding: calc(var(--grid-cell)/2);*/
	padding: var(--grid-cell);
	background-image: url('../images/bg.frame.png');
	background-color: rgba(0,0,0,.5);
	background-size: 100% auto;
	border-radius: 4px;
	box-shadow:  5px 5px rgba(0,0,0,.5);
}
#slime-farmer #ui #herd img{
	margin-right: 5px;
	width: calc(var(--grid-cell)/2);
}
#slime-farmer #ui #info-box{
	width: 100%;
	padding: var(--grid-cell);
}
/* The animation code */
@keyframes chest {
  0%   {background-position: right}
  100% {background-position: left}
}
#slime-farmer #ui #info-box #sell-box{
	box-sizing: border-box;
	position: absolute;
	left: var(--grid-cell);
	height: calc(var(--grid-cell) * 4);
	width: calc(var(--grid-cell) * 4);
	color: #FFFFFF;
	text-align: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-image: url('../images/object.sell-chest.png');
}

#slime-farmer #ui #info-box #sell-box.animate{
	animation: chest .25s steps(1,end) infinite;
}
#slime-farmer #ui #info-box #buy-box{
	padding: calc(var(--grid-cell)/2);
	color: #000;
	overflow-y: scroll;
	background-color: #333;
	width: calc(100% - var(--grid-cell) * 5);
	height: 100%;
	margin-left: calc(var(--grid-cell) * 5);
	border: 2px solid #333333;
	background-repeat: repeat;
	background-image: url('../images/bg.buy-box.png');
	background-size: var(--grid-cell) var(--grid-cell);
	background-attachment: scroll;
}
#slime-farmer #ui #info-box #buy-box > div{
	float: left;
	background-image: url('../images/bg.frame-buy.png');
	background-size: calc(var(--grid-cell)*2) calc(var(--grid-cell)*2);
	height: calc(var(--grid-cell)*2);
	width: calc(var(--grid-cell)*2);
	margin-right: var(--grid-cell);
	margin-bottom: var(--grid-cell);
}
#slime-farmer #ui #info-box #buy-box .button{
	display: inline-block;
	cursor: pointer;
	height: var(--grid-cell);
	width: var(--grid-cell);
	margin-top: calc(var(--grid-cell)/2.25);
	margin-left: calc(var(--grid-cell)/2);
	margin-bottom: 2px;
	overflow: hidden;
}
#slime-farmer #ui #info-box #buy-box span:after{
	width: calc(var(--grid-cell)/2);
	height: calc(var(--grid-cell)/2);
	display: inline-block;
	background-image: url('../images/coin.png');
	content: ' ';
	position: absolute;
	top: 1px;
}
#slime-farmer #ui #info-box #buy-box span{
	background-color: #8f563b;
	height: calc(var(--grid-cell)/2 + 4);
	width: 100%;
	display: block;
	margin-top: 12px;
	color: #FFF;
	text-align: center;
	background-image: url('../images/bg.frame-price.png');
	background-size: 100% 100%;
}
/*
	Background Styles
*/
#slime-farmer #background{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: var(--bg-z);
	background-color: var(--main-bg-color);
	pointer-events: none;
}
#slime-farmer #background .sky{
	width: 100%;
	background-image: url('../images/bg.sky.png');
	background-size: 100% 100%;
}
#slime-farmer #background .scenery{
	width: 100%;
}
#slime-farmer #background .hedges{
	width: 100%;
	bottom:0px;
	height: var(--grid-cell);
	background-repeat: repeat-x;
	background-image: url('../images/bg.hedge.png');
	background-size: var(--grid-cell) var(--grid-cell);
}
#slime-farmer #background .clouds{
	top:0px;
	width: 100%;
	height: calc(var(--grid-cell)*4);
	background-repeat: repeat-x;
	background-image: url('../images/bg.clouds.png');
	background-size: auto 100%;
}
#slime-farmer #background .ground{
	width: 100%;
}
#slime-farmer #background .ground .top{
	height: var(--grid-cell);
	width: 100%;
	top: 0px;
	background-image: url('../images/floor.top.png');
	background-repeat: repeat;
	background-size: var(--grid-cell) var(--grid-cell);
}
#slime-farmer #background .ground .middle{
	height: 100%;
	width: 100%;
	background-image: url('../images/floor.middle.png');
	background-repeat: repeat;
	background-size: var(--grid-cell) var(--grid-cell);
}
#slime-farmer #background .ground .bottom{
	height: var(--grid-cell);
	width: 100%;
	bottom: 0px;
	background-image: url('../images/floor.bottom.png');
	background-repeat: repeat;
	background-size: var(--grid-cell) var(--grid-cell);
}
/* The animation code */
@keyframes jump {
  0%   {margin-top: 0;}
  50%  {margin-top: calc(var(--grid-cell) * -1);}
  100% {margin-top: 0;}
}
#slime-farmer .slime.jump{
	animation-name: jump;
}
/* The animation code */
@keyframes eat {
  0% {
	height: calc(var(--grid-cell)*1.25);
  }
  100% {
	height: var(--grid-cell);
  }
}