:root {
  --page: #e0ffff;
  --blue: #1010e0;
  --yellow: #ffff33;
  --red: #e0201e;
  --rule: #808080;
  --ink: #000;
  --link: #0000ee;
  --visited: #551a8b;

  --display: 28px;
  --body: 17px;
  --small: 14px;

  --serif: "Times New Roman", Times, serif;
  --sans: Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--body)/1.4 var(--serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); }
a:visited { color: var(--visited); }

h1, h2, h3, p, ul, ol, blockquote { margin: 0 0 0.8em; }
h1, h2, h3 { font-weight: 400; }

/* Header bar */
.masthead {
  background: var(--blue);
  padding: 12px 16px;
}
.masthead a {
  color: var(--yellow);
  font: 400 var(--display)/1.1 var(--sans);
  text-decoration: none;
}

/* Two-column shell */
.shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 220px;
  align-self: stretch;
  background: var(--blue);
  padding: 0 10px 16px 16px;
}
.sidebar section {
  border: 1px solid #8080ff;
  border-top: 0;
  padding: 6px 8px;
  font: 400 var(--small)/1.5 var(--sans);
  color: var(--yellow);
}
.sidebar section:first-child { border-top: 1px solid #8080ff; }
.sidebar h2 {
  font: inherit;
  font-style: italic;
  margin: 0;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
}
.sidebar a,
.sidebar a:visited {
  color: var(--yellow);
  text-decoration: none;
}
.sidebar a:hover { text-decoration: underline; }

main {
  flex: 1;
  min-width: 0;
  max-width: 820px;
  padding: 10px 16px 40px;
}

.section-title {
  color: var(--red);
  font: 400 var(--display)/1.2 var(--sans);
  margin: 6px 0 10px;
}

/* White dashed boxes */
.box {
  background: #fff;
  border: 1px dashed var(--rule);
  padding: 8px 10px 6px;
  margin-bottom: 6px;
}
.box h2,
.box h1 {
  color: var(--red);
  font-family: var(--serif);
  margin-bottom: 0.4em;
}
.box h2 { font-size: var(--body); }
.box h1 { font-size: var(--display); line-height: 1.2; }
.box h2 a,
.box h2 a:visited { color: inherit; text-decoration: none; }
.box h2 a:hover { text-decoration: underline; }

.posted {
  font-size: var(--small);
  text-align: right;
  margin: 0;
}

article blockquote {
  margin-left: 0;
  padding-left: 14px;
  border-left: 1px dashed var(--rule);
}
article img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .shell { flex-direction: column; }
  .sidebar {
    flex: none;
    width: 100%;
    padding: 0 16px 12px;
  }
  main { padding: 10px 16px 32px; }
}