:root {
  --vs: 22pt;
}

body {
  font-family: "Open Sans", -apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: var(--vs);
}

select {
  border: none;
  border-radius: 3px;
}

button {
  margin-left: 5px;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  text-decoration: none;
}

button:hover {
  background: #f5f5f5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Slab", sans-serif;
}

h1, h2, h3, h4, h5, h6, p, li, hr {
  padding: 0;
  margin: var(--vs) 0 0 0;
  line-height: var(--vs);
}

li+li {
  margin-top: 0;
}

.container {
  max-width: 60em;
  margin: 0px auto;
}

@media all and (max-width: 880px) {
  .container {
    margin: 0px 20px;
  }
}

#doc {
  font-size: 14pt;
}

#doc div.highlight {
  line-height: 18pt;
  display: block;
}

#doc img {
  max-width: 100%;
}

#doc footer {
  margin-top: 60px;
  text-align: right;
  color: #777;
}

pre, code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Ubuntu Mono", monospace;
}

code {
  padding: .2em .4em;
  margin: 0;
  white-space: break-spaces;
  background-color: #818b981f;
  border-radius: 6px;
}

div.highlight {
  background: #eee;
  padding: 0 18pt;
  margin-top: var(--vs);
  overflow-x: auto;
}

div.highlight.c {
  font-style: normal;
}

div.highlight .c1 {
  font-style: normal;
}

div.highlight .nb, div.highlight .nf, div.highlight .k {
  font-weight: 700;
}

div.highlight .n {
  color: #333;
}

table {
  margin-top: var(--vs);
  width: 100%;
}

th, td {
  text-align: left;
  border-bottom: 1px solid #eee;
  line-height: calc(var(--vs) * 1.5);
}
th h1:first-child, th h2:first-child, th h3:first-child, th h4:first-child, th h5:first-child, th h6:first-child, th p:first-child, td h1:first-child, td h2:first-child, td h3:first-child, td h4:first-child, td h5:first-child, td h6:first-child, td p:first-child {
  margin-top: 0;
}

th.name {
  width: 40%;
}

th.lang {
  width: 60%;
}

td.name {
  font-size: 1.2em;
  font-weight: bold;
}

td.lang a {
  display: inline-block;

  line-height: 1.5rem;
  min-width: 41px;
  margin: 0 2px;
  text-align: center;

  background: #eee;
  border-bottom: 2px solid #ddd;
  border-radius: 3px;
  padding: 0 5px;
  text-decoration: none;
}

td.lang a:hover {
  background: #f5f5f5;
}

td.lang a.selected {
  background: #ff9;
}

@media all and (max-width: 620px) {
  tr {
    display: block;
    border-bottom: 3px solid #eee;
    margin-bottom: 10px;
  }

  th.name {
    display: block;
    width: 100%;
  }

  th.lang {
    display: none;
  }

  td.name {
    display: block;
    font-size: 16pt;
    line-height: 24pt;
  }

  td.lang {
    display: block;
    text-align: right;
  }
}

.share {
  float: right;
  text-align: center;
  line-height: 40px;
  background: #eee;
  padding: 0 20px;
  border-radius: 3px;
  border-bottom: 2px solid #ddd;
}

.share .sharemsg {
  font-weight: bold;
  display: block;
}

.lang-choice {
  float: right;
}

.theme-choice {
  float: right;
  clear: right;
}