/* Universal Selector */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */

body {
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

/* Header */

#home-header {
    background-color: #003366;
    text-align: center;
    padding: 25px;
}

/* Navigation */

nav {
    margin-top: 15px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

nav a:hover {
    color: #4fc3f7;
}

/* Main Content */

main {
    width: 90%;
    margin: auto;
    padding: 30px;
}

/* Intro */

#intro-section {
    text-align: center;
    margin-bottom: 40px;
}

#intro-section h2 {
    color: #4fc3f7;
    margin-bottom: 10px;
}

/* Solar System */

#solar-system h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Planet Cards */

.planet-card {
    background-color: #111;
    border: 2px solid #003366;

    padding: 15px;

    margin-bottom: 10px;

    border-radius: 10px;

    text-align: center;
}

.planet-card a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.planet-card:hover {
    background-color: #003366;

    box-shadow: 0 0 10px #4fc3f7;
}

/* Footer */

#main-footer {
    background-color: #111;

    text-align: center;

    padding: 20px;

    margin-top: 40px;
}

/* Comparison Page Header */

#comparison-header {
    background-color: #5B2C87;
    text-align: center;
    padding: 25px;
}

/* Comparison Layout */

#comparison-section {
    width: 90%;
    margin: auto;
}

/* Comparison Boxes */

.comparison-box {

    background-color: #111;

    border: 2px solid #5B2C87;

    border-radius: 10px;

    padding: 25px;

    margin-bottom: 25px;
}

/* Headings */

.comparison-box h2 {
    color: #D8B4FF;
    margin-bottom: 15px;
}

.comparison-box h3 {
    margin-top: 20px;
    color: #D8B4FF;
}

/* Dropdowns */

select {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #5B2C87;
    background-color: #222;
    color: white;
}

/* Information Lists */

.comparison-box ul {
    list-style-type: none;
    margin-top: 15px;
}

.comparison-box li {
    padding: 6px;
}

/* Exotic Planet Page Header */

#exotic-header {
    background-color: #cc3000;
    text-align: center;
    padding: 25px;
}

/* Exotic Planet Header */

#exotic-header {
    background-color: #cc3000;
    text-align: center;
    padding: 25px;
}

/* Exotic Page Heading */

#exotic-header h1 {
    color: white;
}

/* Request Form */

#request-section {
    margin-top: 40px;
}

/* Styling the Form */

form {
    background-color: #111;
    border: 2px solid #cc3000;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
}

/* Inputs */

input[type="text"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #cc3000;
    border-radius: 5px;
    background-color: #222;
    color: white;
}

/* Submit Button */

button {
    background-color: #cc3000;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #cc6600;
}

/* About Page Header */

#about-header {
    background-color: #666666;
    text-align: center;
    padding: 25px;
}

/* About Section */

#about-section,
#update-section,
#contact-section {

    background-color: #111;

    border: 2px solid #666666;

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 25px;
}

/* Update Log */

#update-section ul {
    margin-left: 20px;
}

#update-section li {
    margin-bottom: 10px;
}

/* Contact Form */

#contact-section form {
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    margin-top: 15px;
}

/* Dropdown Styling */

#contact-section select {
    background-color: #222;
    color: white;
    border: 1px solid #666666;
    padding: 8px;
}

/* Submit Buttons */

input[type="submit"],
input[type="reset"] {

    background-color: #666666;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: #888888;
}