#universe {
    z-index: 1;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /*    background-image: url(img/bg-universe.png);
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;*/
}

#galaxy {
    position: relative;
    width: 100%;
    height: 100%;
    /*perspective: 4000;*/
}

#solar-system {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #dadada;
    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: 3em;
    height: 3em;
    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;
    border-radius: 50%;
    transform-style: preserve-3d;
}

#sun {
    background-color: #fb7209;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 60px rgba(255, 160, 60, 0.4);
}

.planet {
    background-color: #202020;
    background-repeat: no-repeat;
    background-size: cover;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

#saturn .ring {
    width: 2em;
    height: 2em;
    margin-top: -1em;
    margin-left: -1em;
    border: 0.3em solid rgba(160, 147, 130, 0.7);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#saturn .ring:after {
    border-radius: 50%;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 2.2em;
    height: 2.2em;
    margin-top: -1.1em;
    margin-left: -1.1em;
    border: 0.07em solid rgba(160, 147, 130, 0.5);
    box-sizing: border-box;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------- planets index */
#mercury {
    z-index: 10;
}

#venus,
#venus2 {
    z-index: 9;
}

#earth {
    z-index: 8;
}

#moon {
    z-index: 7;
}

#mars {
    z-index: 6;
}

#jupiter {
    z-index: 5;
}

#saturn {
    z-index: 4;
}

#uranus,
#uranus2 {
    z-index: 3;
}

#neptune,
#neptune2 {
    z-index: 2;
}

/* thêm sau phần planets index */
#pluto {
    z-index: 2;
}

#eris {
    z-index: 2;
}

#haumea {
    z-index: 2;
}

#makemake {
    z-index: 2;
}

#planet-x {
    z-index: 2;
}

#sun {
    z-index: 1;
}

/* --------------------------------------------------------------------------- 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);
    }
}

/* --------------------------------------------------------------------------- opening */
.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
    transition-duration: 4s;
}

#universe.opening #sun {
    box-shadow: 0 0 0 rgba(255, 160, 60, 0);
}

/* --------------------------------------------------------------------------- 2D view */
.view-2D.zoom-large #sun {
    transform-style: flat;
}

.view-2D.zoom-large .orbit {
    transform-style: flat;
}

.view-2D #sun,
.view-2D .ring {
    transform: rotateX(0deg);
}

.view-2D .planet,
.view-2D .moon {
    transform: rotateX(90deg);
}

/* --------------------------------------------------------------------------- 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);
}

/* --------------------------------------------------------------------------- large zoom */
.zoom-large #solar-system {
    width: 100%;
}

.zoom-large.view-2D .scale-stretched #solar-system {
    font-size: 26%;
}

.zoom-large.view-3D .scale-stretched #solar-system {
    font-size: 64%;
}

.zoom-large.view-2D .scale-d #solar-system {
    font-size: 22%;
}

.zoom-large.view-3D .scale-d #solar-system {
    font-size: 48%;
}

.zoom-large.view-2D .scale-s #solar-system {
    font-size: 7%;
}

.zoom-large.view-3D .scale-s #solar-system {
    font-size: 14%;
}

/* --------------------------------------------------------------------------- close zoom */
.zoom-close #solar-system {
    width: 200%;
    font-size: 100%;
}

.zoom-close .scale-stretched #solar-system {
    margin-left: -100%;
}

.zoom-close .scale-d #solar-system {
    margin-left: -106%;
}

.zoom-close.view-2D .scale-d #solar-system {
    font-size: 84%;
}

.zoom-close.view-3D .scale-d #solar-system {
    font-size: 84%;
}

.zoom-close .scale-s #solar-system {
    margin-left: -145%;
}

.zoom-close.view-2D .scale-s #solar-system {
    font-size: 40%;
}

.zoom-close.view-3D .scale-s #solar-system {
    font-size: 40%;
}

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
    animation-play-state: paused !important;
    animation-duration: 0s !important;
    animation: none !important;
}

.zoom-close.view-2D .planet,
.zoom-close.view-2D .moon {
    transform: rotateX(0deg);
}

.zoom-close.view-3D .planet {
    transform: rotateX(-90deg);
}

.zoom-close.view-3D .moon {
    transform: rotateX(90deg);
}

.zoom-close .pos {
    left: 100% !important;
    top: 50% !important;
}

/* --------------------------------------------------------------------------- data */
/* --------------------------------------------------------------------------- speed */
/* sideral years */
#mercury .pos,
#mercury .planet,
#mercury.orbit {
    animation-duration: 2.89016s;
}

#venus .pos,
#venus .planet,
#venus.orbit {
    animation-duration: 6.38237s;
}

#venus2 .pos,
#venus2 .planet,
#venus2.orbit {
    animation-duration: 7.88237s;
}

#earth .pos,
#earth .planet,
#earth.orbit {
    animation-duration: 12.00021s;
}

/*#earth .orbit .pos,
#earth .orbit {
    animation-duration: 0.89764s;
}*/
#mars .pos,
#mars .planet,
#mars.orbit {
    animation-duration: 30s;
}

#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
    animation-duration: 30s;
}

#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
    animation-duration: 30s;
}

#uranus .pos,
#uranus .planet,
#uranus.orbit {
    animation-duration: 30s;
}

#uranus2 .pos,
#uranus2 .planet,
#uranus2.orbit {
    animation-duration: 30s;
}

#neptune .pos,
#neptune .planet,
#neptune.orbit {
    animation-duration: 30s;
}

#neptune2 .pos,
#neptune2 .planet,
#neptune2.orbit {
    animation-duration: 35s;
}

/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
.scale-stretched #sun {
    font-size: 30em;
}

.scale-stretched .planet {
    font-size: 13em;
}



@media (max-width: 549px) {
    .scale-stretched #sun {
        font-size: 40em;
    }

    .scale-stretched .planet {
        font-size: 20em;
    }

}

/* --------------------------------------------------------------------------- scaled sizes */
/*
            (planets radius * 2) * ratio
            */
/*$distanceScaleRatio:   0.000075em;*/
/* --------------------------------------------------------------------------- planets distance scale sizes */
.scale-d #sun {
    font-size: 41.73048em;
}

.scale-d #mercury .planet {
    font-size: 0.14634em;
}

.scale-d #venus .planet {
    font-size: 0.36306em;
}

.scale-d #venus2 .planet {
    font-size: 0.36306em;
}

.scale-d #earth .planet {
    font-size: 0.38226em;
}

.scale-d #earth .moon {
    font-size: 0.08226em;
}

.scale-d #mars .planet {
    font-size: 0.20334em;
}

.scale-d #jupiter .planet {
    font-size: 4.19466em;
}

.scale-d #saturn .planet {
    font-size: 3.49392em;
}

.scale-d #uranus .planet {
    font-size: 1.52172em;
}

.scale-d #uranus2 .planet {
    font-size: 1.52172em;
}

.scale-d #neptune .planet {
    font-size: 1.47732em;
}

/* --------------------------------------------------------------------------- planet size scale sizes */
.scale-s #sun {
    font-size: 417.3048em;
}

.scale-s #mercury .planet {
    font-size: 1.4634em;
}

.scale-s #venus .planet {
    font-size: 3.6306em;
}

.scale-s #venus2 .planet {
    font-size: 3.6306em;
}

.scale-s #earth .planet {
    font-size: 3.8226em;
}

.scale-s #earth .moon {
    font-size: 0.8226em;
}

.scale-s #mars .planet {
    font-size: 2.0334em;
}

.scale-s #jupiter .planet {
    font-size: 41.9466em;
}

.scale-s #saturn .planet {
    font-size: 34.9392em;
}

.scale-s #uranus .planet {
    font-size: 15.2172em;
}

.scale-s #uranus2 .planet {
    font-size: 15.2172em;
}

.scale-s #neptune .planet {
    font-size: 14.7732em;
}

/* --------------------------------------------------------------------------- stretched orbits */
.scale-stretched #mercury.orbit {
    width: 35em;
    height: 35em;
    margin-top: -18em;
    margin-left: -18em;
}

.scale-stretched #venus.orbit {
    width: 50em;
    height: 50em;
    margin-top: -25em;
    margin-left: -25em;
}

.scale-stretched #venus2.orbit {
    width: 70em;
    height: 70em;
    margin-top: -36em;
    margin-left: -36em;
}

.scale-stretched #earth.orbit {
    width: 56em;
    height: 56em;
    margin-top: -28em;
    margin-left: -28em;
}

.scale-stretched #earth .orbit {
    width: 6em;
    height: 6em;
    margin-top: -3em;
    margin-left: -3em;
}

.scale-stretched #mars.orbit {
    width: 90em;
    height: 90em;
    margin-top: -45em;
    margin-left: -45em;
}

.scale-stretched #jupiter.orbit {
    width: 120em;
    height: 120em;
    margin-top: -60em;
    margin-left: -60em;
}

.scale-stretched #saturn.orbit {
    width: 150em;
    height: 150em;
    margin-top: -75em;
    margin-left: -75em;
}

.scale-stretched #uranus.orbit {
    width: 186em;
    height: 186em;
    margin-top: -93em;
    margin-left: -93em;
}

.scale-stretched #uranus2.orbit {
    width: 186em;
    height: 186em;
    margin-top: -93em;
    margin-left: -93em;
}

.scale-stretched #neptune.orbit {
    width: 210em;
    height: 210em;
    margin-top: -105em;
    margin-left: -105em;
}

.scale-stretched #neptune2.orbit {
    width: 220em;
    height: 220em;
    margin-top: -110em;
    margin-left: -110em;
}

/* --------------------------------------------------------------------------- scaled orbits */
/* --------------------------------------------------------------------------- distance scale orbits */
.scale-d #mercury.orbit {
    width: 44.74176em;
    height: 44.74176em;
    margin-top: -22.37088em;
    margin-left: -22.37088em;
}

.scale-d #venus.orbit {
    width: 47.35737em;
    height: 47.35737em;
    margin-top: -23.67869em;
    margin-left: -23.67869em;
}

.scale-d #venus2.orbit {
    width: 47.35737em;
    height: 47.35737em;
    margin-top: -23.67869em;
    margin-left: -23.67869em;
}

.scale-d #earth.orbit {
    width: 49.50959em;
    height: 49.50959em;
    margin-top: -24.75479em;
    margin-left: -24.75479em;
}

.scale-d #mars.orbit {
    width: 53.58356em;
    height: 53.58356em;
    margin-top: -26.79178em;
    margin-left: -26.79178em;
}

.scale-d #jupiter.orbit {
    width: 82.2042em;
    height: 82.2042em;
    margin-top: -41.1021em;
    margin-left: -41.1021em;
}

.scale-d #saturn.orbit {
    width: 115.91713em;
    height: 115.91713em;
    margin-top: -57.95857em;
    margin-left: -57.95857em;
}

.scale-d #uranus.orbit {
    width: 191.00471em;
    height: 191.00471em;
    margin-top: -95.50235em;
    margin-left: -95.50235em;
}

.scale-d #uranus2.orbit {
    width: 191.00471em;
    height: 191.00471em;
    margin-top: -95.50235em;
    margin-left: -95.50235em;
}

.scale-d #neptune.orbit {
    width: 275.64709em;
    height: 275.64709em;
    margin-top: -137.82355em;
    margin-left: -137.82355em;
}

/* Moon */
.scale-d #earth .orbit {
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
}

/* --------------------------------------------------------------------------- size scale orbits */
.scale-s #mercury.orbit {
    width: 441.3048em;
    height: 441.3048em;
    margin-top: -220.6524em;
    margin-left: -220.6524em;
}

.scale-s #venus.orbit {
    width: 457.3048em;
    height: 457.3048em;
    margin-top: -228.6524em;
    margin-left: -228.6524em;
}

.scale-s #venus2.orbit {
    width: 457.3048em;
    height: 457.3048em;
    margin-top: -228.6524em;
    margin-left: -228.6524em;
}

.scale-s #earth.orbit {
    width: 473.3048em;
    height: 473.3048em;
    margin-top: -236.6524em;
    margin-left: -236.6524em;
}

.scale-s #mars.orbit {
    width: 489.3048em;
    height: 489.3048em;
    margin-top: -244.6524em;
    margin-left: -244.6524em;
}

.scale-s #jupiter.orbit {
    width: 561.3048em;
    height: 561.3048em;
    margin-top: -280.6524em;
    margin-left: -280.6524em;
}

.scale-s #saturn.orbit {
    width: 705.3048em;
    height: 705.3048em;
    margin-top: -352.6524em;
    margin-left: -352.6524em;
}

.scale-s #uranus.orbit {
    width: 817.3048em;
    height: 817.3048em;
    margin-top: -408.6524em;
    margin-left: -408.6524em;
}

.scale-s #uranus2.orbit {
    width: 817.3048em;
    height: 817.3048em;
    margin-top: -408.6524em;
    margin-left: -408.6524em;
}

.scale-s #neptune.orbit {
    width: 881.3048em;
    height: 881.3048em;
    margin-top: -440.6524em;
    margin-left: -440.6524em;
}

/* Moon */
.scale-s #earth .orbit {
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
}

/* --------------------------------------------------------------------------- text infos data */
/* --------------------------------------------------------------------------- speed */
.set-speed dl.infos dd span:after {
    content: "Orbit Velocity";
}

.set-speed #sun dl.infos dd:after {
    content: "0 km/h";
}

.set-speed #mercury dl.infos dd:after {
    content: "170,503 km/h";
}

.set-speed #venus dl.infos dd:after {
    content: "126,074 km/h";
}

.set-speed #venus2 dl.infos dd:after {
    content: "126,074 km/h";
}

.set-speed #earth dl.infos dd:after {
    content: "107,218 km/h";
}

.set-speed #mars dl.infos dd:after {
    content: "86,677 km/h";
}

.set-speed #jupiter dl.infos dd:after {
    content: "47,002 km/h";
}

.set-speed #saturn dl.infos dd:after {
    content: "34,701 km/h";
}

.set-speed #uranus dl.infos dd:after {
    content: "24,477 km/h";
}

.set-speed #uranus2 dl.infos dd:after {
    content: "24,477 km/h";
}

.set-speed #neptune dl.infos dd:after {
    content: "19,566 km/h";
}

.set-speed #neptune2 dl.infos dd:after {
    content: "18,566 km/h";
}

/* --------------------------------------------------------------------------- size */
.set-size dl.infos dd span:after {
    content: "Equatorial Circumference";
}

.set-size #sun dl.infos dd:after {
    content: "4,370,005 km";
}

.set-size #mercury dl.infos dd:after {
    content: "15,329 km";
}

.set-size #venus dl.infos dd:after {
    content: "38,024 km";
}

.set-size #venus2 dl.infos dd:after {
    content: "38,024 km";
}

.set-size #earth dl.infos dd:after {
    content: "40,030 km";
}

.set-size #mars dl.infos dd:after {
    content: "21,296 km";
}

.set-size #jupiter dl.infos dd:after {
    content: "439,263 km";
}

.set-size #saturn dl.infos dd:after {
    content: "365,882 km";
}

.set-size #uranus dl.infos dd:after {
    content: "159,354 km";
}

.set-size #uranus2 dl.infos dd:after {
    content: "159,354 km";
}

.set-size #neptune dl.infos dd:after {
    content: "154,704 km";
}

.set-size #neptune2 dl.infos dd:after {
    content: "150,704 km";
}

/* --------------------------------------------------------------------------- distance */
.set-distance dl.infos dd span:after {
    content: "From Sun";
}

.set-distance #sun dl.infos dd span:after {
    content: "From Earth";
}

.set-distance #sun dl.infos dd:after {
    content: "149,598,262 km";
}

.set-distance #mercury dl.infos dd:after {
    content: "57,909,227 km";
}

.set-distance #venus dl.infos dd:after {
    content: "108,209,475 km";
}

.set-distance #venus2 dl.infos dd:after {
    content: "108,209,475 km";
}

.set-distance #earth dl.infos dd:after {
    content: "149,598,262 km";
}

.set-distance #mars dl.infos dd:after {
    content: "227,943,824 km";
}

.set-distance #jupiter dl.infos dd:after {
    content: "778,340,821 km";
}

.set-distance #saturn dl.infos dd:after {
    content: "1,426,666,422 km";
}

.set-distance #uranus dl.infos dd:after {
    content: "2,870,658,186 km";
}

.set-distance #uranus2 dl.infos dd:after {
    content: "2,870,658,186 km";
}

.set-distance #neptune dl.infos dd:after {
    content: "4,498,396,441 km";
}

.set-distance #neptune2 dl.infos dd:after {
    content: "4,498,396,441 km";
}

/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
#mercury .pos {
    left: 50%;
    top: -1%;
}

#mercury .planet {
    animation-name: shadow-mercury;
}

@keyframes shadow-mercury {
    0% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    25% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    50% {
        box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    50.01% {
        box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    75% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    100% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
        /* TOP */
    }
}

.scaled.view-2D #mercury .planet,
.scaled.view-3D #mercury .planet {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- venus ; pos: Left */
#venus .pos {
    left: 0;
    top: 50%;
}

#venus2 .pos {
    left: 0;
    top: 50%;
}

#venus .planet {
    animation-name: shadow-venus;
}

#venus2 .planet {
    animation-name: shadow-venus;
}

@keyframes shadow-venus {
    0% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    25% {
        box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    25.5% {
        box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    50% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    75% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    100% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }
}

.scaled.view-2D #venus .planet,
.scaled.view-3D #venus .planet {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

.scaled.view-2D #venus2 .planet,
.scaled.view-3D #venus2 .planet {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- earth ; pos: Right */
#earth .pos {
    left: 100%;
    top: 50%;
}

#earth .planet {
    animation-name: shadow-earth;
}

@keyframes shadow-earth {
    0% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    25% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    50% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    75% {
        box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    75.01% {
        box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    100% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }
}

.scaled.view-2D #earth .planet,
.scaled.view-3D #earth .planet {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- moon */
#earth .orbit .pos {
    left: 100%;
    top: 50%;
}

/* --------------------------------------------------------------------------- mars ; pos: Bottom */
#mars .pos {
    left: 50%;
    top: 100%;
}

#mars .planet {
    animation-name: shadow-mars;
}

@keyframes shadow-mars {
    0% {
        box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    25% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    50% {
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    75% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    99.99% {
        box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    100% {
        box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }
}

.scaled.view-2D #mars .planet,
.scaled.view-3D #mars .planet {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- jupiter ; pos: Right */
#jupiter .pos {
    left: 100%;
    top: 50%;
}

#jupiter .planet {
    animation-name: shadow-jupiter;
}

@keyframes shadow-jupiter {
    0% {
        box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    25% {
        box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    50% {
        box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    75% {
        box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    75.01% {
        box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    100% {
        box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }
}

.scaled.view-2D #jupiter .planet,
.scaled.view-3D #jupiter .planet {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- saturn ; pos: Left */
#saturn .pos {
    left: 0%;
    top: 50%;
}

#saturn .planet {
    animation-name: shadow-saturn;
}

@keyframes shadow-saturn {
    0% {
        box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    25% {
        box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    25.01% {
        box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    50% {
        box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    75% {
        box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    100% {
        box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }
}

.scaled.view-2D #saturn .planet,
.scaled.view-3D #saturn .planet {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- saturn ring */
/*
            #saturn .ring           { animation-name:     shadow-saturn-ring; }
            @keyframes
            shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
                              25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                              25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                              50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                              75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
                              100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                            }
            .scaled.view-2D #saturn .ring,
            .scaled.view-3D #saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }
            */
/* --------------------------------------------------------------------------- uranus ; pos: Left */
#uranus .pos,
#uranus2 .pos {
    left: 0;
    top: 50%;
}

#uranus .planet,
#uranus2 .planet {
    animation-name: shadow-uranus;
}

@keyframes shadow-uranus {
    0% {
        box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    25% {
        box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    25.01% {
        box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    50% {
        box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    75% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    100% {
        box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }
}

.scaled.view-2D #uranus .planet,
.scaled.view-3D #uranus .planet {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

.scaled.view-2D #uranus2 .planet,
.scaled.view-3D #uranus2 .planet {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- neptune ; pos: Top */
#neptune .pos,
#neptune2 .pos {
    left: 50%;
    top: 0;
}

#neptune .planet,
#neptune2 .planet {
    animation-name: shadow-neptune;
}

@keyframes shadow-neptune {
    0% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
        /* TOP */
    }

    25% {
        box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
        /* LEFT */
    }

    50% {
        box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    50.01% {
        box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
        /* BOTTOM */
    }

    75% {
        box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
        /* RIGHT */
    }

    100% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
        /* TOP */
    }
}

.scaled.view-2D #neptune .planet,
.scaled.view-3D #neptune .planet {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

.scaled.view-2D #neptune2 .planet,
.scaled.view-3D #neptune2 .planet {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */
}

/* --------------------------------------------------------------------------- DEBUG
            .pos,
            .planet,
            .orbit,
            .ring { animation-duration: 20s!important; }
            /* */
/* --------------------------------------------------------------------------- navigation styles */
dl.infos {
    position: absolute;
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin-top: -90%;
    margin-left: 90%;
    padding-left: 100%;
    transform-origin: 100% 100%;
    transform-style: preserve-3d;
    transform: rotateX(90deg);
}

dl.infos:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 30px;
    left: 15px;
    bottom: 0;
    border-top: 1px solid white;
    border-left: 1px solid white;
    transform-style: preserve-3d;
    transform: skew(-45deg, 0deg);
    box-shadow: inset 1px 1px black;
}

dl.infos dt {
    position: absolute;
    left: 50px;
    margin-bottom: 26px;
    bottom: 30px;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 2px black;
}

dl.infos dd:after {
    position: absolute;
    left: 50px;
    bottom: 30px;
    width: 300px;
    color: #fff;
    font-size: 22px;
    text-shadow: 1px 1px 2px black;
}

dl.infos dd span:after {
    position: absolute;
    left: 50px;
    bottom: 14px;
    width: 300px;
    color: #fff;
    font-size: 11px;
    text-shadow: 1px 1px 2px black;
}

/*.sun #sun .infos,
            .mercury #mercury .infos,
            .venus #venus .infos,
            .earth #earth .infos,
            .mars #mars .infos,
            .jupiter #jupiter .infos,
            .saturn #saturn .infos,
            .uranus #uranus .infos,
            .neptune #neptune .infos {
              display: block;
              opacity: 1;
              transform: rotateX(0deg); }*/
.mercury #mercury.orbit,
.venus #venus.orbit,
.venus2 #venus2.orbit,
.earth #earth.orbit,
.mars #mars.orbit,
.jupiter #jupiter.orbit,
.saturn #saturn.orbit,
.uranus #uranus.orbit,
.neptune #neptune.orbit,
.neptune2 #neptune2.orbit {
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.hide-UI h1,
.hide-UI #data,
.hide-UI dl.infos,
.hide-UI #controls {
    opacity: 0 !important;
    margin-top: -30px;
}

.hide-UI #data {
    margin-bottom: -30px;
}

.hide-UI .orbit {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

h1 {
    width: 100%;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

h1 span,
#navbar h1 a {
    display: inline;
    position: relative;
    padding: 0;
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

#navbar,
#controls,
#data {
    background: rgba(0, 0, 0, 0.4);
}

#navbar {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    padding: 16px;
    width: 100%;
    height: 48px;
}

#navbar a,
#data a,
#controls label {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    position: relative;
    text-decoration: none;
}

#navbar a:hover,
#data a:hover,
#controls label:hover {
    color: #fff;
}

#data a.active {
    color: #0cf;
}

#navbar a {
    position: absolute;
    top: 0;
    height: 48px;
    padding: 16px;
    font-size: 14px;
}

#toggle-data {
    left: 0;
}

#toggle-controls {
    right: 0;
}

#data,
#controls {
    z-index: 99;
    position: fixed;
    opacity: 1;
    top: 49px;
    padding: 16px;
}

.data-close #data {
    left: -100%;
}

.data-open #data {
    left: 0px;
}

.controls-close #controls {
    right: -100%;
}

.controls-open #controls {
    right: 0px;
}

#data a {
    margin-bottom: 1px;
    padding: 6px 10px;
    font-size: 18px;
}

#controls label {
    opacity: 0.6;
    height: 24px;
    margin-bottom: 28px;
}

#controls label:hover {
    opacity: 1;
}

#controls label:before {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    text-align: center;
    color: #fff;
    z-index: 99;
}

#controls label span {
    display: block;
    margin-left: 36px;
    padding-top: 4px;
    font-size: 18px;
    color: #fff;
}

#controls input {
    display: block;
    appearance: none;
}

#controls input[type="radio"]:before {
    content: "";
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 16px;
}

#controls input:checked[type="radio"]:after {
    content: "";
    display: block;
    top: 3px;
    margin-left: 3px;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    z-index: 99;
}

#controls input[type="checkbox"]:before {
    content: "";
    display: block;
    position: absolute;
    width: 100px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 16px;
}

#controls input[type="checkbox"]:after {
    content: "";
    display: block;
    top: 3px;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #fff;
    z-index: 99;
}

#controls label.set-view:before {
    font: bold small-caps 11px/20px sans-serif;
}

.view-3D #controls label.set-view:before {
    content: "2D";
    margin-left: 82px;
}

.view-2D #controls label.set-view:before {
    content: "3D";
    margin-left: 7px;
}

.view-3D #controls .set-view input:after {
    margin-left: 3px;
}

.view-2D #controls .set-view input:after {
    margin-left: 81px;
}

#controls label.set-zoom:before {
    font: normal small-caps 18px/14px sans-serif;
}

.zoom-large #controls label.set-zoom:before {
    content: "+";
    margin-left: 82px;
}

.zoom-close #controls label.set-zoom:before {
    content: "-";
    margin-left: 7px;
}

.zoom-large #controls .set-zoom input:after {
    margin-left: 3px;
}

.zoom-close #controls .set-zoom input:after {
    margin-left: 81px;
}

/* --------------------------------------------------------------------------- transitions */
.pos {
    transition-property: top, left;
}

#solar-system,
.orbit,
.planet,
.satelite,
.ring {
    transition-property: width, height, top, left, margin-left, margin-top, webkit-transform;
}

#sun,
.icon {
    transition-property: width, height, webkit-transform;
}

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
}

#solar-system,
#sun,
.planet,
.satelite,
.ring {
    transition-delay: 0s;
}

.pos {
    transition-delay: 1s;
}

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring,
.opening .infos,
.opening h1,
.opening #data,
.opening dl.infos,
.opening #controls {
    transition-duration: 0s;
    transition-delay: 0s;
}

.opening .pos {
    transition-delay: 0s;
}

h1,
#data,
#controls {
    transition-property: opacity, margin;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
}

h1 {
    transition-delay: 0.35s;
}

#data {
    transition-delay: 0.7s;
}

#controls {
    transition-delay: 1s;
}

/* --------------------------------------------------------------------------- images */

.planet {
    background-color: #202020;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* --------------------------------------------------------------------------- responsive styles */
@media screen and (max-width: 299px) {
    #universe {
        font-size: 20%;
    }
}

@media screen and (min-width: 300px) {
    #universe {
        font-size: 14%;
    }
}

@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 {
        font-size: 73%;
    }

    #navbar,
    #controls,
    #data {
        background: transparent;
    }

    #navbar a {
        display: none;
    }

    h1 {
        font-size: 22px;
        margin-top: 8px;
    }

    #controls {
        padding-right: 32px;
        top: 12px;
    }

    #data {
        position: fixed;
        top: inherit;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

    #data a {
        display: inline-block;
        text-align: center;
        font-size: 20px;
        padding: 15px 15px;
    }

    .data-open #data,
    .data-close #data {
        left: 0px;
    }

    .controls-open #controls,
    .controls-close #controls {
        right: 0px;
    }
}

@media screen and (min-width: 1300px) {
    #universe {
        font-size: 43%;
    }
}

@media screen and (min-width: 1600px) {
    .zoom-close .scale-d #solar-system {
        margin-left: -120%;
    }
}







/* thêm sau phần speed */
#pluto .pos,
#pluto .planet,
#pluto.orbit {
    animation-duration: 40s;
}

#eris .pos,
#eris .planet,
#eris.orbit {
    animation-duration: 42s;
}

#haumea .pos,
#haumea .planet,
#haumea.orbit {
    animation-duration: 44s;
}

#makemake .pos,
#makemake .planet,
#makemake.orbit {
    animation-duration: 46s;
}

#planet-x .pos,
#planet-x .planet,
#planet-x.orbit {
    animation-duration: 50s;
}


/* scale-d sizes (nhỏ, hợp lý cho dwarf planets) */
.scale-d #pluto .planet {
    font-size: 0.08em;
}

.scale-d #eris .planet {
    font-size: 0.09em;
}

.scale-d #haumea .planet {
    font-size: 0.085em;
}

.scale-d #makemake .planet {
    font-size: 0.082em;
}

.scale-d #planet-x .planet {
    font-size: 0.12em;
}

/* scale-s sizes */
.scale-s #pluto .planet {
    font-size: 0.8em;
}

.scale-s #eris .planet {
    font-size: 0.9em;
}

.scale-s #haumea .planet {
    font-size: 0.85em;
}

.scale-s #makemake .planet {
    font-size: 0.82em;
}

.scale-s #planet-x .planet {
    font-size: 1.2em;
}


/* thêm sau phần stretched orbits */
.scale-stretched #pluto.orbit {
    width: 240em;
    height: 240em;
    margin-top: -120em;
    margin-left: -120em;
}

.scale-stretched #eris.orbit {
    width: 260em;
    height: 260em;
    margin-top: -130em;
    margin-left: -130em;
}

.scale-stretched #haumea.orbit {
    width: 280em;
    height: 280em;
    margin-top: -140em;
    margin-left: -140em;
}

.scale-stretched #makemake.orbit {
    width: 300em;
    height: 300em;
    margin-top: -150em;
    margin-left: -150em;
}

.scale-stretched #planet-x.orbit {
    width: 300em;
    height: 300em;
    margin-top: -150em;
    margin-left: -150em;
}



/* Pluto ; pos: Right */
#pluto .pos {
    left: 100%;
    top: 50%;
}

#pluto .planet {
    animation-name: shadow-pluto;
}

@keyframes shadow-pluto {
    0% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, .5);
    }

    25% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, .5);
    }

    50% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, .5);
    }

    75% {
        box-shadow: inset 18px -10px 10px rgba(0, 0, 0, .5);
    }

    75.01% {
        box-shadow: inset -18px -10px 10px rgba(0, 0, 0, .5);
    }

    100% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, .5);
    }
}

/* Eris ; pos: Bottom */
#eris .pos {
    left: 50%;
    top: 100%;
}

#eris .planet {
    animation-name: shadow-eris;
}

@keyframes shadow-eris {
    0% {
        box-shadow: inset -14px -8px 10px rgba(0, 0, 0, .5);
    }

    25% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, .5);
    }

    50% {
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
    }

    75% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, .5);
    }

    100% {
        box-shadow: inset -14px -8px 10px rgba(0, 0, 0, .5);
    }
}

/* Haumea ; pos: Left */
#haumea .pos {
    left: 0;
    top: 50%;
}

#haumea .planet {
    animation-name: shadow-haumea;
}

@keyframes shadow-haumea {
    0% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, .5);
    }

    25% {
        box-shadow: inset 18px -10px 10px rgba(0, 0, 0, .5);
    }

    25.01% {
        box-shadow: inset -18px -10px 10px rgba(0, 0, 0, .5);
    }

    50% {
        box-shadow: inset -4px 0 2px rgba(0, 0, 0, .5);
    }

    75% {
        box-shadow: inset 0 0 1px rgba(0, 0, 0, .5);
    }

    100% {
        box-shadow: inset 4px 0 2px rgba(0, 0, 0, .5);
    }
}

/* Makemake ; pos: Top */
#makemake .pos {
    left: 50%;
    top: 0;
}

#makemake .planet {
    animation-name: shadow-makemake;
}

@keyframes shadow-makemake {
    0% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
    }

    25% {
        box-shadow: inset 10px 0 5px rgba(0, 0, 0, .5);
    }

    50% {
        box-shadow: inset 22px -10px 18px rgba(0, 0, 0, .5);
    }

    50.01% {
        box-shadow: inset -22px -10px 18px rgba(0, 0, 0, .5);
    }

    75% {
        box-shadow: inset -10px 0 5px rgba(0, 0, 0, .5);
    }

    100% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
    }
}

/* Planet X ; pos: Right */
#planet-x .pos {
    left: 100%;
    top: 50%;
}

#planet-x .planet {
    animation-name: shadow-planetx;
}

@keyframes shadow-planetx {
    0% {
        box-shadow: inset -10px 0 6px rgba(0, 0, 0, .55);
    }

    25% {
        box-shadow: inset 0 0 2px rgba(0, 0, 0, .55);
    }

    50% {
        box-shadow: inset 10px 0 6px rgba(0, 0, 0, .55);
    }

    75% {
        box-shadow: inset 35px -18px 25px rgba(0, 0, 0, .55);
    }

    75.01% {
        box-shadow: inset -35px -18px 25px rgba(0, 0, 0, .55);
    }

    100% {
        box-shadow: inset -10px 0 6px rgba(0, 0, 0, .55);
    }
}


.pluto #pluto.orbit,
.eris #eris.orbit,
.haumea #haumea.orbit,
.makemake #makemake.orbit,
.planet-x #planet-x.orbit {
    border: 1px solid rgba(255, 255, 255, 0.8);
}


/* Khi nhúng vào template: tạo khung hiển thị */
.galaxy-wrap {
    position: relative;
    height: 400px;
    /* tăng lên */
    overflow: visible;
    /* quan trọng: cho tràn để không bị cắt */
}

/* Override #universe chỉ trong galaxy-wrap */
.galaxy-wrap #universe {
    position: relative;
    /* quan trọng: bỏ absolute để nó ăn theo khung */
    width: 100%;
    height: 100%;
}