tw-content {
  display: block;

  #main {
    background-color: var(--bg2);
    border: 1px solid var(--border1);
    /* box-shadow: var(--card-shadow); */
    color: var(--fg1);
    margin-block-end: var(--gap);
    min-width: 0;
    padding: var(--base);

    &.post {
      border-top: none;
    }

    a {
      &:hover {
        background-color: var(--bg3);
      }
    }

    blockquote {
      margin-block-end: calc(var(--base) / 2);
      margin-block-start: calc(var(--base) / 2);
      margin-inline-end: var(--gap);
      margin-inline-start: var(--gap);
    }

    code {
      font-size: 0.9rem;
      color: var(--inline-code);
    }

    div.highlight {
      max-width: 100%;
      overflow-x: auto;

      pre {
        background-color: var(--code-bg);
        color: var(--code-fg);
        margin: 0;
        overflow-x: auto;
        padding: var(--gap);
	font-size: 0.9rem;
      }
    }

    h1 {
      font-size: 1.4rem;
      margin: 0 0 var(--base) 0;
    }

    h2 {
      font-size: 1.3rem;
    }

    h3 {
      font-size: 1.2rem;
    }

    h4 {
      font-size: 1.1rem;
    }

    h5 {
      font-size: 1.0rem;
    }

    h6 {
      font-size: 0.9rem;
    }

    h2, h3, h4, h5, h6 {
      margin: var(--base) 0;
    }

    hr {
      border: none;
      border-top: 1px solid var(--border1);
      margin: var(--base) 0;
    }

    img {
      height: auto;
      max-width: 100%;
    }

    p {
      margin-block-end: calc(var(--base) / 2);
      margin-block-start: calc(var(--base) / 2);
      margin-inline-end: 0;
      margin-inline-start: 0;
    }

    #date {
      font-size: 0.9rem;
      font-style: italic;
      margin: 0;
      margin-block-end: 0;
      margin-block-start: 0;
    }
  }

  .highlight {
    background-color: var(--code-bg);
    color: var(--code-fg);

    span {
      color: var(--code-fg);
    }

    .c, .ch, .cm, .cp, .cpf, .c1, .cs {
      color: var(--code-comment);
      font-style: italic;
    }
    .k, .kc, .kd, .kn, .kp, .kr, .kt, .ow {
      color: var(--code-keyword);
    }
    .s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss {
      color: var(--code-string);
    }
    .m, .mb, .mf, .mh, .mi, .mo, .il {
      color: var(--code-number);
    }
    .nf, .fm {
      color: var(--code-function);
    }
    .nc, .ne {
      color: var(--code-class);
    }
    .o {
      color: var(--code-operator);
    }
    .p, .pm {
      color: var(--code-punctuation);
    }
    .n, .na, .nb, .ni, .nl, .nn, .nx, .py, .nv, .bp, .vc, .vg, .vi, .vm {
      color: var(--code-fg);
    }
  }

  a.headerlink {
    visibility: hidden;
  }

  h1:hover a.headerlink,
  h2:hover a.headerlink,
  h3:hover a.headerlink,
  h4:hover a.headerlink,
  h5:hover a.headerlink,
  h6:hover a.headerlink,
  a.headerlink:focus {
    visibility: visible;
  }
}