@charset "UTF-8";

/* Colors */
	/* 100% */
		.bg-red { background-color: rgba(255,0,0,1); }
		.bg-orange { background-color: rgba(255,127.5,0,1); }
		.bg-yellow { background-color: rgba(255,255,0,1); }
		.bg-chartreuse { background-color: rgba(127.5,255,0,1); }
		.bg-green { background-color: rgba(0,255,0,1); }
		.bg-teal { background-color: rgba(0,255,127.5,1); }
		.bg-cyan { background-color: rgba(0,255,255,1); }
		.bg-indigo { background-color: rgba(0,127.5,255,1); }
		.bg-blue { background-color: rgba(0,0,255,1); }
		.bg-violet { background-color: rgba(127.5,0,255,1); }
		.bg-magenta { background-color: rgba(255,0,255,1); }
		.bg-pink { background-color: rgba(255,0,127.5,1); }
		.bg-black { background-color: rgba(0,0,0,1); }
		.bg-gray { background-color: rgba(127.5,127.5,127.5,1); }
		.bg-white { background-color: rgba(255,255,255,1); }
	
	/* 50% */
		.bg-red-50 { background-color: rgba(255,0,0,.5); }
		.bg-orange-50 { background-color: rgba(255,127.5,0,.5); }
		.bg-yellow-50 { background-color: rgba(255,255,0,.5); }
		.bg-chartreuse-50 { background-color: rgba(127.5,255,0,.5); }
		.bg-green-50 { background-color: rgba(0,255,0,.5); }
		.bg-teal-50 { background-color: rgba(0,255,127.5,.5); }
		.bg-cyan-50 { background-color: rgba(0,255,255,.5); }
		.bg-indigo-50 { background-color: rgba(0,127.5,255,.5); }
		.bg-blue-50 { background-color: rgba(0,0,255,.5); }
		.bg-violet-50 { background-color: rgba(127.5,0,255,.5); }
		.bg-magenta-50 { background-color: rgba(255,0,255,.5); }
		.bg-pink-50 { background-color: rgba(255,0,127.5,.5); }
		.bg-black-50 { background-color: rgba(0,0,0,.5); }
		.bg-gray-50 { background-color: rgba(127.5,127.5,127.5,.5); }
		.bg-white-50 { background-color: rgba(255,255,255,.5); }

	
.non-interactive
{ pointer-events: none; }
.interactive
{ pointer-events: auto; }
	

stretch-grid{
	display: grid;
	
	min-width: 100%; width: 100%;
	min-height: 100%; height: 100%;
}

grid-node{
	display: grid;
}

stretch-flex{
	position: relative;
	display: flex; flex-direction: column;
	
	min-width: 100%; width: 100%;
	min-height: 100%; height: 100%;
}

layer-wrapper {
	position: absolute; top: 0; left: 0;
	min-width: 100%; width: 100%;
	min-height: 100%; height: 100%;
	display: flex; flex-direction: column;
}

stretch-wrapper {
	position: absolute; top: 0; left: 0;
	min-width: 100%; width: 100%;
	min-height: 100%; height: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

/* Debug */
	test-object {
		display: block;
		width: 50px;
		height: 1500px;
		background-color: #000;
	}