/* Colors, font and watermark from https://www.pennhci.com/ */
:root {
  --denim: #4a72b7;
  --navy: #1c2b56;
  --text: #484848;
  --light-gray: #e5e7eb;
}

body {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 6rem;
  font-family: Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
}

header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--text);
}
header a {
  color: var(--navy);
  font-weight: bold;
  text-decoration: none;
}

/* Top right, sticking out into the margin; text wraps beside it */
.watermark {
  float: right;
  width: 255px;
  margin: 0 -66px 1rem 1rem;
}
.watermark img { width: 100%; }
.watermark figcaption {
  font-style: italic;
  font-size: 0.7rem;
  text-align: center;
}
.watermark figcaption, .watermark figcaption a { color: gray; }

h1, h3 { color: var(--navy); }
h2 { color: var(--denim); }
a { color: var(--denim); }

table { border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--light-gray);
}

pre { padding: 1rem; overflow-x: auto; background: #f3f4f6; }

/* Hide the watermark where it would cover the text */
@media (max-width: 1100px) {
  .watermark { display: none; }
}