/* LAYOUT */

/* 1. Remove default margins and padding from all elements */

* {
    margin: 0;
    padding: 0;
}


/* 2. Main page layout */

body {
    display: grid;
    grid-template-columns: 1fr 72rem 1fr;
}

header, nav, footer {
    grid-column: 1 / 4;
}

main {
    grid-column: 2;
}


/* 3. Lay out the main menu */

nav ul {
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 2em;
}


/* 4. Create a "feature box" with the images and their captions */

img { 
    width: 100%; /* This is mentioned in the READ ME file */
}

#image-feature {
    display: flex;
}

#image-feature > div {
    width: 33.333333%;
}

.caption {
    text-align: center;
}


/* 5. Put the main content into boxes */

#content {
    display: flex;
    justify-content: space-between;
}

#content > div {
    width: 44%;
    border: 1px solid #444;
}


/* 6. Lay out the footer */

footer > ul {
    display: flex;
    justify-content: space-evenly;
}


/* 7. Add padding inside various boxes to push the content in from the edges
      and margin to push some boxes away from each other */

header, nav, #content > div, footer {
    padding: 1em;
}

main, #image-feature {
    margin-bottom: 1em;
}

h1 {
    margin: 0.5em 0; /* That is 0.5em for top and bottom, 0 for right and left */
}

h2, main p {
    margin-bottom: 1em;
}

#content ul {
    margin-left: 4em; /* Slightly trickier one to finish with */
}

/* END OF ANSWER ================================================================ */





/* TYPOGRAPHY */

body {
    font-family: Georgia;
    line-height: 1.5;
}

#site-title, h1, h2, nav, footer, .caption {
    font-family: "Century Gothic";
}

h1 {
    font-size: 2.5rem;
    text-align: center;
}

h2 {
    font-size: 1.5rem;
}

#site-title {
    font-size: 2rem;
    text-align: center;
}

nav {
    text-transform: uppercase;
}

.album-title {
    font-style: italic;
}


/* COLOUR SCHEME */

body {
    color: #333;
}

header {
    background-color: #a00;
    color: #fff;
}

nav, footer {
    background-color: #323642;
}

h1, h2 {
    color: #a00;
}

nav a, footer a {
    color: #fff;
}

nav a:hover, footer a:hover { /* Note the descendant selectors */
    color: #ee2;
}


/* NAVIGATION */

nav ul, footer ul {  /* Note how descendant selectors are used */
    list-style-type: none;
}

nav a, footer a {
    text-decoration: none;
}