.readable p,
  .readable ul,
  .readable ol {
    margin: 0.5rem 0;
  }
  .readable p,
  .readable li {
    line-height: 1.375em;
  }
  .readable .hljs {
    font-size: 0.875em;
    line-height: 1.2em;
  }
  .readable ol ul {
    padding-left: 1.5rem;
    list-style: disc;
  }

pre,
code {
  font-family: Consolas, monaco, monospace;
}

.note {
  margin: 0 auto;
}
.note.short-width {
  max-width: 48rem;
}
.tweet-embed {
  min-height: 460px;
}
.tweet-embed .twitter-tweet {
    margin: 0 auto;
  }

.image {
  text-align: center;
}

.image img {
    max-width: 100%;
  }

.image__container {
    display: inline-block;
  }

.image__title {
    text-align: right;
    margin: 0;
    font-weight: initial;
    font-style: italic;
  }
.video {
  text-align: center;
}
.audio audio {
  width: 100%;
}
table tr {
    line-height: initial;
  }
table td {
    vertical-align: top;
  }

.language-break-space {
  white-space: pre-line !important;
}

.anchor-link {
  text-decoration: none;
  color: var(--color-dark);
  margin-left: 0.25rem;
  visibility: hidden;
}

*:hover > .anchor-link {
    visibility: visible;
  }

.tabs > input[type='radio'] {
    display: none;
  }

.tabs > label {
    position: relative;
    display: inline-block;
    padding: 1rem;
    cursor: pointer;

    font-weight: 900;
    font-size: 1.3em;
  }

.tabs > input:checked + label {
    background-color: var(--color-primary);
  }

.tabs__content {
    padding: 0.5rem 1rem;
  }

.tabs__content {
    display: none;
  }

.tabs > input:first-child:checked ~ .tabs__content-container > .tabs__content:first-child,
  .tabs > input:nth-child(3):checked ~ .tabs__content-container > .tabs__content:nth-child(2),
  .tabs > input:nth-child(5):checked ~ .tabs__content-container > .tabs__content:nth-child(3),
  .tabs > input:nth-child(7):checked ~ .tabs__content-container > .tabs__content:nth-child(4),
  .tabs > input:nth-child(9):checked ~ .tabs__content-container > .tabs__content:nth-child(5),
  .tabs > input:nth-child(11):checked ~ .tabs__content-container > .tabs__content:nth-child(6) {
    display: block;
  }

.tabs .image__title {
    display: none;
  }

.table-of-contents {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: var(--color-gray);

  list-style: none;
}

.table-of-contents a {
    text-decoration: none;
  }

.table-of-contents a:focus,
  .table-of-contents a:hover {
    text-decoration: underline;
  }

.spoiler {
  position: relative;
}

.spoiler + .spoiler {
    margin-top: 1rem;
  }

.spoiler summary {
    padding: 1rem 1.5rem;
    font-size: 1.2em;
    cursor: pointer;

    background-color: var(--color-primary);
  }

.spoiler section {
    padding: 1rem 1.5rem;
    background-color: var(--color-gray);
  }

.spoiler__icon {
    color: var(--color-dark);
    width: 1.2em;
    float: right;
  }