html.dark {
  img:not(.invertible) {
    filter: brightness(0.9);
  }

  img.invertible {
    filter: invert(1) brightness(0.9);
    border: 1px solid #999;
  }
}

.slidev-layout {
  h1 + p {
    @apply -mt-2 opacity-50 mb-4;
  }

  blockquote + h2,
  p + h2,
  ul + h2,
  table + h2 {
    @apply mt-10;
  }

  h1 {
    @apply text-4xl mb-4 -ml-[0.05em] pb-2 border-b-2 border-orange-600;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-base;
  }

  h6 {
    @apply text-sm pt-1 uppercase tracking-widest font-500 -ml-[0.05em];
  }

  h6:not(.opacity-100) {
    @apply opacity-40;
  }

  ul,
  ol {
    @apply mb-5;

    ul,
    ol {
      @apply mb-0;
    }
  }

  ul li {
    list-style-type: "\2794  ";
  }

  strong {
    @apply text-orange-500;
  }

  img {
    @apply rounded-md;
  }

  table.compact td,
  table.compact th {
    @apply py-1;
  }

  table th {
    @apply font-bold;
  }

  table.v-lines td {
    @apply border-l first:border-l-0 border-gray;
  }

  o {
    @apply underline -underline-offset-[1rem];
  }

  .flex-layout {
    @apply flex items-start justify-between gap-5;
  }

  .cols-layout {
    @apply grid grid-cols-2 gap-8;
  }

  .row-layout {
    @apply flex gap-5 items-center justify-evenly mt-8;
  }

  .image-fill {
    @apply flex-1 flex justify-center items-center overflow-hidden;

    img {
      @apply h-auto w-auto max-h-full max-w-full block;
    }
  }
}

.slidev-layout.cover,
.slidev-layout.intro {
  @apply h-full grid;

  h1 {
    @apply text-6xl leading-20;
  }
}

.slidev-layout.fact {
  @apply text-center grid h-full;
  h1 {
    @apply text-8xl font-700;
  }
  h1 + p {
    @apply font-700 text-2xl;
  }
}
.slidev-layout.statement {
  @apply text-center grid h-full;

  h1 {
    @apply text-6xl font-700;
  }
}
.slidev-layout.quote {
  @apply grid h-full;

  h1 + p {
    @apply mt-2;
  }
}
.slidev-layout.section {
  h1 {
    @apply text-6xl font-500 leading-20;
  }
}