body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: black;
	touch-action: none;
}
/*canvas {
	display: block;
	touch-action: none;
	width: 100vw; 
    height: 75vw;
    max-height: 100vh;
    max-width: 133.33vw;
    margin: auto;
    position: absolute;
    top:0;
	bottom: 0;
    left:0;
	right: 0;
}*/
canvas {
	/* width: 100vw; 
	height: calc(100vw * 3 / 4); */

	min-width: 320px;
	min-height: 240px;
	width: 100%;
	height: 100%;
	display: block;

	/* align center */
	margin: auto;
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;

	/* visual indicators 
	background:
	url(data:image/gif;base64,R0lGODlhAgAUAIABAB1ziv///yH5BAEAAAEALAAAAAACABQAAAIHhI+pa+EPCwA7) repeat-y center top,
	url(data:image/gif;base64,R0lGODlhFAACAIABAIodZP///yH5BAEAAAEALAAAAAAUAAIAAAIIhI8Zu+nIVgEAOw==) repeat-x left center,
	silver;*/
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}
/* @media (min-width: 133.333vh) {
	canvas {
		width: calc(100vh * 4 / 3);
		height: 100vh;
	}
} */