:root{
  --max-width: 740px;
  --accent: #111;
  --muted: #555;
  --bg: #fff;
  --font-sans: "Google Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:40px 20px;
  background:var(--bg);
  color:var(--accent);
  font-family: var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-weight:400;
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
}

.site-header{
  max-width:var(--max-width);
  margin:0 auto 30px;
  text-align:left;
  padding-bottom:12px;
  border-bottom:1px solid #eee;
}

.site-title{
  margin:0;
  font-size:34px;
  letter-spacing: -0.02em;
  font-weight:700;
}

.site-sub{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
  font-weight:500;
}

.site-nav{
  margin-top:10px;
}

.site-nav a{
  color:var(--muted);
  text-decoration:none;
  margin-right:12px;
  font-size:13px;
  font-weight:500;
}

.post{
  margin:28px 0;
  padding:0;
}

.post-title{
  margin:0 0 6px;
  font-size:20px;
  font-weight:500;
}

.post-title a{
  color:var(--accent);
  text-decoration:none;
}

.post-date{
  display:block;
  margin-bottom:12px;
  color:var(--muted);
  font-size:13px;
  font-weight:400;
}

.post-body p{
  margin:0 0 10px;
  font-size:17px;
  color:#222;
  font-weight:400;
}

.site-footer{
  max-width:var(--max-width);
  margin:40px auto 0;
  padding-top:20px;
  border-top:1px solid #eee;
  color:var(--muted);
  font-size:13px;
  font-weight:400;
}

/* Responsive tweaks */
@media (max-width:520px){
  body{padding:24px 14px}
  .site-title{font-size:26px}
  .post-title{font-size:18px}
}