body {
    font-family: sans-serif;
    margin: 0;


}

nav {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;

}

ul {
    display: flex;
    /* get rid of bullets */
    list-style-type: none;

}

li {
    margin: 0 1rem;

}

a {
    /* remove underline*/
    text-decoration: none;
    color:cadetblue

}

.hero {
    width: 100%;
    height: 70%;

    /* background image url('..'/);*/
    background-image: url('../image/gallery-image-3.jpg');
    background-size: cover;

    /* use flexbox to center text */
    display: flex;
    justify-content: center; align-items: center;


}

h1 {
    color:white;


}

.box {
    background: lightslategray;
    width: 100%;
    height: 50%;
    margin: 1rem;
    /* flex */
    display: flex;
    align-items: flex-end;
    padding: 1rem;


}

.row {
    width: 100%;
    height: 100%;

    /* apply flexbox*/
    display: flex;

}

footer {
    width: 100%;
    height: 30%;
    background: darkslategrey;

}