#viewport{
  bottom: 0;
  left: 0;
  overflow:hidden;
  perspective: 400px;
  position:absolute;
  right:0;
  top:0;
  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{
  height: 512px;
  width:512px;
  top:50%;
  left:50%;
  margin-top: -256px;
  margin-left: -256px;
  position:absolute;
  transform-style: preserve-3d;
}

.clouds{
  position: absolute;
  left: 256px;
  top: 256px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
}

.cloudLayer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 256px;
  height: 256px;
  margin-left: -128px;
  margin-top: -128px;
  -webkit-transition: opacity .5s ease-out;
  background-image: url('/images/clouds.png');
  transform-style: preserve-3d;
}