:root {
  /* global values */
  --ratio: 1.61803398875;
  --measure: 80ch;
  --site-width: 1200px;
  --sidebar-width: calc(20em - 0.5vw);

  /* colors */
  --color-primary: #0d5389;
  --color-dark: #0e1616;
  --color-gray-dark: #384848;
  --color-gray: #6d7a7e;
  --color-gray-light: #dbddd8;
  --color-light: #f3f6f0;
  --color-secondary: #a75332;
  --color-tertiary: #15890d;

  /* typography */
  --font-title: "Raleway", sans-serif;
  --font-copy: "PT Sans", sans-serif;
  --line-height: 1.3;
  line-height: var(--line-height);
  font-size: calc(0.9rem + 0.3vw);
  font-family: var(--font-copy);

  /* scaling */
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  /* common scales */
  --scale-gutter: var(--s1);
  --scale-vline: var(--s-2);
  --scale-hline: var(--s-3);
}

body {
  background-color: var(--color-light);
  overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  margin: 0;
}

/* Typography */
h1 {
  font-size: var(--s2);
}

h2 {
  font-size: var(--s1);
}

h3 {
  font-size: var(--s0);
}

h4 {
  font-size: var(--s-1);
}

h5 {
  font-size: var(--s-2);
}

h6 {
  font-size: var(--s-3);
}

figcaption {
  text-align: center;
  font-style: italic;
  padding: var(--s-1);
}

/* element overrides */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

* {
  box-sizing: border-box;
}

p {
  margin: unset;
  max-width: var(--measure);
}

article a {
  color: var(--color-dark);
  text-decoration: underline;
}
article a:hover {
  color: var(--color-gray-dark);
}
article a[href^="http"]::after {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCnZpZXdCb3g9IjAgMCAyNiAyNiIKc3R5bGU9IiBmaWxsOmN1cnJlbnRDb2xvcjsiPjxwYXRoIGQ9Ik0gMTIuMzEyNSAwIEMgMTAuNDI1NzgxIDAuMDAzOTA2MjUgMTAuNTY2NDA2IDAuNTA3ODEzIDExLjU2MjUgMS41IEwgMTQuNzgxMjUgNC43MTg3NSBMIDkuMjUgMTAuMjUgQyA4LjEwNTQ2OSAxMS4zOTQ1MzEgOC4xMDU0NjkgMTMuMjMwNDY5IDkuMjUgMTQuMzc1IEwgMTEuNjg3NSAxNi43ODEyNSBDIDEyLjgzMjAzMSAxNy45MjE4NzUgMTQuNjY3OTY5IDE3LjkyNTc4MSAxNS44MTI1IDE2Ljc4MTI1IEwgMjEuMzQzNzUgMTEuMjgxMjUgTCAyNC41IDE0LjQzNzUgQyAyNS42MDE1NjMgMTUuNTM5MDYzIDI2IDE1LjU3NDIxOSAyNiAxMy42ODc1IEwgMjYgMy40MDYyNSBDIDI2IC0wLjAzMTI1IDI2LjAzNTE1NiAwIDIyLjU5Mzc1IDAgWiBNIDQuODc1IDUgQyAyLjE4MzU5NCA1IDAgNy4xODM1OTQgMCA5Ljg3NSBMIDAgMjEuMTI1IEMgMCAyMy44MTY0MDYgMi4xODM1OTQgMjYgNC44NzUgMjYgTCAxNi4xMjUgMjYgQyAxOC44MTY0MDYgMjYgMjEgMjMuODE2NDA2IDIxIDIxLjEyNSBMIDIxIDE0Ljc1IEwgMTggMTcuNzUgTCAxOCAyMS4xMjUgQyAxOCAyMi4xNjAxNTYgMTcuMTYwMTU2IDIzIDE2LjEyNSAyMyBMIDQuODc1IDIzIEMgMy44Mzk4NDQgMjMgMyAyMi4xNjAxNTYgMyAyMS4xMjUgTCAzIDkuODc1IEMgMyA4LjgzOTg0NCAzLjgzOTg0NCA4IDQuODc1IDggTCA4LjMxMjUgOCBMIDExLjMxMjUgNSBaIj48L3BhdGg+PC9zdmc+");
  display: inline-block;
  width: 0.75em;
  padding-left: 0.2em;
}

.notebook-render .input-container .prompt {
  display: none;
}

.notebook-render .cell {
  margin-top: var(--s0);
}
.notebook-render .cell:first-child {
  margin-top: 0;
}

.notebook-render .nteract-outputs {
  margin-top: var(--s-1);
  padding-left: var(--s-1);
  border-left-width: var(--scale-vline);
  border-left-style: solid;
  border-color: var(--color-secondary);
}

.notebook-render .nteract-display-area-stdout {
  white-space: pre-wrap;
}

blockquote {
  background-color: var(--color-gray-light);
  margin-left: 0;
  margin-right: 0;
  padding: 1em;
  border-radius: 0.3em;
  position: relative;
  z-index: 3;
}
blockquote::before {
  content: "“";
  position: absolute;
  font-size: 3rem;
  line-height: 0;
  top: 50%;
  left: -0.25ch;
  opacity: 0.5;
}
blockquote::after {
  content: "”";
  position: absolute;
  font-size: 3rem;
  line-height: 0;
  top: 50%;
  right: 0.1ch;
  opacity: 0.5;
}

/*
<span class="filename">whatever</span>
```code
asdfasdf
```
*/
p > span.filename {
  float: left;
  margin-bottom: calc(-2 * var(--s0));
  background-color: var(--color-gray-light);
  padding: var(--s-1);
  padding-bottom: var(--s0);
  border-radius: 0.3em;
}