<html>

<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
	<style>
		@import url('https://fonts.googleapis.com/css?family=Electrolize');

		.FONT {
			font-family: 'Electrolize', sans-serif;
		}
	</style>
</head>

<body>
	<div id="background">
		<div style="display: flex;justify-content: center;">
			<div style="width: 1500px;height: 50px;background-color: #72171793; text-align: center; display: flex;align-items: center;justify-content: center;font-size: 27.6px;" class="FONT">
				<span id="helpMessages" style="color: rgb(255, 255, 255);"></span>
			</div>
		</div>

		<div class="overlay"></div>
		<div class="stars" aria-hidden="true"></div>
		<div class="starts2" aria-hidden="true"></div>
		<div class="stars3" aria-hidden="true"></div>
		<main class="main">
			</section>
		</main>
	</div>
</body>


<script type="text/javascript">
	var HelpMessagesList = [
		"Press <span style='color:red'>F1</span> to heal",
		"Press <span style='color:red'>F2</span> to get armor",
		"Press <span style='color:red'>TAB</span> to open your inventory",
		"Press <span style='color:red'>K</span> to store your vehicle",
		"Press <span style='color:red'>J</span> to create a squad",
		"Use <span style='color:red'>/lobby</span> to exit a game mode",
	];
	
	var HelpMessagesIndex = 0;
	var HelpMessagesElement = document.getElementById("helpMessages");
	HelpMessagesElement.innerHTML = HelpMessagesList[HelpMessagesIndex];
	setInterval(function() {
		HelpMessagesElement.innerHTML = HelpMessagesList[HelpMessagesIndex];
		HelpMessagesIndex++;
		if (HelpMessagesIndex >= HelpMessagesList.length) {
			HelpMessagesIndex = 0;
		}
	}, 2700);

</script>

</html>