body {
        font-family: 'Lucida Grande', Verdana, Arial;
        font-size: 12px;
        margin: 0;
        padding: 0;
        background: #172A6E;
        	background: rgba(89,89,89,1);
			background: radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(19,19,19,1) 100%);
			background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(89,89,89,1)), color-stop(100%, rgba(19,19,19,1)));
			background: -webkit-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(19,19,19,1) 100%);
			background: -o-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(19,19,19,1) 100%);
			background: -ms-radial-gradient(center, ellipse cover, rgba(89,89,89,1) 0%, rgba(19,19,19,1) 100%);
			background: radial-gradient(ellipse at center, rgba(89,89,89,1) 0%, rgba(19,19,19,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595959', endColorstr='#131313', GradientType=1 );
      	}
      
    #stage {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        /*
        
        Setting the perspective of the contents of the stage
        but not the stage itself
        
        */        
        -webkit-perspective: 500px;
        -moz-perspective: 500px;
        -o-perspective: 500px;
        -ms-perspective: 500px;
        perspective: 500px;
    }
    
    #moon{
		background: url("moon.png") top left no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 10%;
		left:60%;
		width: 150px;
		height: 150px;
    }
    
	#foreground{
		background: url("trees.png") top left no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
	}

	#rotate {
        margin: 0 auto;
        width: 600px;
        height: 500px;
        /* Ensure that we're in 3D space */
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        
		-webkit-transform: rotateX(51deg) translateZ(-50px) translateY(-1950px);
		-moz-transform: rotateX(50deg) translateZ(-50px) translateY(-1950px);
		-o-transform: rotateX(50deg) translateZ(-50px) translateY(-1950px);
		-ms-transform: rotateX(50deg) translateZ(-50px) translateY(-1950px);
		transform: rotateX(50deg) translateZ(-50px) translateY(-1950px);
		 

      }
      
      .ring {
        margin: 0 auto;
        height: 300px;
        width: 600px;
        
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
        
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        -o-animation-timing-function: linear;
        -ms-animation-timing-function: linear;
        animation-timing-function: linear;
        
      }

      .crow {
        position: absolute;
        left: 250px;
        width: 200px;
        height: 100px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        transform-style: preserve-3d;
      }
      
    .crow p {
        width: 100px;
        height: 100px;
        background:url("bird.png");
        background-size: 100% 100%;
      }
      
    #ring-1 {
/*       	opacity: 0.15; */
      	
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;
        
        -webkit-animation-duration: 70s;
        -moz-animation-duration: 70s;
        -o-animation-duration: 70s;
        -ms-animation-duration: 70s;
        -webkit-animation-duration: 70s;
        -moz-animation-duration: 70s;
        -o-animation-duration: 70s;
        -ms-animation-duration: 70s;
        animation-duration: 70s;
      }

      #ring-2 {
/*       	opacity: 0.2; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 65s;
        -moz-animation-duration: 65s;
        -o-animation-duration: 65s;
        -ms-animation-duration: 65s;
        animation-duration: 65s;
      }

      #ring-3 {
/*       	opacity: 0.25; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 60s;
        -moz-animation-duration: 60s;
        -o-animation-duration: 60s;
        -ms-animation-duration: 60s;
        animation-duration: 60s;
      }

      #ring-4 {
/*       	opacity: 0.3; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 65s;
        -moz-animation-duration: 65s;
        -o-animation-duration: 65s;
        -ms-animation-duration: 65s;
        animation-duration: 65s;
      }

      #ring-5 {
/*       	opacity: 0.35; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 50s;
        -moz-animation-duration: 50s;
        -o-animation-duration: 50s;
        -ms-animation-duration: 50s;
        animation-duration: 50s;
      }

      #ring-6 {
/*       	opacity: 0.4; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 45s;
        -moz-animation-duration: 45s;
        -o-animation-duration: 45s;
        -ms-animation-duration: 45s;
        animation-duration: 45s;
      }

      #ring-7 {
/*       	opacity: 0.45; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 30s;
        -moz-animation-duration: 30s;
        -o-animation-duration: 30s;
        -ms-animation-duration: 30s;
        animation-duration: 30s;
      }

      #ring-8 {
/*       	opacity: 0.5; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 25s;
        -moz-animation-duration: 25s;
        -o-animation-duration: 25s;
        -ms-animation-duration: 25s;
        animation-duration: 25s;
      }

      #ring-9 {
/*       	opacity: 0.6; */
        -webkit-animation-name: y-spin;
        -moz-animation-name: y-spin;
        -o-animation-name: y-spin;
        -ms-animation-name: y-spin;
        animation-name: y-spin;

        -webkit-animation-duration: 10s;
        -moz-animation-duration: 10s;
        -o-animation-duration: 10s;
        -ms-animation-duration: 10s;
        animation-duration: 10s;
      }
      


      @-webkit-keyframes y-spin {
        0%    { -webkit-transform: rotateY(0deg); }
        50%   { -webkit-transform: rotateY(180deg); }
        100%  { -webkit-transform: rotateY(360deg); }
      }
      @-moz-keyframes y-spin {
        0%    { -moz-transform: rotateY(0deg); }
        50%   { -moz-transform: rotateY(180deg); }
        100%  { -moz-transform: rotateY(360deg); }
      }
      @-o-keyframes y-spin {
        0%    { -o-transform: rotateY(0deg); }
        50%   { -o-transform: rotateY(180deg); }
        100%  { -o-transform: rotateY(360deg); }
      }
      @-ms-keyframes y-spin {
        0%    { -ms-transform: rotateY(0deg); }
        50%   { -ms-transform: rotateY(180deg); }
        100%  { -ms-transform: rotateY(360deg); }
      }
      @keyframes y-spin {
        0%    { transform: rotateY(0deg); }
        50%   { transform: rotateY(180deg); }
        100%  { transform: rotateY(360deg); }
      }