/**
 * Flipper
 */
html  {
	min-height: 100%;
}
body {
	margin: 0;
	overflow: hidden;
	padding: 0;
}
.panel {
	position: absolute;
	height: 100%;
	width: 50%;
}
#viewport {
	perspective: 1000;
}
#flipper {
	height: 100%;
	transform-origin:50% 00%;
	transition: transform .5s ease 0;
	width: 100%;
}
#code:target #flipper {
	transform: rotateY(180deg);
}
#flipper .side {
	height: 100%;
	font-size: 100px;
	position: absolute;
	width: 100%;
}
#info-side {
	background: red;
	z-index: 800;
}
#code-side {
	background: blue;
	z-index: 700;
	transform: rotateY(180deg);
	transition: z-index .25s linear 0;
}
#code:target #code-side
{
	z-index: 900;
}
#result {
	right: 0;
}