* {
	box-sizing: border-box;
}

h1 {
	font-family: arial;
	color: rgb(11, 86, 117);
}

body,
html {
	background-repeat: no-repeat;
	font-family: arial;
	background-color: rgb(54, 69, 79);
	color: rgb(28, 78, 104);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

footer {
	font-family: arial;
	font-size: 12px;
	padding-left: 10px;
	padding-bottom: 10px;
	position: absolute;
	bottom: 0;
	width: auto;
}

/* Links */
a {
	text-decoration: none;
}

a:link {
	color: rgb(233, 73, 154);
}

a:visited {
	color: rgb(110, 30, 71);
}

a:hover {
	color: rgb(252, 207, 230);
}


/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
#canvas {
	padding-right: 0;
	border: 0px none;
	display: block;
	max-width: 100%;
	max-height: 100%;
}

#loadingCanvas {
	padding-right: 0;
	display: none;
	border: 0px none;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	aspect-ratio: 800 / 600;
	/* Maintain aspect ratio */
}

#canvas-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #9ACDED;
	/* Optional: Background for visibility */
	background-image: url('bg.png');
	/* Path to your image */
	background-size: 10%;
	/* Scale the image to cover the entire area */
	background-position: initial;
	/* Center the image */
	background-repeat: repeat;
	/* Prevent the image from repeating */
	background-attachment: fixed;
	/* Optional: Make the background fixed while scrolling */
}