@keyframes spin3d {
	0% { transform: rotateX(0deg) rotateY(0deg);  }
	100% { transform: rotateX(359deg) rotateY(359deg);
	}
}
body, html {
    margin: 0;
}

body {
	font-family: 'Ubuntu', sans-serif;
	background: #000;
	background-image: url(../img/galaxy.jpg);
	perspective: 600px;
	padding: 25%;
    height: 100%;
    background-position: center;
    background-size: cover;
	background-repeat:  no-repeat;
	background-attachment: fixed;

/* 	CODE HERE  */

}


/*
#planet {
    width:200px;
    height:200px;
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}
*/

/*
body {
  -webkit-animation-name: rotate;
  -webkit-animation-duration:60s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -moz-animation-name: rotate;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
}

@-webkit-keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

@-moz-keyframes rotate {
  from {-moz-transform:rotate(0deg);}
  to {  -moz-transform:rotate(360deg);}
}
*/

#panel {
	display: inline-block;
	width: 420px;
	height: 288px;
	background-size: 420px 288px!important;
	background-repeat: no-repeat;
	background-position: center center;
	animation: spin3d 5s linear infinite;
	transform-style: preserve3d;
	/* background: url(../img/spacecat.jpg); */
	background: url(../img/spiral.gif);
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 9999;

	opacity: 0.75;
	filter: contrast(200%);
}


.stars:before, .stars:after {
	content: "";
	position: absolute;
	width: inherit;
	height: inherit;
	box-shadow: inherit;
}
.stars:before {
	transform: translateZ(-300px);
	animation: fade1 3s linear infinite;
}
.stars:after {
	transform: translateZ(-600px);
	animation: fade2 3s linear infinite;
}

@keyframes fly {
	from {
		transform: translateZ(0px);
	}
	to {
		transform: translateZ(300px);
	}
}
@keyframes fade1 {
	from {
		opacity: .5;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade2 {
	from {
		opacity: 0;
	}
	to {
		opacity: .5;
	}
}
footer {
	color: #FFF;
	position: fixed;
	bottom:20px;
	width:50%;
	height:2.0em;
	text-align: center;
	font-size: x-small;
}
#title {
	position: fixed;
	font-size: 2.0em;
	color: #FFF;
	position:absolute;
	top:20px;
	width:50%;
	height:2.0em;
	text-align: center;
	font-family: 'Orbitron', sans-serif;
}

body h1 {
	display: none;
	color: #FFF;
	text-align: center;
}

/* Starfield and 3D Panel Integration ---------------------------- */

#space,




.stars:nth-child(1)  { background-position:  50%  50%; animation-delay: 0s; }
.stars:nth-child(2)  { background-position:  20%  60%; animation-delay: 0.5s; }
.stars:nth-child(3)  { background-position: -20% -30%; animation-delay: 1s; }
.stars:nth-child(4)  { background-position:  40% -80%; animation-delay: 1.5s; }
.stars:nth-child(5)  { background-position: -20%  30%; animation-delay: 2s; }
.stars:nth-child(6)  { background-position:  40% -80%; animation-delay: 2.5s; }
.stars:nth-child(7)  { background-position: -20%  30%; animation-delay: 3s; }
.stars:nth-child(8)  { background-position: -20%  30%; animation-delay: 3.5s; }
.stars:nth-child(9)  { background-position:  40% -80%; animation-delay: 4s; }

@keyframes zoom {
  0%   { opacity: 0; transform: scale(0.5); animation-timing-function: ease-in; }
  85%  { opacity: 1; transform: scale(2.8); animation-timing-function: linear; }
  100% { opacity: 0; transform: scale(3.5); }
}

/* Footer style */
footer.small {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #fff;
  z-index: 99;
  font-family: sans-serif;
}


/* Starfield transform origin fix */


/* Center footer text fully */
footer.small {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #fff;
  z-index: 99;
  font-family: sans-serif;
  pointer-events: none;
}


/* Final starfield centering fix */


/* Final-final starfield fix */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-position: center center;
  transform-origin: center center;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, #fff, transparent),
    radial-gradient(2px 2px at 50px 160px, #ddd, transparent),
    radial-gradient(2px 2px at 90px 40px, #fff, transparent),
    radial-gradient(2px 2px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 160px 120px, #ddd, transparent);
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: zoom 2s infinite;
  opacity: 0;
  z-index: 1;
}