.slidev-layout {
  @apply h-full;
  @apply bg-light-background text-light-text dark:(bg-dark-background text-dark-text)
    @apply px-14 py-10 text-[1.1rem];

  h1,
  h2,
  h3,
  h4,
  p,
  div {
    @apply select-none;
  }

  pre,
  code {
    @apply select-text;
  }

  .line {
    @apply text-[#C6C6C7];
  }

  p > code {
    @apply text-light-code-lang dark:text-dark-code-lang;
    @apply bg-light-code-lang dark:bg-dark-code-lang;
    padding: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.85em;
    border-radius: 3px;
  }

  h1 {
    font-family: "Domine";
    @apply text-4xl text-light-link dark:text-dark-link font-bold mb-4 -ml-[0.05em];
  }

  h2 {
    font-family: "Domine";
    @apply text-3xl font-bold text-light-link dark:text-dark-link;
  }

  h3 {
    font-family: "Domine";
    @apply text-sm text-light-link dark:text-dark-link pt-2 uppercase tracking-widest font-500 -ml-[0.05em];
  }

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

  p {
    @apply my-4 leading-6;
  }

  h1 + p {
    @apply -mt-2 opacity-70 mb-6;
  }

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

  ul {
    list-style: square;
  }

  li {
    @apply ml-1.1em pl-0.2em leading-1.8em;
  }

  blockquote {
    @apply text-sm px-2 py-1 bg-$prism-background border-primary border-left rounded;
  }

  blockquote > * {
    @apply my-0;
  }

  table {
    @apply w-full;
  }

  tr {
    @apply border-b border-gray-400 border-opacity-20;
  }

  th {
    @apply text-left font-400;
  }

  a {
    @apply border-current border-b border-dashed hover:(text-primary border-solid);
  }

  td,
  th {
    @apply p-2 py-3;
  }

  b,
  strong {
    @apply font-600;
  }

  kbd {
    @apply border border-gray-400 border-b-2 border-opacity-20 rounded;
    @apply bg-gray-400 bg-opacity-5 py-0.5 px-1 text-sm font-mono;
  }
}