body {
font-family: Helvetica-Neue;
margin: 0;
background: white;
color: black;
}

.nav {
padding: 20px;
}

.nav-inner {
display: flex;
justify-content: space-between;
max-width: 900px;
margin: auto;
}

nav a {
margin-left: 20px;
text-decoration: none;
color: black;
}

/* Homepage only */
.home {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}

/* Homepage navigation under name */
.home .hero-nav {
margin-top: 20px;
}

.home .hero-nav a {
margin: 0 15px;
text-decoration: none;
color: black;
font-size: 16px;
}



.content {
max-width: 900px;
margin-left: 40px;
margin-right: 0;
padding: 40px 0;
}


.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.card img {
width: 100%;
height: auto;
display: block;
}



.placeholder {
background: #eee;
height: 200px;
}

.placeholder.large {
height: 400px;
}

footer {
position: absolute;
bottom: 0;
width: 100%;
color: #777;
}


.large-image {
width: 100%;
max-width: 900px;
height: auto;
display: block;
margin: 40px auto;
}