html {
	-webkit-user-select: none;
	-webkit-text-size-adjust: none;
	position: fixed;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: silver;
}

body {
	width: 100%;
	height: 100%;
	background:#000;
	padding:0;
	margin:0;
	font-weight: bold;
}

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

.canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 400px;
	z-index: 0;
}

/* Upper Left */
.overlay1 {
	position: absolute;
	top: 2%;
	left: 2%;
	width: 98%;
	height: 33%;
	color: white;
	font-family: Courier;
	font-size: 12pt;
	z-index: 1;
}

/* Lower Left */
.overlay2 {
	position: absolute;
	top: 80%;
	left: 2%;
	width: 98%;
	height: 20%;
	color: white;
	font-family: Courier;
	font-size: 12pt;
	z-index: 1;
}

/* Upper Right */
.overlay3 {
	position: absolute;
	top: 25%;
	left: 80%;
	width: 20%;
	height: 10%;
	color: white;
	font-family: Courier;
	font-size: 12pt; 
	z-index: 1;
}

/* Lower Right */
.overlay4 {
	position: absolute;
	top: 35%;
	left: 80%;
	width: 20%;
	height: 40%;
	color: white;
	font-family: Courier;
	font-size: 12pt; 
	z-index: 1;
}

@media screen and (max-height:800px) and (orientation: landscape) {
/* Lower Left */
.overlay2 {
	position: absolute;
	top: 65%;
	left: 2%;
	width: 98%;
	height: 35%;
	color: white;
	font-family: Courier;
	font-size: 12pt;
	z-index: 1;
}
}