html, body {
	margin: 0;       /* remove default margin */
	padding: 0;      /* remove default padding */
	width: 100%;     /* full width */
	height: 100%;    /* full height */
	overflow: hidden; /* optional: prevent scrollbars */
}

#container {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: black;
}

#wrapper {
	position: relative;
}

#overlay-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#overlay {
	padding: 10px 10px 10px 10px;
	background-color: #fea3a8ff;
	border-radius: 10px;
	flex: 0 0 auto;
	width: auto;
}

#progress-bar {
	width: 100%;
}

#canvas {
	border: 0px none;  /* Border will result in wrong mouse position */
	background-color: black;
}

#title {
	text-align: center;
	color: white;
	font-weight: bold;
}

#status {
	text-align: center;
	color: white;
}

#logo {
	height: 50px;
	width: 50px;
	margin: 0px auto;
	background-image: url("./logo.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	animation: pulse 1.5s infinite ease-in-out;
	transform-origin: center; /* scale from the center */
}
@keyframes pulse {
	0%   { transform: scale(1); }
	10%  { transform: scale(1.3); }  /* first beat */
	20%  { transform: scale(1); }
	30%  { transform: scale(1.3); }  /* second beat */
	40%  { transform: scale(1); }
	100% { transform: scale(1); }    /* rest until next cycle */
}