body {
font-family: Arial, Helvetica, sans-serif;
margin:0;
color:#222;
background:white;
}

header {
text-align:center;
padding:30px 20px 10px;
}

h1 {
font-weight:500;
letter-spacing:1px;
}

nav {
margin-top:15px;
}

nav a {
margin:0 15px;
text-decoration:none;
color:#333;
font-size:14px;
}

nav a:hover {
text-decoration:underline;
}

.hero {
height:360px;
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}

/* subtle overlay to improve text readability */

.hero::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
}

.hero-text {
position:relative;
background:rgba(255,255,255,0.90);
padding:35px;
text-align:center;
max-width:640px;
line-height:1.6;
}

.hero-text h2 {
margin-top:0;
}

.tagline {
font-style:italic;
margin-top:12px;
}

.tagline-strong {
font-weight:bold;
margin-top:12px;
}

.content {
max-width:720px;
margin:70px auto;
padding:0 20px;
line-height:1.7;
}

.content h2 {
margin-top:0;
}

footer {
text-align:center;
padding:40px 20px;
color:#777;
font-size:14px;
border-top:1px solid #eee;
margin-top:60px;
}

footer a {
color:#777;
text-decoration:none;
margin:0 5px;
}

footer a:hover {
text-decoration:underline;
}