/* header */

header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

header > h2 {
    margin-bottom: 0; /* because margin collapse doesn't work now the h2 is in a flex box */
}

header > h2 > a {
    text-decoration: none;
}

header > nav {
    margin: 0.83em 0 0 0;  /* match top margin to margin of h2 tag, so that when nav element wrap spacing looks good*/
    padding: 0;
}

header > nav > menu {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

header > nav > menu > li:not(:first-child) {
    margin-left: 20px;
}

/* tables */

table, th, td {
    border: 1px solid grey;
    background: #ffffcc;
}

th, td {
    padding: 1px 2px;
}

caption {
    caption-side: bottom;
}

.right {
    text-align: right;
}

/* figures */
figure {
    margin-left: 0;
    margin-right: 0;
}

article > figure {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

article > figure img {
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

li > figure {
    margin: 1em 0; /* inside a list make a figure have same margin as a p tag */
}

figure > figcaption {
    text-align: center;
}

/* descrioption lists (used on index page) */
dt {
    margin-top: 0.67em;
}

dd {
    margin-left:0;
}

/* footer */

footer {
    border-top: 1px solid grey;
    display: flex;
    justify-content: space-between;
}

footer > address {
    margin: 1em 0; /* Make address same margin as a p tag*/
}