#universe {
z-index: 1;
position: relative;
width: 100%;
height: 100%;
background-position: center 40%;
background-repeat: no-repeat;
background-size: cover; }
#galaxy {
position: relative;
width: 100%;
height: 100%;}
#solar-system {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d; }
.orbit {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform-style: preserve-3d;
animation-name: orbit;
animation-iteration-count: infinite;
animation-timing-function: linear; }
.orbit .orbit {
animation-name: suborbit; }
.pos {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
margin-top: -1em;
margin-left: -1em;
transform-style: preserve-3d;
animation-name: invert;
animation-iteration-count: infinite;
animation-timing-function: linear; }
#sun, .planet, #earth .moon {
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
transform-style: preserve-3d; }
.planet {
background-repeat: no-repeat;
background-size: cover;
animation-iteration-count: infinite;
animation-timing-function: linear; }
#mars .planet {
font-size: 10em;
}
#international-spaceship .planet{
font-size: 15em;}
#mars .pos,
#mars .planet,
#mars.orbit {
animation-duration: 22.57017s; }
/* --------------------------------------------------------------------------- planets index */
#earth {
z-index: 8; }
#moon {
z-index: 7; }
/* --------------------------------------------------------------------------- animations */
@keyframes orbit {
0% {
transform: rotateZ(0deg); }
100% {
transform: rotateZ(-360deg); }
}
@keyframes suborbit {
0% {
transform: rotateX(90deg) rotateZ(0deg); }
100% {
transform: rotateX(90deg) rotateZ(-360deg); } }
@keyframes invert {
0% {
transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }
100% {
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }
/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large #sun {
transform-style: preserve-3d; }
.view-3D.zoom-large .orbit {
transform-style: preserve-3d; }
.view-3D #solar-system {
transform: rotateX(75deg); }
.view-3D #sun {
transform: rotateX(-90deg); }
.view-3D .ring {
transform: rotateX(90deg); }
.view-3D .planet,
.view-3D .moon {
transform: rotateX(0deg); }
.scale-stretched #mars.orbit {
width: 52em;
height: 52em;
margin-top: -26em;
margin-left: -26em; }
.scale-stretched #international-spaceship.orbit {
width: 72em;
height: 72em;
margin-top: -46em;
margin-left: -46em; }
#earth .pos,
#earth .planet,
#earth.orbit {
animation-duration: 12.00021s; }
#earth .orbit .pos,
#earth .orbit {
animation-duration: 0.89764s; }
/* planets sizes */
.scale-stretched #sun {
font-size: 65em; }
.scale-stretched #earth .planet {
font-size: 15em; }
.moon {
font-size: 2em;
}
/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #earth.orbit {
width: 80em;
height: 50em;
margin-top: -20em;
margin-left: -40em; }
.scale-stretched #earth .orbit {
width: 20em;
height: 5em;
margin-top: -5em;
margin-left: -10em; }
#mars.orbit {
animation-duration: 22.57017s; }
#international-spaceship .pos,
#international-spaceship .planet,
#international-spaceship.orbit {
animation-duration: 20.57017s; }
/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- earth ; pos: Right */
#earth .pos {
left: 100%;
top: 50%; }
/* --------------------------------------------------------------------------- moon */
#earth .orbit .pos {
left: 100%;
top: 50%; }
/* --------------------------------------------------------------------------- images */
#international-spaceship .planet {
background-image: url('data:image/svg+xml,')};
}
/*
#mars .planet{
background-image: url('data:image/svg+xml,');}
*/
/* --------------------------------------------------------------------------- responsive styles */
@media screen and (max-width: 299px) {
#universe {
font-size: 20%;
margin: 20em 0em;} }
@media screen and (min-width: 300px) {
#universe {
font-size: 24%;
margin: 20em 0em;}
.intro-text.heading{
margin-top:3em;}
p.main-subheader {
text-align: left;}
}
@media screen and (min-width: 500px) {
#universe {
font-size: 36%; } }
@media screen and (min-width: 600px) {
#universe {
font-size: 44%; } }
@media screen and (min-width: 760px) {
#universe {
font-size: 58%; } }
@media screen and (min-width: 1000px) {
#universe {
width:50%;
font-size: 73%;
}
}