*{
	box-sizing: border-box;
	margin: 0;
	padding: 0
}
body {
	color: #eee;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height: 16px;
	overflow: hidden;
}
#viewport {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	bottom: 10px;
	overflow: hidden;
	border-radius: 25px;
	background-image: linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -o-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -moz-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -webkit-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);
	background-image: -ms-linear-gradient(bottom, rgb(69,132,180) 28%, rgb(31,71,120) 64%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.28, rgb(69,132,180)),
		color-stop(0.64, rgb(31,71,120))
	);
}

#world {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -256px;
	margin-top: -256px;
	height: 512px;
	width: 512px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
}

#world div {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
}

.cloudBase {
	position: absolute;
	left: 256px;
	top: 256px;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	margin-top: -10px;
}

.cloudLayer {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 256px;
	height: 256px;
	margin-left: -128px;
	margin-top: -128px;
	-webkit-transition: opacity .5s ease-out;
	-moz-transition: opacity .5s ease-out;
	-o-transition: opacity .5s ease-out;
}