body {
    background: url(images/space.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
    text-align: center;
    color: white;
    font-size: 4rem;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#time {
    text-align: center;
    color: white;
    font-size: 2rem;
}

/* Styling for carousel */
.image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 80%;
}

.button {
    text-align: center;
    padding-bottom: 2rem;
}

.planetImage {
    border-radius: 1vw;
}

/* Styling for the table */
td {
    color: yellow;
}

#moonsOfPlanet {
    text-align: center;
    color: yellow;
}

#noMoons {
    text-align: center;
    margin-top: 2vw;
    color: white;
}

#randomImagesBtn {
    background-color: blue;
    border-radius: 1vw;
    margin-bottom: 1vw;
    display: inline-block;
}

#wrapCarousel {
    text-align: center;
}

#leftdata {
    text-align: left;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 1.5rem;
    
}

#rightdata {
    text-align: left;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 1.5rem;
    
}



.data {
    text-align: center;
    color: white;
}

#planetGif {
    box-shadow: 0 0 40px 3px white inset;
    border-radius: 50%;
    
}

img {
    border-radius: 100%;
}

.button {
    padding-top: 1rem;
}

.display {
    display: none;
}

td {
    width: 1%;
    white-space: nowrap;
    border: solid black 0.1vw !important;
    padding: 0.2vw !important;
}

.moonChart {
    background: url(https://planetary.s3.amazonaws.com/assets/images/3-moon/2017/20171030_AS11-44-6665HR_contrast.jpg) no-repeat center center fixed;
    background-size: cover;
}

/* styling for compare second set of data on compare page */
.textFormat {
    text-align: left;
    color: white;
    font-size: 1.5rem;
    
}

@media only screen and (max-width: 767px) {
    .ui.table:not(.unstackable) td:first-child {
        font-weight: normal !important;
    }
    .ui.table:not(.unstackable) tbody, .ui.table:not(.unstackable) tr {
        width: 49% !important;
        display: inline-block !important;
        margin-left: 0.25vw;
    }
    .ui.table:not(.unstackable) tr > td {
        padding: 0vw !important;
    }
    .ui.table:not(.unstackable) tr {
        margin: 0vw !important;
        padding: 0vw !important;
    } 
    .moonChart {
        width: 100%;
        text-align: center;
    }
    #wrapCarousel {
        width: 100%;
        text-align: center;
    }
}