/* RESET */

* {
    margin: 0;
    padding: 0;
}

/* LAYOUT */

body {
    display: grid;
    grid-template-columns: 1fr 75em 1fr;
}

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

main {
    grid-column: 2;
}

/* FLEXBOXES */

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

img {
    width: 100%;
}

#image-box {
    display: flex;
}

#image-box > div {
    flex-basis: 0;
    flex-grow: 1;
}

.caption {
    text-align: center;
}

#main-content {
    display: flex;
    gap: 4em; /* noted */
    justify-content: space-between;
}

#main-content > div {
    flex-basis: 0;
    flex-grow: 1;
    border: 1px solid #000000;
}

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

/* PADDING & MARGIN */

nav ul li {
    padding: 0em 2em;
}

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

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

h1 {
    margin: 0.5em 0em;
}

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

#main-content div ul {
    margin-left: 4em;
}

/* END OF CSS */
/*            */
/* OTHER CSS! */

/* 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;
}