body {
    background-image: url("stary.jpg");
}

a:link {
    color:#a8ddb0;
}
a:visited {
    color: rgb(185, 185, 185);
}
a:hover {
    color: rgb(167, 166, 255)
}
a:active {
    color: rgb(38, 0, 255)
}
.card-head{width:180px;position: relative;
    left:80px
}
#randomNum{color:rgb(64, 247, 47);}

#graphicDiv {
    background-image: url("stary.jpg");
    margin-bottom: 20px;
}

#poll-table{
    width:30px;
    position: relative;
left:80px}


#onLoad {
    top: 200px;
}

#randomNum{
    text-align: center;
    border:1px;
    border-style: inset
}

#modal-command{
    color:rgb(64, 247, 47)
}

.card-head{
    border:2px;
    border-style: solid;
    border-color: lightslategray;
    background-color:rgb(71, 71, 240)
}

.bar{
    background-color:lime; border:2px;
    border-style:solid; border-color:lime;
    height:4px
}

.percent-holder{
    background-color:rgb(77, 128, 128); 
    border-bottom:2px;
    border-style: inset; 
    padding:1px; 
    margin-left:0px
}

.planet-label{
    background-color:rgb(71, 71, 240);
    border:2px;
    border-style: outset;
    border-color: lightslategray;
}

.social-media{
    float:left
}

#pollDiv {
    background: rgba(122, 122, 122, 0.5);
    margin-bottom: 20px;
    margin-right:5px;
}

#planet-info{
    color:lime
}

#resultsDiv {
    background: rgba(122, 122, 122, 0.5);
    margin-bottom: 20px;
    margin-right:5px;
    margin-left:50px;
}
#resultsDiv p{
    font-size: 20px;
}
#resultsDiv span{
    font-size: 15px;
    color:#a8ddb0;
}

#newsDiv {
    background: rgba(122, 122, 122, 0.5);
}
#news1 {
    background: rgba(122, 122, 122, 0.5);
}
#news2 {
    background: rgba(122, 122, 122, 0.5);
}
#news3 {
    background: rgba(122, 122, 122, 0.5);
}
#news4 {
    background: rgba(122, 122, 122, 0.5);
}

h5 {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0);
}
h1 {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0);
    text-align: center;
}
.card-header {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0); 
}
p {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0); ;
}
.custom-control-label {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0);    
}

.modal-content {
    background: rgba(1, 112, 6, 0.5);
    margin-bottom: 20px;
}

.btn-primary {
    font-family: 'Orbitron', sans-serif;
    background-color: rgb(64, 247, 47);
    border: 2px solid rgb(64, 247, 47);
    box-shadow: 0 0 10px rgb(5, 155, 0); 
}
.btn-secondary {
    font-family: 'Orbitron', sans-serif;
    background-color: rgb(247, 47, 47);
    border: 2px solid rgb(247, 47, 47);
    box-shadow: 0 0 10px rgb(167, 2, 2);   
}
.btn-primary:hover {
    background-color: rgb(174, 252, 167);
    color: white;
    box-shadow: 0 0 10px rgb(124, 250, 112);
    border: 2px solid rgb(174, 252, 167);
}
.btn-primary:active {
    background-color: rgb(255, 255, 255);
    color: white;
    box-shadow: 0 0 10px rgb(255, 255, 255);
    border: 2px solid rgb(255, 255, 255);
}
.btn-primary:focus {
    font-family: 'Orbitron', sans-serif;
    background-color: rgb(64, 247, 47);
    border: 2px solid rgb(64, 247, 47);
    box-shadow: 0 0 10px rgb(5, 155, 0); 
}
.btn-secondary:hover {
    background-color: rgb(255, 145, 145);
    color: white;
    box-shadow: 0 0 10px rgb(255, 112, 112);
    border: 2px solid rgb(255, 145, 145);
}

.card-body {
    font-family: 'Orbitron', sans-serif;
    color: rgb(64, 247, 47);
    text-shadow: 0 0 10px rgb(5, 155, 0);
}

.jumbotron{
    background: rgba(122, 122, 122, 0.5);
}
/* Planet animation code goes here */
.wrapper {
    position:relative;
    margin: 0 auto;
    display:block;
    margin-top: 200px;
    perspective: 1000px;
    perspective-origin: 60% 50%;
    right: 320px;
    top: 100px;
}
.wrapper > div{
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    height: 0;
}
#sun {
    width: 250px;
    position: absolute;
    top: -130px;
    left: 150px;
    z-index: 1;
    height: 125px !important;
}
#sun .star {
    width: 250px;
    height: 250px;
    background: url(../images/sun.png) no-repeat;
    background-size: cover;
    border-radius:250px;
    margin: 0 auto;
    animation: sunrotate 40s infinite linear;
}
.planet {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    animation-iteration-count: infinite;
    overflow:hidden;
}
.shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent url(../images/shadow.png) 0% 0% no-repeat;
    background-size: cover;
    border-radius: 100%;
}
#mercury {
    position: absolute;
    width: 400px;
    z-index: 2;
    animation: orbitmercury 12s infinite linear;
    top: -7.5px;
    left: 50px;
}
#mercury .planet {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-image: url(../images/mercury.png);
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    animation: anti-spin 12s infinite linear;
}
#mercury .shadow {
    animation: shadow 12s infinite;
}
#merc-text {
    display:none;
    color: white;
}
#mercury .planet:hover + #merc-text {
    display: block;
}
#venus {
    position: absolute;
    width: 506px;
    z-index: 3;
    animation: orbitvenus 15s infinite linear;
    top: -19px;
    left: 50px;
}
#venus .planet {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    background-image: url(../images/venus.png);
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    animation: anti-spin 15s infinite linear;
}
#venus .shadow {
    animation: shadow 15s infinite;
}
#ven-text {
    display:none;
    color: white;
}
#venus .planet:hover + #ven-text {
    display: block;
}
#earth {
    position: absolute;
    width: 610px;
    z-index: 4;
    animation: orbitearth 20s infinite linear;
    top: -20px;
    left: 50px;
}
#earth .planet {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-image: url(../images/earth.png);
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    animation: anti-spin 20s infinite linear;
}
#earth .shadow {
    animation: shadow 20s infinite;
}
#earth-text {
    display:none;
    color: white;
}
#earth .planet:hover + #earth-text {
    display: block;
}
#mars {
    position: absolute;
    width: 650px;
    z-index: 5;
    animation: orbitmars 30s infinite linear;
    top: -11px;
    left: -60px;
}
#mars .planet {
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-image: url(../images/mars.png);
    background-size: inherit;
    background-position: center;
    background-repeat: no-repeat;
    animation: anti-spin 30s infinite linear;
}
#mars .shadow {
    animation: shadow 30s infinite;
}
#mars-text {
    display:none;
    color: white;
}
#mars .planet:hover + #mars-text {
    display: block;
}
#jupiter {
    position: absolute;
    width: 800px;
    z-index: 6;
    animation: orbitjupiter 50s infinite linear;
    top: -50px;
    left: -80px;
}
#jupiter .planet {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-image: url(../images/jupiter.png);
    background-size: inherit;
    background-position: center;
    animation: anti-spin 50s infinite linear;
}
#jupiter .shadow {
    animation: shadow 50s infinite;
}
#jup-text {
    display:none;
    color: white;
}
#jupiter .planet:hover + #jup-text {
    display: block;
}
#saturn {
    position: absolute;
    width: 900px;
    z-index: 7;
    animation: orbitsaturn 70s infinite linear;
    top: -50px;
    left:-100px;
}
#saturn .planet {
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background-image: url(../images/saturn.png);
    background-size: inherit;
    background-position: center;
    animation: anti-spin 70s infinite linear;
}
#saturn .shadow {
    animation: shadow 70s infinite;
}
#sat-text {
    display:none;
    color: white;
}
#saturn .planet:hover + #sat-text {
    display: block;
}
#uranus {
    position: absolute;
    width: 1000px;
    z-index: 8;
    animation: orbituranus 80s infinite linear;
    top: -15px;
    left: -150px;
}
#uranus .planet {
    width: 50px;
    height: 50px;
    border-radius:50px;
    background-image: url(../images/uranus.png);
    background-size: inherit;
    background-position: center;
    animation: anti-spin 80s infinite linear;
}
#uranus .shadow {
    animation: shadow 80s infinite;
}
#ura-text {
    display:none;
    color: white;
}
#uranus .planet:hover + #ura-text {
    display: block;
}
#neptune {
    position: absolute;
    width: 1050px;
    z-index: 9;
    animation: orbitneptune 85s infinite linear;
    top: -15px;
    left: -200px;
}
#neptune .planet {
    width: 50px;
    height: 50px;
    border-radius:50px;
    background-image: url(../images/neptune.png);
    background-size: inherit;
    background-position: center;
    animation: anti-spin 85s infinite linear;
}
.icon-big{ 
    font-size:25px;
    
}
.icon-big:hover{font-size:50px}
#nep-text {
    display:none;
    color: white;
}
#neptune .planet:hover + #nep-text{
    display: block;
}
#neptune .shadow {
    animation: shadow 85s infinite;
}
#randomNum{color:(64, 247, 47)}

@keyframes sunrotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform:rotate(-360deg);
    }
}
@keyframes shadow {
    0% {
        background-position: 130% 0%;
    }
    33% {
        background-position: 50% 0%;
    }
    55% {
        background-position: 0% 0%;
    }
    80% {
        background-position: -50% 0%;
    }
    100% {
        background-position: -50% 0%;
    }
}
@keyframes orbitmercury {
    0%{
        z-index: 2;
        transform: rotateY(0);
    }
    49%{
        z-index: 2;
    }
    50%{
        z-index: -2;
    }
    99%{
        z-index: -2;
    }
    100%{
        z-index: 2;
        transform: rotateY(360deg);
    }
}
@keyframes orbitvenus {
    0%{
        z-index: 3;
        transform: rotateY(0);
    }
    49%{
        z-index: 3;
    }
    50%{
        z-index: -3;
    }
    99%{
        z-index: -3;
    }
    100%{
        z-index: 3;
        transform: rotateY(360deg);
    }
}
@keyframes orbitearth {
    0%{
        z-index: 4;
        transform: rotateY(0);
    }
    49%{
        z-index: 4;
    }
    50%{
        z-index: -4;
    }
    99%{
        z-index: -4;
    }
    100%{
        z-index: 4;
        transform: rotateY(360deg);
    }
}
@keyframes orbitmars {
    0%{
        z-index: 5;
        transform: rotateY(0);
    }
    49%{
        z-index: 5;
    }
    50%{
        z-index: -5;
    }
    99%{
        z-index: -5;
    }
    100%{
        z-index: 5;
        transform: rotateY(360deg);
    }
}
@keyframes orbitjupiter {
    0%{
        z-index: 6;
        transform: rotateY(0);
    }
    49%{
        z-index: 6;
    }
    50%{
        z-index: -6;
    }
    99%{
        z-index: -6;
    }
    100%{
        z-index: 6;
        transform: rotateY(360deg);
    }
}
@keyframes orbitsaturn {
    0%{
        z-index: 7;
        transform: rotateY(0);
    }
    49%{
        z-index: 7;
    }
    50%{
        z-index: -7;
    }
    99%{
        z-index: -7;
    }
    100%{
        z-index: 7;
        transform: rotateY(360deg);
    }
}
@keyframes orbituranus {
    0%{
        z-index: 8;
        transform: rotateY(0);
    }
    49%{
        z-index: 8;
    }
    50%{
        z-index: -8;
    }
    99%{
        z-index: -8;
    }
    100%{
        z-index: 8;
        transform: rotateY(360deg);
    }
}
@keyframes orbitneptune {
    0%{
        z-index: 9;
        transform: rotateY(0);
    }
    49%{
        z-index: 9;
    }
    50%{
        z-index: -9;
    }
    99%{
        z-index: -9;
    }
    100%{
        z-index: 9;
        transform: rotateY(360deg);
    }
}
@keyframes anti-spin {
    form{
        transform: rotateY(0);
    }
    to{
        transform: rotateY(-360deg);
    }
}
@keyframes anti-spin-rings {
    form{
        transform: rotateY(0) rotateX(73deg);
    }
    to {
        transform: rotateY(-360deg) rotateX(73deg);
    }
}
/*Planet Animation code ends here*/

/*On hover text styling*/
#planetNames {
    position: absolute;
    width: 960px;
    left: 220px;
    top: 500px;
    font-size: 50px;
    text-align: center;
    font-family: 'Orbitron', 'san-serif';
}
/*reults div css*/
.resultImages{
    max-width:250px;
    padding:10px;
    max-height: 250px;
}
.resultVideos{
    max-width:500px;
    max-height: 300px;
    padding:10px;
    padding-left: 50px;
}
.resultsSection{
    position: relative;
}
/*empty div just for planet backgrounds*/
#backgroundDiv {
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
}

/* position new planet button */
#backBtn{
    position: absolute;
    top: 20px;
    right:20px;
}

/* vieo titles */
#videoDiv p{
    padding-left:50px;
    padding-bottom:20px;
    text-shadow: none;
    color:#a8ddb0;
}

/* buttons */
#enter, #backBtn, #videoBtn, #imageBtn, #moreImagesBtn{
    color:#a8ddb0;
}

#enter{
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 10px;
}

#pollDiv label{
    color:#a8ddb0;
}

#newsDiv .card-header{
    padding:20px;
}

#funFactDiv{
    padding:20px;
    color:rgb(64, 247, 47);
}