* { box-sizing: border-box; }

body {
  margin: 0;
  background: #efefef;
  color: #22313f;
  font: 17px/1.65 "Noto Serif", Georgia, serif;
}

a { color: #22313f; }
a:hover { color: rgba(34, 49, 63, .7); }

.site { display: flex; min-height: 100vh; }

.sidebar {
  flex: 0 0 29%;
  max-width: 420px;
  padding: 3.5em 2.5em;
  background: #5e5e5e url(images/sidebar.png);
  color: rgba(255, 255, 255, .7);
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
}
.sidebar a { color: #fff; text-decoration: none; }
.sidebar a:hover { color: rgba(255, 255, 255, .7); }
.site-title { margin: 0 0 .5em; font-size: 22px; font-weight: 700; }
.site-description { margin: 0 0 2em; font-size: 13px; }

.sidebar ul { list-style: none; margin: 0 0 2.5em; padding: 0; }
.sidebar li { border-top: 1px solid rgba(255, 255, 255, .1); padding: .6em 0; }
.sidebar li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sidebar a.current { font-weight: 700; }

main { flex: 1; padding: 3.5em 4%; max-width: 900px; }

article, .page-title {
  background: #fff;
  padding: 2.5em 10%;
  margin: 0 0 2em;
  box-shadow: 0 0 1px rgba(0, 0, 0, .15);
}
.page-title { font-size: 1.4em; padding-top: 1.2em; padding-bottom: 1.2em; }

.entry-title { font-size: 2em; line-height: 1.2; margin: 0 0 1em; }
.entry-title a { text-decoration: none; }
h3 { margin-top: 1.8em; }
hr { border: 0; height: 1px; background: rgba(34, 49, 63, .1); margin: 2em 0; }
img { max-width: 100%; height: auto; }

.entry-footer {
  margin: 2em -12% -2.5em;
  padding: 1.2em 12%;
  background: #f1f1f1;
  font: 14px "Noto Sans", sans-serif;
  color: rgba(34, 49, 63, .7);
}

@media (max-width: 800px) {
  .site { display: block; }
  .sidebar { max-width: none; padding: 1.5em 16px; }
  .sidebar ul { margin-bottom: 1.2em; }
  main { padding: 1.5em 16px; }
  article { padding: 1.5em 16px; }
  .entry-footer { margin: 1.5em -16px -1.5em; padding: 1em 16px; }
  .entry-title { font-size: 1.6em; }
}