@media screen and (max-width: 300px) {
	body {
		background-color: #000000;		
	}
	
	.desc:after {
		content: "less than 300px";
	}
}

@media screen and (min-width: 300px) and (max-width: 600px) {
	body {
		background-color: #ff3333;		
	}
	
	.desc:after {
		content: "between 300px and 600px";
	}
}

@media screen and (min-width: 600px) and (max-width: 900px) {
	body {
		background-color: #ff6600;		
	}
	
	.desc:after {
		content: "between 600px and 900px";
	}
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
	body {
		background-color: #ffff33;		
	}
	
	.desc:after {
		content: "between 900px and 1200px";
	}
}

@media screen and (min-width: 1200px) and (max-width: 1500px) {
	body {
		background-color: #66cc33;		
	}
	
	.desc:after {
		content: "between 1200px and 1500px";
	}
}

@media screen and (min-width: 1500px) and (max-width: 1800px) {
	body {
		background-color: #66ccff;		
	}
	
	.desc:after {
		content: "between 1500px and 1800px";
	}
}

@media screen and (min-width: 1800px) and (max-width: 1920px) {
	body {
		background-color: #0066ff;		
	}
	
	.desc:after {
		content: "between 1800px and 1920px";
	}
}

@media screen and (min-width: 1920px) {
	body {
		background-color: #9900ff;		
	}
	
	.desc:after {
		content: "at least 1920px wide";
	}
}

@media screen and (max-width: 300px) {
	h1, .desc, .orientation, footer {
		color: #ffffff;
	}
}

@media screen and (min-width: 1800px) {
	h1, .desc, .orientation, footer {
		color: #ffffff;
	}
}

@media screen and (orientation: portrait) {
	.orientation:after {
		content: "portrait";
	}
}

@media screen and (orientation: landscape) {
	.orientation:after {
		content: "landscape";
	}
}