#hud-top {
	top: 0;
	margin-top: 8px;
	width: 171px;
	background-image: url('Images/top_screen.png');
}
#hud-bottom {
	bottom: 0;
	margin-bottom: 8px;
	margin-left: 10px;
	width: 165px;
}
#hud-top, #hud-bottom {
	position: absolute;
	height: 40px;
	bottom: 0;
	margin-left: 7px;
	z-index: 8;
	background-size: 100% 100%;
}
.hud-element {
	position: relative;
	display: inline-block;
	float: left;
	width: 25px;
	height: 25px;
	margin-left: 8px;
	text-align: center;
	z-index: 3;
	background-size: 100% 100%;
}
.loading {
	position: relative;
	display: inline-block;
	float: left;
	top: 30%;
	width: 100px;
	height: 100px;
}
#loading_screen p {
	position: relative;
	display: block;
	top: 12%;
}
#loading_screen {
	position: absolute;
	margin: 0 auto;
	top: 25%;
	left: 20%;
	display: block;
	width: 100%;
	z-index: 3;
	overflow: hidden;
	height: 100%;
	font-size: 0.8em;
}
.name,.name-sub {
	opacity: 0.8 ;
	position: relative;
	display: block;
	margin: 0 auto;
	width: 50%;
	background: black;
	color: white;
	top: 40%;
	z-index: 7;
	padding:  5px 0px 5px 5px;
	font-family: 'Press Start 2P', cursive;
	border: none;
}
.heart {
	position: relative;
	display: inline-block;
	float: right;
	width: 25px;
	height: 25px;
	background-size: 100% 100%;
	background-image: url('Images/heart.png');
	margin-top: 25px;
	margin-left: 5px;
}
.sick {
	position: absolute;
	left: 14%;
	top:30%;
	display: block;
	width: 30px;
	z-index: 3;
	height: 30px;
	background-size: 100% 100%;
}
.game-menu {
	position: relative;
	display: none;
	margin: 0 auto;
	width: 80%;
	height: 50%;
	top: 24%;
}
#yoshi-weight p {
	margin-top: 11%;
	width: 100%;
	margin-left: 5px;
	font-size: 0.7em;
}
#hunger,#happy{
	position: relative;
	display: block;
	float: left;
	width:95%;
	height: 45%;
}
#cookie,#fruit {
	position: relative;
	display: block;
	top: 10px;
	float: left;
	width:95%;
	margin-top: 10px;
	height: 25%;
}
#yoshi-food div {
	position: relative;
	display: block;
	clear: both;
	text-align: left;
	width: 83%;
	left: 0%;
	height:20%;
	font-size: 0.8em;
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 30px 30px;
}
#wrapper {
	position: relative;
	display: block;
	width: 600px;
	height: 400px;
	margin: 0 auto;
	font-family: 'Press Start 2P', cursive;
    -webkit-perspective: 150px;
    perspective: 1200px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: crosshair;
	background-image:url("Images/background_green.png");
}
#screen {
	position: relative;
	display: block;
	left: -8px;
	top: 25%;
	width: 192px;
	height: 202px;
	margin: 0 auto;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	background-image:url("Images/screen.png");
}
#screenlayer {
	position: absolute;
	display: block;
	left: 196px;
	top: 25%;
	width: 192px;
	height: 202px;
	margin: 0 auto;
	z-index: 10;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.2;
	background-size: 100% 100%;
	background-image:url("Images/screen_layer.gif");
}
.yoshi {
	position: absolute;
	display: block;
	top: -1%;
	left: 0%;
	width: 192px;
	height: 202px;
	margin: 0 auto;
	background-size: 80% 80%;
	background-repeat: no-repeat;
	background-position: center;
	color: transparent;
	opacity: 1;
	z-index: 2;
	overflow: hidden;
}
.turd {
	position: absolute;
	left: 15%;
	top: 5%;
	width: 142px;
	height: 180px;
	z-index: 4;
	background-size: 100% 100%;
}
.box {
	position: relative;
	left: 10%;
	top: 10%;
	display: inline-block;
	float: left;
	width: 40px;
	height: 40px;
	background-size: 100% 100%;
}
.fakeYoshi {
	position: absolute;
	display: block;
	width: 50px;
	height: 50px;
	left: 33%;
	top: 53%;
	background-size: 100% 100%;
}
#home div {
	margin-bottom: 10px;
	z-index: 5;
	position: relative;
	display: block;
	float: left;
	width: 400px;
	height: auto;
}
#home {
	width: 400px;
	float: left;
	position: relative;
	display: block;
}
#fakebutton,#fakebutton2 {
	position: relative;
	display: block;
	top: 7%;
	margin: 0 auto;
	width: 60%;
	height:45px;
	text-align: center;
	font-size: 0.8em; 
	z-index: 6;
	font-family: 'Press Start 2P', cursive;
	pointer-events: none;
	background-size: 30px 30px;
	background-repeat: no-repeat;
}
#fileToLoad {
	position: absolute;
	display: block;
	top: 50%;
	left: 7%;
	width: 80%;
	height: 30px;
	color: transparent;
	padding:  5px 0px 5px 5px;
	background: none;
	opacity: 0;
	z-index: 5;
	border: 2px solid black;
}
button {
	position: absolute;
	display: block;
	left: 7%;
	top: 5%;
	width: 80%;
	height: 30px;
	color: transparent;
	padding:  5px 0px 5px 5px;
	background: none;
	opacity: 0;
	z-index: 5;
	border: 2px solid BLUE;
}
#green,#red,#blue,#black {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: red;
}
#hud-top div {top: 11%;}
.name-sub {width: 45%;top: 45%;font-size: 0.6em;}
input[type='file'] {color: transparent;}
#green{background-color: #5cc64e;top: -20px;left: -20px;}
#red{background-color: #fe0000;left: -5px;}
#blue{background-color: #5369b5;left: 5px;}
#black{background-color: #232228;top: 95%;top: -20px;left: 20px;}
#yoshi-stats p {position: absolute;font-size: 0.7em;}
#cookie {background-image: url('Images/food.png');}
#fruit{background-image: url('Images/fruit.png')}
#hud-top .hud-element {margin-top: 5px;margin-left: 15px;}
#hud-bottom .hud-element {margin-bottom: 5px;margin-left: 16px;}
.weight-number:before {content: "Weight:"}
.weight-number::after {content: "Lbs";}
.age-number:before {content: "Age:"}
.age-number::after {content: "year"}
.name-input:before {content: "Name:"}
.hud-element:hover,.box:hover,#green:hover,#red:hover,#black:hover,#blue:hover {opacity: 0.7;}
html {background-color: #cccc33;}