#game{
	width: 751px;
	height: 301px;
	border: 10px solid black;
	background-color: #efefef;
	margin: auto;
	border-radius: 15px;
}

#levelReset {
	border: none; /* Remove borders */
	color: white; /* Add a text color */
	padding: 14px 28px; /* Add some padding */
	cursor: pointer;
	background-color: #c03030;
	border-radius: 10px;
	position: relative;
  }
#levelReset:hover {
	background-color: #ff3030;
}

#hintBtn {
	border: none; /* Remove borders */
	color: white; /* Add a text color */
	padding: 14px 28px; /* Add some padding */
	left: 10px;
	cursor: pointer;
	background-color: #c03030;
	border-radius: 10px;
	position: relative;
}
#hintBtn:hover {
	background-color: #ff3030;
}

#mobileBtn{
	border: none; /* Remove borders */
	color: white; /* Add a text color */
	padding: 14px 28px; /* Add some padding */
	left: 20px;
	cursor: pointer;
	background-color: #c03030;
	border-radius: 10px;
	position: relative;

}

#mobileBtn:hover {
	background-color: #ff3030;
}

#gameData{
	border: 10px solid black;
	padding: 10px;
	margin: auto;
	border-radius: 15px;
	width: 450px;
	background-color: #efefef;
}

table {
	width: 100%;
	border-collapse: collapse;
	border: 2px solid black;
	background-color: #FFFFFF;
}
body {
	background-color: #e0e0e0;
}

/*Characters*/
#character{
	--left: 0px;
	--top: 0px;
	width: 30px;
	height: 30px;
	background-image: url("GOLD.png");
	position: relative;
	left: var(--left); 
	top: var(--top);
	z-index: 1;
}
#character2{
	--left2: 0px;
	--top2: 0px;
	width: 30px;
	height: 30px;
	background-image: url("RED.png");
	position: relative;
	left: var(--left2); 
	top: var(--top2);
	z-index: 1;
}
#character3{
	--left3: 30;
	--top3: 30;
	width: 30px;
	height: 30px;
	background-color: grey;
	position: relative;
	left: var(--left3); 
	top: var(--top3);
	z-index: 1;
}
#character4{
	--left4: 30;
	--top4: 30;
	width: 30px;
	height: 30px;
	background-color: grey;
	position: relative;
	left: var(--left4); 
	top: var(--top4);
	z-index: 1;
}

/*Goals*/
#goal{
	--goal-left: 30px;
	--goal-top: 30px;
	width: 30px;
	height: 30px;
	background-image: url("GOLD-Lock.png");
	position: relative;
	left: var(--goal-left);
	top: var(--goal-top);
	z-index: 2;
}
#goal2{
	--goal2-left: 30px;
	--goal2-top: 30px;
	width: 30px;
	height: 30px;
	background-image: url("RED-Lock.png");
	position: relative;
	left: var(--goal2-left);
	top: var(--goal2-top);
	z-index: 2;
}
#goal3{
	--goal3-left: 30px;
	--goal3-top: 30px;
	width: 30px;
	height: 30px;
	background-color: black;
	position: relative;
	left: var(--goal3-left);
	top: var(--goal3-top);
	z-index: 2;
}
#goal4{
	--goal4-left: 30px;
	--goal4-top: 30px;
	width: 30px;
	height: 30px;
	background-color: black;
	position: relative;
	left: var(--goal4-left);
	top: var(--goal4-top);
	z-index: 2;
}

/* Targets */
#targetp1{
	--target-left: 0px;
	--target-top: 0x;
	height: 30px;
	width: 30px;
	background-image: url();
	position: relative;
	left: var(--target-left);
	top: var(--target-top);
	z-index: 3;
	border-radius: 10%;
}
#targetp2{
	--target2-left: 0px;
	--target2-top: 0x;
	height: 30px;
	width: 30px;
	background-color: cyan;
	position: relative;
	left: var(--target2-left);
	top: var(--target2-top);
	z-index: 3;
}
#targetp3{
	--target3-left: 0px;
	--target3-top: 0x;
	height: 30px;
	width: 30px;
	background-color: magenta;
	position: relative;
	left: var(--target3-left);
	top: var(--target3-top);
	z-index: 3;
}
#targetp4{
	--target4-left: 0px;
	--target4-top: 0x;
	height: 30px;
	width: 30px;
	background-color: mediumseagreen;
	position: relative;
	left: var(--target4-left);
	top: var(--target4-top);
	z-index: 3;
}

/* Arrows */
#arrowIMG{
	height: 100px;
	width: 100px;
}

#upArrow{
	border: none;
	background-color: #c03030;
	padding: 15px;
	border-radius: 10px;
	margin-left: 50%;
	margin-top: 50px;
	position: absolute;
	transform: translate(-50%, 0);
}
#upArrow:active{
	background-color: #ff3030;
}
#upArrow:hover{
	padding: 20px;
}
#leftArrow{
	border: none;
	background-color: #c03030;
	padding: 15px;
	border-radius: 10px;
	margin-left: 40%;
	margin-top: 250px;
	position: absolute;
	transform: translate(-50%, 0);
}
#leftArrow:active{
	background-color: #ff3030;
}
#leftArrow:hover{
	padding: 20px;
}
#rightArrow{
	border: none;
	background-color: #c03030;
	padding: 15px;
	border-radius: 10px;
	margin-left: 60%;
	margin-top: 250px;
	position: absolute;
	transform: translate(-50%, 0);
}
#rightArrow:active{
	background-color: #ff3030;
}
#rightArrow:hover{
	padding: 20px;
}
#downArrow{
	border: none;
	background-color: #c03030;
	padding: 15px;
	border-radius: 10px;
	margin-left: 50%;
	margin-top: 450px;
	position: absolute;
	transform: translate(-50%, 0);
}
#downArrow:active{
	background-color: #ff3030;
}
#downArrow:hover{
	padding: 20px;
}