html {
    background: url(images/spaceBackground.jpeg) fixed;
    font-family: 'Roboto Mono', monospace;
}

body {
    margin: 0;
}

/* NAVBAR */
.logo{
    width: 7%;
    height: auto;
    overflow: hidden;
    margin-top: -25px;
    margin-left: -300px;
}

.logoText{
    width: 25%;
    height: auto;
    overflow: hidden;
    margin-top: -10px;
}

.navbar {
    overflow: hidden;
    background-color: #333;
}

.navbar a { 
    margin-top: 10px;
    float: left;
    font-size: 18px;
    color: white;
    text-align: center;
    padding: 15px 25px;
    text-decoration: none;
}
  
/* The dropdown container */
.dropdown {
    margin-top: 10px;
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
}
  
/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.dropdown-content .active {
    background-color: #ddd;
}

.dropdown-content a:hover {
    background-color: #ddd;
}
  
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* HOME PAGE */
.intro {
    text-align: center;
    color: white;
    position: absolute;
    margin-left: 920px;
    margin-top: 200px;
}

.intro h3 {
    font-size: 40px;
}

.intro h4 {
    font-size: 30px;
}

/* Planets Positioning */
.sun {
    margin-top: -40px;
    margin-left: 100px;
    width: 50%;
    position: absolute;
}

.mercury {
    margin-left: 1100px;
    margin-top: 550px;
    width: 10%;
    position: absolute;
    transition: all .2s ease-in-out;
}

.mercury:hover {
    transform: scale(1.1);
}

.venus {
    width: 15%;
    margin-left: 700px;
    margin-top: 800px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.venus:hover {
    transform: scale(1.1);
}

.earth {
    width: 16%;
    margin-left: 300px;
    margin-top: 1000px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.earth:hover {
    transform: scale(1.1);
}

.mars {
    width: 13%;
    margin-left: 1000px;
    margin-top: 1200px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.mars:hover {
    transform: scale(1.1);
}

.jupiter {
    width: 30%;
    margin-left: 500px;
    margin-top: 1400px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.jupiter:hover {
    transform: scale(1.1);
}

.saturn {
    width: 55%;
    margin-left: 20px;
    margin-top: 1800px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.saturn:hover {
    transform: scale(1.1);
}

.uranus {
    width: 15%;
    margin-left: 1000px;
    margin-top: 2100px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.uranus:hover {
    transform: scale(1.1);
}

.neptune {
    width: 25%;
    margin-left: 450px;
    margin-top: 2300px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.neptune:hover {
    transform: scale(1.1);
}

.pluto {
    width: 6%;
    margin-left: 900px;
    margin-top: 2600px;
    padding-bottom: 100px;
    position: absolute;
    transition: all .2s ease-in-out;
}

.pluto:hover {
    transform: scale(1.1);
}

/* Facts */
.fact {
    font-size: 20px;
    position: absolute;
    color: white;
}

#fact1 {
    margin-left: 50px;
    margin-top: 800px;
}

#fact2 {
    margin-left: 600px;
    margin-top: 1050px;
}

#fact3 {
    margin-left: 50px;
    margin-top: 1500px;
}

#fact4 {
    margin-left: 750px;
    margin-top: 1900px;
}

#fact5 {
    margin-left: 50px;
    margin-top: 2200px;
}

#fact6 {
    margin-left: 800px;
    margin-top: 2400px;
    margin-right: 50px;
}

/* Footer */
.footer {
    background-color: rgba(51, 51, 51, 0.8);
}

#homeFooter {
    margin-bottom: -2300px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

.footer p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 20px;
    text-align: center;
}

.footer ul {
    padding-left: 545px;
}

.footer li {
    list-style-type: none;
    display: inline;
    color: rgba(255, 255, 255, 0.7);
    font-size: 40px;
    margin-left: 20px;
}

.footer a {
    color: inherit;
}

/* ABOUT PAGE */
.about {
    color: white;
    text-align: center;
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
}

.planetsA {
    position: absolute;
}

.sunA {
    margin-left: 10px;
    width: 30%;
}

.mercuryA {
    width: 10%;
    margin-left: -190px;
    z-index: 1;
}

.venusA {
    width: 15%;
    margin-left: -70px;
    z-index: 2;
}

.earthA {
    width: 15%;
    margin-left: -125px;
    margin-bottom: 100px;
    z-index: 3;
}

.marsA {
    width: 12%;
    margin-left: -150px;
    margin-bottom: 50px;
    z-index: 4;
}

.jupiterA {
    width: 20%;
    margin-left: -80px;
    z-index: 5;
}

.saturnA {
    width: 40%;
    margin-left: -260px;
    margin-bottom: -50px;
    z-index: 6;
}

.uranusA {
    width: 13%;
    margin-left: -230px;
    margin-bottom: 40px;
    z-index: 7;
}

.neptuneA {
    width: 18%;
    margin-left: -100px;
    z-index: 8;
}

.plutoA {
    width: 6%;
    margin-left: -90px;
    margin-bottom: 80px;
    z-index: 9;
}

#aboutFooter {
    margin-bottom: -350px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* CONTACT PAGE */
#contacth1 {
    font-size: 30px;
    color: white;
    text-align: center;
    margin-top: 50px;
}

#contacth2 {
    font-size: 18px;
    color: white;
    text-align: center;
}

form {
    margin-top: 50px;
    transition: all 4s ease-in-out;
    text-align: center;
}

.form-control {
    width: 600px;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid white;
    color: #fff;
    font-size: 18px;
    margin-bottom: 16px;
}

input {
    height: 45px;
}

form .submit {
    background: #ff5722;
    border-color: transparent;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    height: 50px;
    margin-top: 20px;
}

form .submit:hover {
    background-color: #f44336;
    cursor: pointer;
}

#contactFooter {
    margin-bottom: -50px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/*MERCURY*/

.planetTitle {
    color: white;
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
}

hr {
    width: 200px;
}

.planetProfile {
    color: white;
}

.planetProfile table {
    float: right;
    margin-top: -220px;
    margin-right: 50px;
    margin-left: 500px;
    border-left: 2px solid white;
}

.planetProfile td {
    padding: 5px 15px;
    font-size: 13px;
}

.planetProfile th {
    font-size: 16px;
}

.planetIntro {
    color: white;
    text-align: justify;
    padding: 30px;
    margin-left: 50px;
    margin-right: 550px;
}

#mercuryimg {
    float: right;
    margin-right: 50px;
}

.facts {
    color: white;
    margin-left: 50px;
    padding: 30px;
}

.facts h1 {
    font-size: 25px;
}

.facts hr{
    width: 330px;
    margin-left: 1px;
}

.facts p {
    font-size: 13px;
}

.factCard {
    color:white;
    text-align: center;
    background-color:#333;
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
}

.factCardImg1 {
    background-image: url("https://www.newstatesman.com/sites/default/files/styles/cropped_article_image/public/blogs_2016/05/mercury_transit_2006_pearls.gif?itok=bbDPJGgQ");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg1:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg2 {
    background-image: url("https://i.natgeofe.com/n/9d55d2d1-fd45-4403-ba4b-7f01ccbc0193/41032.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg2:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCard:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.number {
    display: inline-block;
    margin-top: -10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    font-size: 30px;
    color: #000;
    text-align: center;
    background: #fff;
}

.line-break {
    width: 100%;
}

.cardsContainer {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 88%;
}

#mercuryFooter {
    margin-bottom: -1650px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* VENUS */

#venusimg {
    float: right;
    margin-right: 50px;
}

.factCardImg3 {
    background-image: url("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2007/07/messenger_bids_farewell_to_venus/9708467-3-eng-GB/MESSENGER_bids_farewell_to_Venus_pillars.gif");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg3:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg4 {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/90/Mariner_2.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg4:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

/* EARTH */
#earthimg {
    float: right;
    margin-right: 30px;
}

.factCardImg5 {
    background-image: url("https://solarsystem.nasa.gov/internal_resources/343");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg5:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg6 {
    background-image: url("https://acs-h.assetsadobe.com/is/image//content/dam/cen/98/36/WEB/09836-scicon8-moon.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg6:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#earthFooter {
    margin-bottom: -1400px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* MARS */
#marsimg {
    float: right;
    margin-right: 30px;
}

.factCardImg7 {
    background-image: url("https://mars.nasa.gov/layout/mars2020/images/PIA23764-RoverNamePlateonMars-web.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg7:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg8 {
    background-image: url("https://i.redd.it/07rr3vsd07b61.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg8:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#marsFooter {
    margin-bottom: -1550px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* JUPITER */
#jupiterimg {
    float: right;
    margin-right: 30px;
}

#jupiterFacts {
    font-size: 22px;
}

.factCardImg9 {
    background-image: url("https://earthsky.org/upl/2019/07/Jupiter-and-four-Galilean-moons-e1594436021400.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg9:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg10 {
    background-image: url("https://cdn.britannica.com/79/196079-050-A8735694/image-Jupiter-Great-Red-Spot-spacecraft-Juno.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg10:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#jupiterFooter {
    margin-bottom: -1450px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* SATURN */
#saturnimg {
    float: right;
}

#saturnProfile {
    margin-right: -50px;
}

.factCardImg11 {
    background-image: url("https://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/saturn_16x9.jpg?itok=M-j_VbAZ");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg11:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg12 {
    background-image: url("https://solarsystem.nasa.gov/internal_resources/2409");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg12:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#saturnFooter {
    margin-bottom: -1400px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* URANUS */
#uranusimg {
    float: right;
    margin-right: 30px;
}

#uranusProfile {
    margin-right: -50px;
    margin-top: 60px;
}

.factCardImg13 {
    background-image: url("https://lh3.googleusercontent.com/proxy/fTeNz0thpCCX-SAXHU35fiBx1SvLguXDcWk5acl0fAkviFbXNRpM-xZF6j3CRTx0qLtKBo2zAY2y2cZ3nnk9HkCUOJ9ROxIBJv0sXmEIjekR8xOxEgUNNasF_VU");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg13:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg14 {
    background-image: url("https://media.firstcoastnews.com/assets/AMAZELABS/images/ac50359f-3647-4378-9071-3820c935499c/ac50359f-3647-4378-9071-3820c935499c_1920x1080.jpeg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg14:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#uranusFooter {
    margin-bottom: -1500px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* NEPTUNE */
#neptuneimg {
    float: right;
    margin-right: 50px;
}

#neptuneFacts {
    margin-top: 50px;
}

.factCardImg15 {
    background-image: url("https://cdn.mos.cms.futurecdn.net/TpgrtYe4yXqt2sybLvQA7h.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg15:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg16 {
    background-image: url("https://solarsystem.nasa.gov/system/downloadable_items/816_PIA01997.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg16:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#neptuneFooter {
    margin-bottom: -1550px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}

/* PLUTO */
#plutoimg {
    float: right;
    margin-right: 50px;
}

.factCardImg17 {
    background-image: url("https://cms.qz.com/wp-content/uploads/2015/09/snakeskin_detail.jpg?quality=75&strip=all&w=1600&h=900&crop=1");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg17:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

.factCardImg18 {
    background-image: url("https://scx2.b-cdn.net/gfx/news/2017/596ca6ca1b3bb.jpg");
    padding: 20px;
    margin: 10px;
    flex-basis: 0;
    flex: 1 1 0px;
    color:white;
    text-align: center;
    font-size: 20px;
    background-size: cover;
}

.factCardImg18:hover {
    transition: all .2s ease-in-out;
    transform: scale(1.05);
}

#plutoFooter {
    margin-bottom: -1500px;
    position: absolute;
    bottom: 0;
    height: 150px;
    width: 100%;
}