.content {
  /* Custom Flags */

  & blockquote {
    &[data-bq-flag--note],
    &[data-bq-flag--alert],
    &[data-bq-flag--info] {
      color: black;
    }

    &[data-bq-flag--note] {
      --accent: var(--rainbow-4);
      --icon: "📝";
      --name: "Note";
    }

    &[data-bq-flag--alert] {
      --accent: var(--rainbow-0);
      --icon: "🚨";
      --name: "Alert";
    }

    &[data-bq-flag--info] {
      --accent: var(--rainbow-5);
      --icon: "📚";
      --name: "Info";
    }
  }

  & p,
  & div:has(> p) {
    &[data-para-flag--bg-red],
    &[data-para-flag--bg-orange],
    &[data-para-flag--bg-yellow],
    &[data-para-flag--bg-green],
    &[data-para-flag--bg-blue],
    &[data-para-flag--bg-purple] {
      /* contrasting colour */
      color: black;
    }

    &[data-para-flag--bg-red] {
      background-color: var(--rainbow-0);
    }

    &[data-para-flag--bg-orange] {
      background-color: var(--rainbow-1);
    }

    &[data-para-flag--bg-yellow] {
      background-color: var(--rainbow-2);
    }

    &[data-para-flag--bg-green] {
      background-color: var(--rainbow-3);
    }

    &[data-para-flag--bg-blue] {
      background-color: var(--rainbow-4);
    }

    &[data-para-flag--bg-purple] {
      background-color: var(--rainbow-5);
    }
  }

  & img {
    &[data-img-flag--small="true"] {
      width: 50%;
    }

    &[data-img-flag--left="true"] {
      float: left;
    }

    &[data-img-flag--right="true"] {
      float: right;
    }

    &[data-img-flag--centre="true"] {
      margin-inline: auto;
    }
  }

  /* Headings */

  & h2,
  & h3,
  & h4 {
    margin-block-start: 20px;
    margin-block-end: 20px;

    color: var(--typo-subheading);

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

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

  & h2 {
    font-size: 2.2rem;
  }

  & h3 {
    font-size: 1.8rem;
  }

  & h4 {
    font-size: 1.5rem;
  }

  /* Paragraphs */
  & p,
  & blockquote {
    clear: both;
    margin-block: 20px;
  }

  & div:has(> p) {
    margin-block: 10px;
  }

  /* Images */
  & img {
    height: auto; /* fix height issues ?? */
    margin: 10px;
  }

  & a {
    text-decoration: 2px underline;

    &:link {
      color: var(--typo-url);
    }
    &:visited {
      color: var(--typo-visited);
    }
    &:hover {
      text-decoration: 1px wavy underline;
    }
    &:active {
      color: var(--rainbow-3);
    }
  }

  /* Standard Lists */
  & ul,
  & ol {
    margin-inline-start: 40px;
    & & {
      margin-inline-start: 20px;
    }
  }

  /* Blockquotes */
  & blockquote {
    --accent: var(--bg-secondary);
    border-left: 2px solid hsl(from var(--accent) h s calc(l * 0.9));
    padding: 10px 40px 10px 10px;
    margin: 10px;
    border-radius: 5px;
    background-color: var(--accent);
    width: fit-content;
    min-width: 200px;

    &::before {
      content: var(--icon) " " var(--name) / var(--name);
    }
  }

  /* Inline code */
  :not(pre) > code {
    color: var(--typo-code);
    background-color: var(--bg-code);
    padding: 2px;
    border-radius: 5px;

    /* make blockquote code use a lighter version of the accent with a darker background */
    :is(blockquote) & {
      color: hsl(from var(--accent) h calc(s * 0.8) calc(l * 1.4));
      background-color: #00000080;
    }
  }

  /* Outline Code */
  & pre:has(> code) {
    padding: 5px;
    border-radius: 10px;
  }

  .astro-code {
    background-color: var(--bg-code) !important;
    margin-block: 10px;
    padding: 0;
    position: relative;

    & code {
      display: block;
      padding: 10px;

      & span {
        color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
      }
    }
  }

  /* Check lists */
  .task-list-item {
    list-style: none;
  }

  .task-list-item label {
    display: flex;
    margin-block-start: 5px;
    margin-block-end: 7.5px;

    gap: 5px;

    & input[type="checkbox"] {
      width: 25px;
      height: 25px;
      margin-inline-end: 5px;

      background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
      border-radius: 5px;
      border: 1px solid var(--typo-body);

      &:checked {
        --checkmark: url("../../assets/check.svg");
        background: var(--checkmark) center/20px padding-box no-repeat
          var(--rainbow-2);
      }
    }
  }

  /* Table */
  & table {
    border-collapse: collapse;
    border-spacing: 0;

    & th,
    & td {
      border: 1px solid white;
      padding: 5px;
    }

    & thead th {
      background-color: var(--bg-secondary);
    }

    & tbody tr:nth-child(2n) {
      background-color: #ffffff10;
    }
  }
}