:root {
  --ink: #263238;
  --muted: #64757d;
  --line: #d8dedf;
  --paper: #fffdf8;
  --soft: #f5f2ea;
  --link: #176b78;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.78;
}

.navbar {
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a { color: var(--ink); }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: var(--link);
  background: transparent;
  border-bottom: 2px solid var(--link);
}

.container { max-width: 1120px; }
.col-md-9[role="main"] { max-width: 800px; }
h1, h2, h3 { color: var(--ink); line-height: 1.35; }
h1 { margin-top: 1.2em; font-size: 2.1rem; }
h2 {
  margin-top: 2.2em;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line);
}
h3 { margin-top: 1.7em; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #0e4f59; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
blockquote {
  color: var(--muted);
  background: transparent;
  border-left: 3px solid var(--link);
}
code { color: #7a3e2e; background: var(--soft); }
pre { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
table { border-collapse: collapse; }
table th, table td { border: 1px solid var(--line) !important; }
.bs-sidebar .nav > li > a { color: var(--muted); }
.bs-sidebar .nav > .active > a { color: var(--link); border-right-color: var(--link); }

footer { margin-top: 4rem; border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 767px) {
  h1 { font-size: 1.75rem; }
  .navbar-default .navbar-nav > .active > a { border-bottom: 0; border-left: 2px solid var(--link); }
}