/* Working with Images and Media Project */

/* Styles the entire page */
body {
    background-color: #eaf2f8;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    margin: 0;
}

/* Styles the heading area */
header {
    background-color: #174d73;
    color: white;
    padding: 25px;
    text-align: center;
}

header h1 {
    margin-bottom: 5px;
}

/* Centers the main page content */
main {
    background-color: white;
    margin: 25px auto;
    max-width: 1000px;
    padding: 25px;
}

/* Adds spacing between sections */
section {
    border-bottom: 2px solid #cccccc;
    margin-bottom: 30px;
    padding-bottom: 25px;
}

/* Styles section headings */
h2 {
    color: #174d73;
}

/* Places the image boxes beside each other */
.image-container {
    text-align: center;
}

/* Styles each image example box */
.image-box {
    background-color: #f7f7f7;
    border: 1px solid #999999;
    display: inline-block;
    margin: 8px;
    min-height: 500px;
    padding: 15px;
    text-align: center;
    vertical-align: top;
    width: 250px;
}

/* Adds borders to the three image examples */
.image-box img {
    border: 2px solid #174d73;
    max-width: 100%;
}

/* Aligns the Mars image to the left of the text */
.aligned-image {
    border: 4px solid #174d73;
    float: left;

    /* Margin creates space outside the border */
    margin: 5px 25px 15px 0;

    /* Padding creates space inside the border */
    padding: 6px;

    max-width: 100%;
}

/* Prevents the floating image from overlapping later sections */
.clear-section::after {
    clear: both;
    content: "";
    display: table;
}

/* Uses an image as the bullet marker */
.custom-list {
    list-style-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/18px-Full_Star_Yellow.svg.png");
}

/* Adds spacing between custom bullet items */
.custom-list li {
    margin-bottom: 8px;
}

/* Styles the audio player */
audio {
    max-width: 100%;
    width: 400px;
}

/* Styles the video player */
video {
    border: 3px solid #174d73;
    max-width: 100%;
}

/* Styles the image and media credits */
.credit {
    color: #555555;
    font-size: 13px;
    font-style: italic;
}

/* Styles links */
a {
    color: #075a9c;
}

a:hover {
    color: #b23a00;
}

/* Styles the footer */
footer {
    background-color: #174d73;
    color: white;
    padding: 15px;
    text-align: center;
}

/* Adjusts the page for smaller screens */
@media screen and (max-width: 700px) {
    main {
        margin: 10px;
        padding: 15px;
    }

    .image-box {
        box-sizing: border-box;
        margin: 10px 0;
        width: 100%;
    }

    .aligned-image {
        float: none;
        margin: 5px 0 20px;
        width: 95%;
    }
}