.readme {
  margin-top: calc(var(--grid-line) * 1.5);
  padding: var(--grid-line) calc(var(--side-padding) * 3.5);
  border-radius: 6px;
  background: var(--background-1);

  max-width: var(--max-line);
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 800px) {
    padding: 14px calc(var(--side-padding) * 2);
  }

  &:empty {
    display: none;
  }

  h2,
  h3 {
    color: inherit;
  }

  /* increase density around paragraphs */
  p, ul, ol, summary {
    padding-top: 0;
    margin-bottom: 14px; /* half a gridline */
    ul, ol {
      margin-bottom: 0;
    }
  }

  img, video {
    max-width: 100% !important;
    height: auto;
  }

  code {
    background: var(--highlight);
  }

  pre {
    border-radius: 6px;
    background: var(--highlight);
  }
  pre.fallback {
    background: var(--background-1);
  }
  pre code {
    background: transparent;
  }

  kbd {
    display: inline-block;
    border: 1px solid var(--background-3);
    border-radius: 6px;
    line-height: 1.4rem;
    padding: 0px 4px;
    box-shadow: inset 0px -1px 0px var(--foreground-4);
    background: var(--highlight);
  }

  table {
    border-spacing: 0px;
    border-collapse: collapse;
    margin-bottom: 14px;

    tr:nth-child(2n) {
      background: rgb(from var(--background-2) r g b / 0.3);
    }

    td {
      border: 1px solid var(--background-3);
      padding: 6px 13px;
    }
  }

  .markdown-alert {
    border-left: 3px solid var(--orange-1);
    padding-left: 1em;

/*    &.markdown-alert-note,*/
/*    &.markdown-alert-tip,*/
/*    &.markdown-alert-important,*/
    &.markdown-alert-warning,
    &.markdown-alert-caution {
      border-left: 3px solid var(--red-1);
    }

    .markdown-alert-title {
      font-weight: 700;

      &:after {
        content: ':';
      }
    }
  }

  h1, h2, h3, h4 {
    position: relative;
    /* Widen the hover area:   */
    padding-left: calc(var(--side-padding) * 2);
    margin-left: calc(var(--side-padding) * -2);

    &:hover, &:focus-within {
      .markdown-anchor {
        opacity: 1;
      }
    }
  }

  .markdown-anchor {
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0em;
    color: var(--foreground-1);
    width: 28px;
    text-decoration: none;

    &:after {
      content: "#";
    }
  }
}