html, body {
    min-width: initial;
}

.group {
	flex-basis: 510px;
}

.current_ratio {
	position: absolute;
	top: 0;
	right: 70px;
}

pre {
	color: white;
	margin: 0;
}

pre .group {
	padding: 30px;
	background-color: rgba(0,0,0,.5);
	font-family: monospace;
	overflow: auto;
}

pre span {
	font-family: monospace;
}

.media {
	font-family: monospace;
	font-weight: bold;
	font-size: 16px;
	text-transform: uppercase;
}

.comment {
	color: grey;
}

/**************** Landscape *****************/
	
	@media (orientation: landscape) and (min-aspect-ratio: 9/1) { 	/* = 9.0 */
		.landscape_above_9_1 {
			color: #dd7b3b;
		}
	}	

	@media (orientation: landscape) and (max-aspect-ratio: 9/1) { 	/* = 9.0 */
		.landscape_above_9_1 {
			color: inherit;
		}
		.landscape_9_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 8/1) { 	/* = 8.0 */
		.landscape_9_1 {
			color: inherit;
		}
		.landscape_8_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 7/1) { 	/* = 7.0 */
		.landscape_8_1 {
			color: inherit;
		}
		.landscape_7_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 6/1) { 	/* = 6.0 */
		.landscape_7_1 {
			color: inherit;
		}
		.landscape_6_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 5/1) { 	/* = 5.0 */
		.landscape_6_1 {
			color: inherit;
		}
		.landscape_5_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 4/1) { 	/* = 4.0 */
		.landscape_5_1 {
			color: inherit;
		}
		.landscape_4_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 3/1) { 	/* = 3.0 */
		.landscape_4_1 {
			color: inherit;
		}
		.landscape_3_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 20/7) { 	/* = 2.857 */
		.landscape_3_1 {
			color: inherit;
		}
		.landscape_20_7 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 8/3) { 	/* = 2.666 */
		.landscape_20_7 {
			color: inherit;
		}
		.landscape_8_3 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 5/2) { 	/* = 2.5 */
		.landscape_8_3 {
			color: inherit;
		}
		.landscape_5_2 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 20/9) { 	/* = 2.222 */
		.landscape_5_2 {
			color: inherit;
		}
		.landscape_20_9 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 2/1) { 	/* = 2.0 */
		.landscape_20_9 {
			color: inherit;
		}
		.landscape_2_1 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 19/10) { 	/* = 1.9 */
		.landscape_2_1 {
			color: inherit;
		}
		.landscape_19_10 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 16/9) { 	/* = 1.777 */
		.landscape_19_10 {
			color: inherit;
		}
		.landscape_16_9 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 5/3) { 	/* = 1.666 */
		.landscape_16_9 {
			color: inherit;
		}
		.landscape_5_3 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 3/2) { 	/* = 1.5 */
		.landscape_5_3 {
			color: inherit;
		}
		.landscape_3_2 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 4/3) { 	/* = 1.333 */
		.landscape_3_2 {
			color: inherit;
		}
		.landscape_4_3 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 5/4) { 	/* = 1.25 */
		.landscape_4_3 {
			color: inherit;
		}
		.landscape_5_4 {
			color: #dd7b3b;
		}
	}

	@media (orientation: landscape) and (max-aspect-ratio: 8/7) { 	/* = 1.143 */
		.landscape_5_4 {
			color: inherit;
		}
		.landscape_8_7 {
			color: #dd7b3b;
		}
	}



/**************** Portrait *****************/

	/* Du plus au moins large */

	@media (orientation: portrait) and (min-aspect-ratio: 7/8) { 	/* = 0.875 */
		.portrait_above_7_8 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 7/8) { 	/* = 0.875 */
		.portrait_above_7_8 {
			color: inherit;
		}
		.portrait_7_8 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 4/5) { 	/* = 0.8 */
		.portrait_7_8 {
			color: inherit;
		}
		.portrait_4_5 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 3/4) { 	/* = 0.75 */
		.portrait_4_5 {
			color: inherit;
		}
		.portrait_3_4 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 2/3) { 	/* = 0.666 */
		.portrait_3_4 {
			color: inherit;
		}
		.portrait_2_3 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 3/5) { 	/* = 0.6 */
		.portrait_2_3 {
			color: inherit;
		}
		.portrait_3_5 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 9/16) { 	/* = 0.5625 */
		.portrait_3_5 {
			color: inherit;
		}
		.portrait_9_16 {
			color: #dd7b3b;
		}
	}


	@media (orientation: portrait) and (max-aspect-ratio: 1/2) { 	/* = 0.5 */
		.portrait_9_16 {
			color: inherit;
		}
		.portrait_1_2 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 23/50) { 	/* = 0.46 */
		.portrait_1_2 {
			color: inherit;
		}
		.portrait_23_50 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 2/5) { 	/* = 0.4 */
		.portrait_23_50 {
			color: inherit;
		}
		.portrait_2_5 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 7/20) { 	/* = 0.35 */
		.portrait_2_5 {
			color: inherit;
		}
		.portrait_7_20 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 3/10) { 	/* = 0.3 */
		.portrait_7_20 {
			color: inherit;
		}
		.portrait_3_10 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 1/5) { 	/* = 0.2 */
		.portrait_3_10 {
			color: inherit;
		}
		.portrait_1_5 {
			color: #dd7b3b;
		}
	}

	@media (orientation: portrait) and (max-aspect-ratio: 1/10) { 	/* = 0.1 */
		.portrait_1_5 {
			color: inherit;
		}
		.portrait_1_10 {
			color: #dd7b3b;
		}
	}



/*@media screen and (max-width: 900px) {
	.content_wrapper, pre .group {
		padding: 20px;
	}
}*/

@media (orientation: landscape) and (min-aspect-ratio: 5/1) { 	/* = 9.0 */
	header {
		display: none;
	}
	.content_wrapper {
	    padding: 0;
	    height: 100%;
	}
}

@media screen and (max-width: 610px) {
	.wondz_logo {
		width: 130px;
	}

	.current_ratio {
		right: 20px;
	}

	.content_wrapper, pre .group {
		padding: 10px;
	}

	pre .group {
		margin: 10px 0;
	}

	pre {
		font-size: 12px;
	}
}

@media screen and (max-width: 350px) {
	.wondz_logo {
		display: none;
	}


	.current_ratio {
		font-size: 12px;
		left: 0;
		right: 0;
		text-align: center;
	}
}

@media (orientation: portrait) and (max-aspect-ratio: 1/5) {
	header {
		display: none;
	}

	.content_wrapper {
	    padding: 0;
	    height: 100%;
	}

	.content_wrapper, pre .group {
		padding: 1px;
	}
}