/* CSS Document */

main, canvas {
	/* centreer horizontaal en verticaal */
	margin: 			auto;
	position: 			absolute;
	
	top: 0; bottom: 0; 				/* vertical center */
	left: 0; right: 0;				/* horizontal center */
}

main {
    width: 				100vw;
	max-height: 		100vh; 		/* Precies andersom dan met de WIDTH/MAX-WIDTH, waardoor hij nooit uit de browser 'loopt' */
	
    height: 			75vw; 		/* height:width ratio = 3/4 = .75 */
    max-width: 			133.33vh; 	/* 4/3 = 1.3333333 */
/*
	//-> Voor een breedbeeld verhouding ::
	//-> LET OP: in je script moet je voor de pixelverhouding nu bijv. width = 1600 en height = 900 invullen !!
*/
    height: 			56.25vw; 	/* height:width ratio = 9/16 = .56 */
    max-width: 			177.78vh;  	/* 16/9 = 1.7777777 */
}

canvas {
	width: 				90%;
	height: 			90%;
	background-color: 	black;
	
	border: 			10px solid;
	border-radius: 		10px;
	border-color: 		lightgray;
}