html {
  font-size: 20px;
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-weight: 300;
  line-height: 1.5rem;
  font-family: "Lato", "Helvetica Neue", Helvetica, arial, sans-serif;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: #fafafa;
}

a {
  color: #2380c4;
}

a:hover {
  color: #ff862e;
}

h2 {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-top: 3.0rem;
  margin-bottom: 1.0rem;
  color: #2380c4;
}

h2 a {
  text-decoration: none;
}

h3 {
  font-weight: 400;
  font-size: 1.0rem;
  line-height: 1.5rem;
  margin: 0;
  color: #2380c4;
}

figure {
  margin: 0;
}

pre {
  margin-bottom: 0;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  overflow: auto;
  background: #efefef;
  padding: 0.75rem;
}

code {
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-family: "PT Mono", menlo, courier, monospace;
  display: inline-block;
  background: #efefef;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.25rem;
}

pre code {
  display: inline;
  border-radius: 0;
  padding: 0;
}

strong {
  font-weight: bold;
}

audio.audio-block {
  margin: 3.0rem auto;
  display: block;
}

ul.audio-list li audio {
  width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
}

th {
  text-align: left;
  border-bottom: 2px solid #ddd;
  padding-right: 1.5rem;
}

th:last-child {
  padding-right: 0;
}

td {
  vertical-align: top;
  padding-right: 1.5rem;
}

td:last-child {
  padding-right: 0;
}

.important, .good-to-know {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  padding: 0.75rem;
}

.important {
  background: #fcd2d2;
}

.good-to-know {
  background: #d2eafc;
}

.tag-important {
  display: inline-block;
  background: #ff4d4d;
  color: #fff;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.25rem;
}

.tag-good-to-know {
  display: inline-block;
  background: #2380c4;
  color: #fff;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0.25rem;
}

.inline-code-highlight {
  font-weight: bold;
  color: #f00;
}

h1 {
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 2.0rem;
  flex: 1;
}

h1 a {
  text-decoration: none;
  color: #000;
}

ul#navigation li a {
  color: #000;
  font-weight: 400;
  text-decoration: none;
  line-height: 2.0rem;
}

ul#navigation li a.selected {
  text-decoration: underline;
}

ul#navigation li a:hover {
  color: #ff862e;
}

p#tagline {
  font-size: 1.5rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  line-height: 2.0rem;
}

ul#format-list {
  padding-left: 1.0rem;
}

ul#format-list li {
  list-style-type: square;
}

.section {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.section-short {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.section-tall {
  padding-top: 3.0rem;
  padding-bottom: 3.0rem;
}

.section > *:last-child {
  margin-bottom: 0;
}

.section > h2:first-child {
  margin-top: 0;
}

.chunk-parent {
  margin: 0 auto;
  border: 2px solid #a1a1a1;
  box-sizing: border-box;
  max-width: 15.0rem;
  border-radius: 0.5rem;
}

.chunk-child {
  border: 2px solid #a1a1a1;
  margin: 0.75rem;
  border-radius: 0.25rem;
}

.chunk-parent-field {
  border-bottom: 1px solid #a1a1a1;
  padding: 0.25rem 0.75rem;
  display: block;
}

.chunk-child-field {
  border-bottom: 1px solid #a1a1a1;
  padding: 0.25rem;
  display: block;
}

.chunk-child-field:last-child {
  border-bottom: none;
}


.m0 { margin: 0; }
.mr1 { margin-right: 1.5rem; }
.mb1 { margin-bottom: 1.5rem; }
.p0 { padding: 0; }
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-align-center { align-items: center; }
.flex-justify-center { justify-content: center; }
.flex-fill { flex: 1; }
.small-caps { font-variant: small-caps; }
.center { text-align: center; }
.list-style-none { list-style-type: none; }
.scroll-x { overflow-x: scroll; }
.white { color: #fff; }
.bg-white { background: #fff; }
.bg-black { background: #000; }
.bg-blue { background: #2380c4; }


@supports(padding: max(0px)) {
  .section {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }

  pre {
    margin-left: min(-0.75rem, calc(env(safe-area-inset-left) * -1));
    margin-right: min(-0.75rem, calc(env(safe-area-inset-right) * -1));
  }
}

@media (min-width: 768px) {
  .section {
    padding-left: calc((100% - 708px) / 2);
    padding-right: calc((100% - 708px) / 2);
  }

  .section-short {
    padding-top: 2.0rem;
    padding-bottom: 2.0rem;
  }

  .section-tall {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  p#tagline {
    font-size: 2.0rem;
    line-height: 3.0rem;
  }

  ul#feature-list {
    overflow: auto;
  }

  ul#feature-list > li {
    width: calc(50% - 1.5rem);
    float: left;
  }

  ul#feature-list > li:nth-child(even) {
    margin-left: 3.0rem;
  }

  ul.audio-list li {
    align-items: center;
    height: 2.0rem;
  }

  ul.audio-list li label {
    display: flex;
    flex: 0 0 180px;
  }

  ul.audio-list li audio {
    display: flex;
    flex: 1;
  }

  pre {
    padding: 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    border-radius: 0.25rem;
  }

  .important, .good-to-know {
    padding: 1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    border-radius: 0.25rem;
  }

  .mb0-l { margin-bottom: 0; }
  .flex-row-l { flex-direction: row; }
}



/* Syntax highlighting */
/* https://github.com/richleland/pygments-css/blob/master/vs.css */
.highlight .hll { background-color: #ffffcc }
.highlight  { background: #ffffff; }
.highlight .c { color: #008000 } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #0000ff } /* Keyword */
.highlight .ch { color: #008000 } /* Comment.Hashbang */
.highlight .cm { color: #008000 } /* Comment.Multiline */
.highlight .cp { color: #0000ff } /* Comment.Preproc */
.highlight .cpf { color: #008000 } /* Comment.PreprocFile */
.highlight .c1 { color: #008000 } /* Comment.Single */
.highlight .cs { color: #008000 } /* Comment.Special */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gh { font-weight: bold } /* Generic.Heading */
.highlight .gp { font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { font-weight: bold } /* Generic.Subheading */
.highlight .kc { color: #0000ff } /* Keyword.Constant */
.highlight .kd { color: #0000ff } /* Keyword.Declaration */
.highlight .kn { color: #0000ff } /* Keyword.Namespace */
.highlight .kp { color: #0000ff } /* Keyword.Pseudo */
.highlight .kr { color: #0000ff } /* Keyword.Reserved */
.highlight .kt { color: #2b91af } /* Keyword.Type */
.highlight .s { color: #a31515 } /* Literal.String */
.highlight .nc { color: #2b91af } /* Name.Class */
.highlight .ow { color: #0000ff } /* Operator.Word */
.highlight .sa { color: #a31515 } /* Literal.String.Affix */
.highlight .sb { color: #a31515 } /* Literal.String.Backtick */
.highlight .sc { color: #a31515 } /* Literal.String.Char */
.highlight .dl { color: #a31515 } /* Literal.String.Delimiter */
.highlight .sd { color: #a31515 } /* Literal.String.Doc */
.highlight .s2 { color: #a31515 } /* Literal.String.Double */
.highlight .se { color: #a31515 } /* Literal.String.Escape */
.highlight .sh { color: #a31515 } /* Literal.String.Heredoc */
.highlight .si { color: #a31515 } /* Literal.String.Interpol */
.highlight .sx { color: #a31515 } /* Literal.String.Other */
.highlight .sr { color: #a31515 } /* Literal.String.Regex */
.highlight .s1 { color: #a31515 } /* Literal.String.Single */
.highlight .ss { color: #a31515 } /* Literal.String.Symbol */