:root{
	--viewportWidth: calc(100% - 120px);
	--viewportHeight: auto;
	--aspectRatio: 16/9;
	--width: 100%;
	--height: auto;
	
	--controlLeft: calc(100% - 100px);
	--controlTop: 0px;
	--controlDirection: column;
}
#mainContent{
	position: absolute;
	left: 0;
	top: 0;
	width: min(var(--viewportWidth), 1920px);
	height: min(var(--viewportHeight), 1080px);
	margin: 2px;
}

#debugCanvas{
	position: absolute;
	left: 0;
	top: 1080;
}

#mainCanvas{
	position: absolute;
	left: 0;
	top: 0;
	width: min(var(--width), 1920px);
	height: min(var(--height), 1080px);
	//aspect-ratio: var(--aspectRatio);
	border: solid;
	border-width: 1px;
}

#controls{
	position: absolute;
	left: var(--controlLeft);
	top: var(--controlTop);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: var(--controlDirection);
}

iframe{
	width: 80px;
	border-style:none;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Slider */
input[type=range][orient=vertical] {
	writing-mode: vertical-lr;
	direction: rtl;
	width: 16px;
	vertical-align: bottom;
}
input[type=range][orient=horizontal] {
	height: 32px;
	vertical-align: middle;
	margin:40px;
	margin-bottom:100px;
	zoom: 2;
}