@font-face {
    font-family: 'arcade';
    src: url('../fonts/arcade_classic_pizz/ARCADECLASSIC.TTF');
    font-weight: normal;
    font-style: normal;
    }

body {
    background-color: #06031c;
    background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    background-attachment: fixed;
    color: white;
}

#navigation {
    position: fixed;
    height: 90%;
    padding: 20px;
    list-style-type: none;
    z-index: 1;
}

#navigation li a {
    font-family: 'arcade';
    text-decoration: none;
    color: bisque;
    text-shadow: 2px 2px 14px black;   
}

.distance {
    position: fixed;
    right: 20px;
    padding-right: 20px;
    text-align: right;
    color: bisque;
    text-shadow: 2px 2px 14px black;
    z-index: 1;
}

#km {
    bottom: 20px;
}

#au {
    bottom: 0;
}

h1 {
    color: rgba(0,0,0,0);
    margin-left: 50%;
    font-family: 'georgia';
}

p {
    margin-left: 50%;
    font-family: 'georgia', 'serif';
    color: lightgray;
}

.planet {
    margin: auto;
    border-radius: 50%;
    display: block;
}

#the_sun {
    height: 1000px;
    width: 1000px;
    background-color: beige;
    box-shadow: 4px 4px 10px beige, -4px -4px 10px beige;
    -webkit-transform: translate(0px, -500px);
}

#mercury {
    margin-top: 41653px;
    height: 4px;
    width: 4px;
    background: linear-gradient(#dbdbd9, #dbdbd9, #dbdbd9, #383838 65%);
    box-shadow: 0px -1px 10px #dbdbd9;
}

#venus {
    margin-top: 36186px;
    height: 9px;
    width: 9px;
    background: linear-gradient(#e9edc4, #e9edc4, #e9edc4, #525445 65%);
    box-shadow: 0px -1px 10px #e9edc4;
}

#earth {
    margin-top: 29783px;
    height: 10px;
    width: 10px;
    background: linear-gradient(#4980a0, #4980a0, #4980a0, #1f3744 65%);
    box-shadow: 0px -1px 10px #4980a0;
}

#earth_ice {
    height: 3px;
    width: 3px;
    background: linear-gradient(white, white, white, gray 65%);
    -webkit-transform: translate(3px, 3px);
}

#mars {
    margin-top: 56329px;
    height: 6px;
    width: 6px;
    background: linear-gradient(#ad4820, #ad4820, #ad4820, #471d0c 65%);
    box-shadow: 0px -1px 10px #ad4820;
}

#mars_ice {
    height: 1px;
    width: 1px;
    background: linear-gradient(white, white, white, gray 65%);
    -webkit-transform: translate(2px, 2px);
}

#jupiter {
    margin-top: 395958px;
    height: 112px;
    width: 112px;
    background: linear-gradient(#7c5439, #7c5439, #7c5439, #442e1f 65%);
    box-shadow: 0px -2px 10px #7c5439;
}

#jupiter_pole {
    height: 76px;
    width: 76px;
    background: linear-gradient(#968972, #968972, #968972, #726958 65%);
    border-radius: 50%;
    -webkit-transform: translate(18px, 18px);
}

#saturn {
    margin-top: 466675px;
    height: 94px;
    width: 94px;
    background: linear-gradient(#efeabf, #efeabf, #efeabf, #87846D 65%);
    box-shadow: 0px -2px 10px #efeabf;
}

#saturn_rings {
    height: 124px;
    width: 124px;
    background-color: rgba(0, 0, 0, 0);
    border: 60px solid #ccbe99;
    border-radius: 50%;
    -webkit-transform: translate(-75px, -75px);
}

#ring_gap {
    height: 204px;
    width: 204px;
    background-color: rgba(0, 0, 0, 0);
    border: 4px solid black;
    border-radius: 50%;
    -webkit-transform: translate(-45px, -45px);
}

#saturn_pole {
    height: 50px;
    width: 50px;
    background: linear-gradient(#c4c3a2, #c4c3a2, #c4c3a2, #60604f 65%);
    border-radius: 50%;
    -webkit-transform: translate(78px, 78px);
}

#shadow {
    height: 300px;
    width: 94px;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.5) 65%);
    border-radius: 50%;
    -webkit-transform: translate(-22px, -100px);
}

#uranus {
    margin-top: 1038813px;
    height: 40px;
    width: 40px;
    background: linear-gradient(#62bcb8, #62bcb8, #62bcb8, #1b3534 65%);
    box-shadow: 0px -2px 10px #62bcb8;
}

#uranus_rings {
    height: 10px;
    width: 110px;
    border: 1px solid rgba(98, 188, 184, 0.3);
    border-radius: 50%;
    -webkit-transform: translate(-36px, 16px);
}

#neptune {
    margin-top: 1169817px;
    height: 39px;
    width: 39px;
    background: linear-gradient(#8ac7db, #8ac7db, #8ac7db, #26393f 65%);
    box-shadow: 0px -2px 10px 8ac7db;
}

#pluto {
    margin-top: 1018598px;
    margin-bottom: 1000px;
    height: 2px;
    width: 2px;
    background: linear-gradient(#dbdbd9, #dbdbd9, #dbdbd9, #383838 65%);
    box-shadow: 0px -1px 10px #dbdbd9;
}