/*
 * Our body will give a simple background color
 * and define centering throughout.
 */
body {
    background-color: #414a4c; 
    text-align: center;
    color:antiquewhite; 
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
}

/*
 * This sets off our
 * navigation bar from the background
 */
nav {
    padding: 5px 0px;
    margin: 0px auto;
    background-color: black;
    max-width: 60%;
    border: 1px solid yellow;
}

/*
 * We want to keep our links white to maintain
 * visibility against dark space colors
 */
a {
    color:antiquewhite;  
}

/* 
 * simple yellow for visited links 
 */
a:visited {
    color:yellow;
}

/*
 * This defines a general use image specification
 * to keep images constrained to a usable size
 * so they don't expand the page too much
 */
img {
    border-radius: 15%;
    width: 90%;
}

/*
 * Special handling for the image on the index
 * page to keep it at an appropriate size
 */
#splashImg {
    margin-top: 2%;
    width: 25%;
}

/* 
 * This is our horizontal (column) flexbox
 * used for a few items on the page. We are
 * using margin auto and max width settings 
 * to center align and keep a common width
 */
 .columns {
    margin: 0 auto;
    display: flex;
    max-width: 60%;
    justify-content:center;
}

/*
 * This is primarily used to display our
 * planetary photo and link to NASA information
 */
.rows {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 auto;
}

/* 
 * This defines how our planet details fill
 * in the appropriate flexbox. This ensures
 * they have consistent spacing and alignment
 */
.main-cont {
    margin: 0 auto;
    max-width: 60%; 
    text-align: left;
}

/*
 * These items pull our footer into a tight
 * alignment
 */
#disclaimer {
    min-width: 60%;
    font-size: 0.6rem;
    text-align: right;
}

figure {
    margin: 18px 1%;
    text-align: left;
}

#logoPic {
    max-width: 25%;
    background-color: blanchedalmond;
    border-radius: 0%;
}