@import "screen.css";

/* you only need width to set up columns; all columns are 100%-width by default, so we start
   from a one-column mobile layout and gradually improve it according to available screen space */

@media only screen and (min-width: 800px) and (min-height: 500px) and (orientation: landscape) {
	.graphblock { width: 100vw; }
	.graphblock { height: 50%; }
	.graphitem { width: 50%;   }
	.graphitem img  { width: 100%;   }
	.streamblock { width: 100vw;   }
	.streamblock { height: 50vw; }
	.streamitem { width: 50%;   }
	.streamitem img  { width: 100%;   }
	.streamitem iframe  { 
		height: 100vh;
		max-height: 200%;
		width: 200vw;
		max-width: 200%;
		width: 100vw;
		transform: scale(0.5); transform-origin: top left;
	}
}

@media only screen and (min-width: 1800px) and (min-height: 950px) and (orientation: landscape) {
	.streamitem { width: 50%;   }
	.streamitem iframe {
		height: 50vh;
		max-height: 100%;
		width: 100vh;
		max-width: 100%;
		transform: none;
	}
}