*
{
	margin: 0;
	padding: 0;
}

html, body
{
	width: 100%;
	height: 100%;
	background-color: red;
}

body
{
	background-color: black;
	
}

#main_area
{
	display: flex;
	width: 100%;
	height: 100%;
}

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


/***Start menu style***/
#startMenu
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#startMenu > p
{
	margin-top: 2%;
	margin-bottom: 2%;
}

#startMenu > .menuButton
{
	width: 50%;
	height: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	font-size: xx-large;
}

/***Credits menu style***/
#credits
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#credits > p
{
	margin-top: 2%;
	margin-bottom: 2%;
}

#credits > .menuButton
{
	width: 50%;
	height: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	font-size: xx-large;
}

/***Game Over menu style***/
#gameOver
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#gameOver > p
{
	margin-top: 2%;
	margin-bottom: 2%;
}

#gameOver > .menuButton
{
	width: 50%;
	height: 5%;
	margin-top: 2%;
	margin-bottom: 2%;
	font-size: xx-large;
}

/***Combat interface***/
#combatInterface
{
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#combatInterface > #playerHealthBar
{
	position: absolute;
	left: 0px;
	top: 0px;
	height: 30px;
	width: 33%;
	border: 2px solid;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

#combatInterface > #playerHealthBar > #playerHealth
{
	position: absolute;	
	height: 100%;
	width: 100%;
	background-color: red;
	top: 0px;
	left: 0px;
}

#combatInterface > #playerHealthBar > p
{
	z-index: 1;
	font-size: xx-large;
}

#combatInterface > #NPCHealthBar
{
	position: absolute;
	left: calc(100% - 33% - 2*2px);
	top: 0px;
	height: calc(30px);
	width: 33%;
	border: 2px solid;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

#combatInterface > #NPCHealthBar > #NPCHealth
{
	position: absolute;	
	height: 100%;
	width: 100%;
	background-color: red;
	top: 0px;
	right: 0px;
}

#combatInterface > #NPCHealthBar > p
{
	z-index: 1;
	font-size: xx-large;
}

#combatInterface > #playerBuffsBar
{
	position: absolute;
	left: 0px;
	top: 40px;
	height: 50px;
	width: 33%;
	
	display: flex;
	align-items: center;
	justify-content: left;
}

#combatInterface > #playerBuffsBar > div
{
	display: flex;
	position: relative;
	
	width: 50px;
	height: 50px;
}

#combatInterface > #playerBuffsBar > div > div /*Cooldown overlay*/
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0.5;
	width: 100%;
	background-color: #000000;
	display: block;
	
	height: 100%; /*adjustable value*/
}

#combatInterface > #draw
{
	width: 100%;
	height: 90%;
}

#combatInterface > #action_buttons
{
	width: 100%;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#combatInterface > #action_buttons > .skill
{
	cursor: pointer;
	width: 50px;
	height: 50px;
	margin: 3px;
	
	border: 3px solid #000000;
	border-radius: 10px 10px 10px 10px;
	
	display: flex;
	position: relative;
}

#combatInterface > #action_buttons > .skill > div
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0.5;
	width: 100%;
	background-color: #000000;
	display: block;
	
	height: 100%; /*adjustable value*/
}