/* This is some CSS to get you started. Link this file at the end of the head element in your HTML file. */
body {
    margin: 0;
}
header {
    background-color: bisque;
    padding: 10%;
    text-align: center;
}
header img {
    border: 1px solid burlywood;
    max-width: 50%;
}
main {
    padding: 4rem;
    margin: 0 auto;
    max-width: 35rem;
}
footer {
    background-color: #333;
    color: white;
    padding: 2rem;
    text-align: center;
}

/* This is an advanced kind of CSS rule called a media query. It will cause the page layout to change when resized for a smaller screen (like a phone). */
@media (min-width: 768px) {
    header {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-around;
    }
}