html {
    font-family: sans-serif;
    min-height:100%;
    overflow-x:hidden;
    #overflow-y:scroll;
    position:relative;
    width:100%;
}

header {
    height:110px;
    background: rgba(0, 0, 0, 0.75);
}
header .wrap {
    height:100%;
}
header .logo {
    margin-top:1px;
}
header nav {
    float:right;
    margin-top:17px;
}
header nav ul {
    margin:1em 0;
    padding:0;
}
header nav ul li {
    display:block;
    float:left;
    margin-right:20px;
}
header nav ul li a {
    border-radius:24px;
    color:#aaa;
    font-size:1.4em;
    font-weight:400;
    padding:10px 27px;
    text-decoration:none;
}
header nav ul li a.active {
    background-color:#820082;
    color:#fff;
    text-decoration:none;
}
header nav ul li a.active:hover {
    background-color:#820082;
    color:#fff;
    text-decoration:none;
}
header nav ul li a:hover,header nav ul li a.activeSmall {
    color:#FF1F59;
    text-decoration:none;
}

header a, #home-link:hover{
    text-decoration:none;
    color: #fff;
}

h1, header a {
    font-size:3.5em;
    font-weight:100;
}

#title_text{
    #font-family: "Arial Black";
    margin-left: 250px;
}

/*
Movement code written by
pangloss (http://stackoverflow.com/users/483779/pangloss) on
StackOverFlow(http://stackoverflow.com/questions/35990445/how-to-move-a-div-up-and-down-infinitely-in-css3)
 */
@-webkit-keyframes MoveUpDown {
    0% {
        bottom: -75px;
    }
    50% {
        bottom: 75px;
    }
    100% {
        bottom: -75px;
    }
}

@-webkit-keyframes MoveUpDownRing {
    0% {
        bottom: 300px;
    }
    50% {
        bottom: 450px;
    }
    100% {
        bottom: 300px;
    }
}

.planets{
    #margin-left: 500px;
    #overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;

}

.planet{
    cursor: pointer;
    #display:inline-block;
    position: relative;

}
/*
Circle code written by:
ryanoshea (http://stackoverflow.com/users/859085/ryanoshea)
on StackOverflow (http://stackoverflow.com/questions/6921792/how-to-draw-circle-in-html-page)
 */
#sun {
    width: 600px;
    height: 600px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    border-radius: 500px;
    background: #ffca25;
    overflow: hidden;

    background: url("http://pngimg.com/upload/sun_PNG13424.png") center no-repeat;
    background-size: cover;

    left:-300px;
}

#mercury {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff7b1;
    cursor: pointer;
    left: -250px;

    background: url("https://lh3.googleusercontent.com/yVHpk6mAV0RjS_F7H53K3AwNNv9LGBgw9qH8I67c1GeVQUiB1MDHG7N2XzR9NuOPsxw=w300") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 0.5s;

}

#mercury:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#venus {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: #ffd566;
    cursor: pointer;
    left: -200px;

    background: url("http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/AW_Venus_nli6oy.jpg") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 1s;
}

#venus:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#earth {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: #6cd758;
    cursor: pointer;
    left: -150px;

    background: url("https://openclipart.org/image/2400px/svg_to_png/218125/3d-Earth-Globe.png") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 2s;
}

#earth:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#mars {
    width: 25px;
    height: 25px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #c00000;
    cursor: pointer;
    left: -100px;

    background: url("https://cdn.brainpop.com/science/space/mars/icon.png") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;

}

#mars:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.hide{
    display: none;
}

#jupitar {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: #fff1df;
    cursor: pointer;
    left: -50px;

    background: url("http://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1440/DK_192970_jupiter_aw_wbzzsf.jpg") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 0.5s;
}

#jupitar:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#saturn {
    width: 150px;
    height: 150px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #e0c279;
    cursor: pointer;
    left: 50px;

    background: url("http://space-facts.com/wp-content/uploads/saturn.png") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 1s;
}

#saturn:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#uranus {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #79e8e1;
    cursor: pointer;
    left: 150px;

    background: url("http://space-kids.org/wp-content/uploads/2016/02/uranus.png") center no-repeat;
    background-size: cover;


    animation: MoveUpDown 3s linear infinite;
}

#uranus:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#neptune {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #6a9fff;
    cursor: pointer;
    left: 200px;

    background: url("http://space-facts.com/wp-content/uploads/neptune.png") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 2s;
}

#neptune:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#pluto {
    width: 10px;
    height: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #eef2ff;
    cursor: pointer;
    left: 250px;

    background: url("https://static01.nyt.com/newsgraphics/2016/07/14/pluto-one-year/assets/icon-pluto.png") center no-repeat;
    background-size: cover;

    animation: MoveUpDown 3s linear infinite;
    animation-delay: 3s;
}

#pluto:hover{
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

#textBox-row{
    display: flex;
    justify-content: center;
    height: 220px;
}

#textBox{
    height:100%;
    width: 70%;
    color: #000010;
    background-color: rgba(256,256,256,0.7);
    border-radius: 5px;
    padding: 20px;
    display:none;
}

#textBox a{
    color:#FF1F59;
    text-decoration: none;
}

#background_planets{
    background-image: url(../images/stars.jpg);
}

#ring{
    position: absolute;
    width: 100px;
    height: 200px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: transparent;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    cursor: pointer;

    border: 15px solid #dd8b15;
    z-index: 1;

    animation: MoveUpDownRing 3s linear infinite;
    #bottom: 950px;
    animation-delay: 1s;
}

#ring_uranus{
    position: absolute;
    width: 80px;
    height: 150px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: transparent;
    cursor: pointer;

    border: 8px solid #f2fefc;
    z-index: 1;

    animation: MoveUpDownRing 3s linear infinite;
    #bottom: 1150px;
}