#universe {
  z-index: 0;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 1100px;
  /* left: 2%; */
  /* left: 50%; */
  /* padding-left: 50vw; */
  background-position: center 40%;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (max-width: 768px) {
    /* Tablets: */
    #universe {
        padding-left: 90vw;
        top: -20%;
        /* padding-top: 50vw; */
    }
    .navbar-collapse {
        height: 100vh;
        /* background-color: #fff; */
    }
    .navbar-toggler i {
        content: '\f00d';
    }
}
@media only screen and (min-width: 769px) {
    /* For desktop: */
    #universe {
        padding-left: 30vw;
        top: -20%;
    }
}

#galaxy {
  position: relative;
  width: 100%;
  height: 100%;
    border-radius: 50%;
    z-index: 0;
    /* background: radial-gradient(circle, rgba(234,236,253,0.1) 0%, rgba(234,236,253,0) 42%); */
    /* background: radial-gradient(circle, rgba(33, 33, 50,1) 0%, rgba(55, 55, 83,0) 42%); */

    /*
    animation: spin-planet 120s infinite linear;
    background-image: url('..//car-planets/galaxy2.png');
    background-position: center center;
    background-repeat: no-repeat;
    */
    /* animation: move-twink-back 200s linear infinite; */
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}


#sun, .planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .3em;
  height: .3em;
  margin-top: -0.15em;
  margin-left: -0.15em;
  /* border-radius: 50%; */
}

#sun {
    /* background-color: #FB7209;
    background-size: cover;
    box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); */
    background-repeat: no-repeat;
    background-image: url(..//car-planets/sun.png);
    background-size: cover;
}

.planet {
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
    /*
    transform: rotate(360deg);
    transform-origin: 50% 50%;
     */
    animation: spin-planet 5s infinite linear;

}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  /* border: 1px solid rgba(22, 22, 33, 0.4); */
    /* border: 1px solid rgba(118, 203, 188, 0.15); */
  border: 1px solid rgba(234, 236, 253, 0.05);
  border-radius: 50%;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* Animations */
@keyframes orbit {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}
@keyframes spin-planet {
    0% { transform: rotate(360deg);}
    100% { transform: rotate(0deg); }
}

/* PLANET 1 */
/* Orbit sizes */
#planet1.orbit {
  width: 3em;
  height: 3em;
  margin-top: -1.5em;
  margin-left: -1.5em;
}

/* Planet starting positions */
#planet1 .planet {
  left: 50%;
  top: -1%;
    width: 1em;
    height: 1em;
    margin-top: -.5em;
    margin-left: -.5em;
    background-repeat: no-repeat;
    background-image: url(..//car-planets/mercury.png);
    background-size: cover;
}

/* Planet animation durations */
#planet1.orbit {
  animation-duration: 10s;
}

/* PLANET 2 */
#planet2 {
    font-size: 4em;
}
#planet2.orbit {
    width: 4.4em;
    height: 4.4em;
    margin-top: -2.2em;
    margin-left: -2.2em;
}

#planet2 .planet {
    left: 50%;
    top: -1%;
    width: 1.2em;
    height: 1.2em;
    margin-top: -.6em;
    margin-left: -.6em;
    background-repeat: no-repeat;
    background-image: url(..//car-planets/venus.png);
    background-size: contain;
}

/* Planet animation durations */
#planet2.orbit {
    animation-duration: 12s;
}

/* PLANET 3 */
#planet3 {
    font-size: 4em;
}
#planet3.orbit {
    width: 6.4em;
    height: 6.4em;
    margin-top: -3.2em;
    margin-left: -3.2em;
}

#planet3 .planet {
    left: 50%;
    top: -1%;
    width: 1.2em;
    height: 1.2em;
    margin-top: -.6em;
    margin-left: -.6em;
    background-repeat: no-repeat;
    background-image: url(..//car-planets/earth.png);
    background-size: contain;
}

/* Planet animation durations */
#planet3.orbit {
    animation-duration: 14s;
}

/* PLANET 4 */
#planet4 {
    font-size: 4em;
}
#planet4.orbit {
    width: 9em;
    height: 9em;
    margin-top: -4.5em;
    margin-left: -4.5em;
}

#planet4 .planet {
    left: 50%;
    top: -1%;
    width: 1.4em;
    height: 1.4em;
    margin-top: -.7em;
    margin-left: -.7em;
    background-repeat: no-repeat;
    background-image: url(..//car-planets/mars.png);
    background-size: contain;
}

/* Planet animation durations */
#planet4.orbit {
    animation-duration: 17s;
}

/* PLANET 5 */
#planet5 {
    font-size: 4em;
}
#planet5.orbit {
    width: 12em;
    height: 12em;
    margin-top: -6em;
    margin-left: -6em;
}

#planet5 .planet {
    left: 50%;
    top: -1%;
    width: 1.7em;
    height: 1.7em;
    margin-top: -.85em;
    margin-left: -.85em;
    background-repeat: no-repeat;
    background-image: url(..//car-planets/jupiter-orig.png);
    background-size: contain;
}

/* Planet animation durations */
#planet5.orbit {
    animation-duration: 22s;
}

/* Planet sizes */
#sun {
	font-size: 24em;
}
#planet1 {
	font-size: 4em;
}

/* Planet shadow animations */



/* images */

.planet {
  /* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ+Ih5AAAABGdBTUEAALGPC/xhBQAAADBQTFRFqqWjubWzoZyZjoiFqqWiu7e1nZaToZyarqmnAAAAq6Wi2tXSurSxy8bCxL670czJ3zIDEAAAAAp0Uk5TclBQUOvj+xCAAOCI6hkAAACSSURBVAjXAYcAeP8AmZeEbeWHmZAAmTSq7M2kKZAAk2rN7O7M4ZAAdKzf7f/s/nAAjt2+u7/f/YAAXf/7u/3vzlAA6uv/u97d/aAAasv+/93+3GAAz+//3t3+ymAAWr3f/93+7lAAjOzrv73f3oAAdKzLv/3t5XAAk6rM/87qopAAmTbOzOzGKZAAmZeErsWHmZDnbFcFNI0NnwAAAABJRU5ErkJggg==); */
}


#universe {
  /* background-color: #363652; */
}