:root {
	--canvasScaling: 3;
}

@font-face {
	font-family: 'custom';
	src: url('./font/Pixellari.ttf');
}

body {
	background-color: #0b1021;
	image-rendering: pixelated;
}


#canvas-wrap {
	position: relative;
}

#overlay {
	position: absolute;
	width: 1200px;
	height: 600px;

	user-select: none;
}
#canvas {
	position: absolute;
	display: block;
}

#banner {
	position: absolute;
	font-size: 60px;

	top: 100px;
	left: 50%;

	visibility: hidden;
}










/* HUD stuff */
#winnerImg {
	position: absolute;
	width: calc(var(--canvasScaling) * 132px);
	height: calc(var(--canvasScaling) * 55px);
	z-index: 0;
}
#winnerText {
	position: absolute;
	top: 40px;
	left: 35px;
	z-index: 2;

	font-family: "custom";
	font-size: 55px;
}
#winnerBoard {
	position: absolute;
	left: 400px;
	top: 230px;
	width: 500px;

	visibility: hidden;
}
#scoreCTF {
	position: absolute;
	left: 460px;
	top: 20px;

	font-size: 60px;
	font-family: "custom";
	visibility: hidden;
}
.ammoImg {
	width: 100px;
	height: 100px;
}
#ammo1 {
	position: absolute;

	font-size: 35px;
	font-family: "custom";
	visibility: hidden;
}
#ammo2 {
	position: absolute;

	font-size: 35px;
	font-family: "custom";
	visibility: hidden;
}
#tinyMenuButton {
	position: absolute;
	top: 2px;
	right: 2px;

	visibility: hidden;
}
#soundButton {
	position: absolute;
	top: 2px;
	right: 104px;

	visibility: hidden;	
}
#musicButton {
	position: absolute;
	top: 2px;
	right: 136px;

	visibility: hidden;
}


/* Selection screen buttons */
.selectScreen {
	position: absolute;
	visibility: hidden;
}
#levelLeft {
	left: 355px;
	top: 210px;

	height: 50px;
}
#levelRight {
	left: 1135px;
	top: 210px;

	height: 50px;
}
#goButton {
	left: 600px;
	top: 475px;
	height: 80px;

	font-family: "custom";
	font-size: 50px;
}
#levelName {
	left: 440px;
	top: 5px;
	width: 720px;

	text-align: center;
	font-family: "custom";
	font-size: 60px;
}




/* Loading screen stuff*/
.loadingScreen {
	position: absolute;
}

#loadingText {
	left: 400px;
	top: 250px;
	font-size: 100px;
	font-family: "custom";
	color: black;
}






/* Menu screen buttons*/
.menuScreen {
	position: absolute;
	left: 30%;

	height: 80px;
	width: auto;
}
#playButton {
	top: 300px;

	visibility: hidden;
}
#controlButton {
	top: 400px;

	visibility:hidden;
}
#unlockButton {
	top: 450px;
}


/*Unlock screen buttons*/
.unlockScreen {
	display: inline;
}
#weaponry {
	position: absolute;
	left: 460px;
	top: 250px;

	width: 600px;
	height: 150px;
	border: 5px black solid;
	visibility: hidden;
}
.weaponBox {
	position: static;
	width: 150px;
	height: 150px;
	border: 2px black solid;
}


/* Loner menu button */
#backToMenuButton {
	position: absolute;
	top: 475px;
	left: 50px;

	height: 80px;
	width: auto;

	visibility: hidden;
}

#rematchButton {
	position: absolute;
	top: 475px;
	left: 400px;

	height: 80px;
	width: auto;
	visibility: hidden;
}