/* all styles should be scoped 
  to be child of article to avoid 
  conflicting other styles */
.markdown-style {
  /* comfy reading width centered */
  max-width: 60ch;
  padding: 10px;
  margin: auto;
  --content-gap: 20px;

  /* all headings should have 
    leading and trailing margins 
    but not between other headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: var(--content-gap);

    & + & {
      margin-block-start: 0px;
    }

    &:has(+ &) {
      margin-block-end: 0px;
    }
  }

  > p,
  > ul,
  > ol,
  pre,
  blockquote,
  table,
  hr {
    margin-block: var(--content-gap);
  }

  :not(pre) > code {
    background-color: #00000020;
    padding: 2.5px;
    border-radius: 5px;
    box-decoration-break: clone;
  }

  pre {
    padding: 10px;
    border-radius: 10px;
  }

  blockquote {
    margin-left: 10px;
    padding-inline: 15px;
    padding-block: 5px;
    border-image: url(../assets/blockquote.png) 5 5 fill / 5px round;
  }

  hr {
    height: 5px;
    border: none;
    border-image: url(../assets/hr.png) 0 5 fill / 0 5px round;
  }

  ul,
  ol {
    padding-inline-start: 2em;

    & ol {
      list-style: lower-alpha;

      & ol {
        list-style: lower-roman;

        & ol {
          list-style: lower-greek;

          & ol {
            list-style: decimal;

            & ol ol {
              /* easter egg incase i ever go 7 deep lmao */
              list-style: hebrew;
            }
          }
        }
      }
    }

    &.contains-task-list {
      /* checkbox is marker */
      list-style-type: none;

      input {
        margin-inline-end: 0.5em;
      }
    }
  }

  img,
  audio,
  video,
  iframe,
  svg {
    width: 100%;
    height: auto;
  }

  table {
    border-collapse: collapse;
    thead {
      background: #00000020;
    }

    th,
    td {
      padding: 5px;
      border: 1px solid #00000040;
    }
  }
}