body {
    font-family: 'Bitter', serif;
    color:#434343;
}

main {
    width: 1000px;
    margin: auto;
    border-top: 5px solid cornflowerblue;
}

img {
    max-width: 100%;
    display: block;
}

/************ Typography rules ************/

h1, h2, nav ul li a {
    font-family: 'Bebas Neue', cursive;
    font-weight: normal;
}

h1, h2 {
    color: #153c85;
    margin: 0;
    padding: 0;
    margin-bottom: .5em;
}

p {
    line-height: 1.5rem;
}

a {
    text-decoration: none;
    color:cornflowerblue;
}

/************ Header rules ************/

header, #page-footer {
    background-color: cornflowerblue;
    padding: 40px 0;
    text-align: center;
    color: #fff;
}

header h1 {
    font-size: 3rem;
    margin: 0;
    padding: 0;
    color: #fff;
}

/************ Navigation rules ************/

/* What needs to be done in the navigation to get it 
to display the way it does in the in the finished design?
Which element is the flex container and which elements
are the flex items? */

nav {
    margin-top: 10px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li a {
    display: block;
    text-decoration: none;
    color:chocolate;
    padding: 0 10px;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 4px;
}

/************ Page Section rules ************/

/* What needs to be done here to get the layout to work with
flexbox? Which elements are flex containers, which are flex items
and what other properties are needed? */

section {
    padding: 20px;
    background-color: beige;
}

.news-container {
    /* there should be two declarations in here */
    display: flex;
    gap:20px;
}

.news-container article {
    /* Set the width of the articles, using a percentage */
}

blockquote {
    margin: 0;
    padding: 40px;
    font-size: 2rem;
    background-color: brown;
    line-height: 1.5em;
    text-align: center;
    color: #fff;
}

.container {
    background-color: #e9e3ca;
    /* what declaration goes in here? */
    display: flex;
}

.container img {
    /* make the image take up one third
    of the available space */
}

.container div {
    padding: 20px;
    /* Make the div take up two thirds of the
    available space. */
}