/* section style */
.section {
  @apply py-24 xl:py-28;
}

.section-sm {
  @apply py-16 xl:py-20;
}

/* container */
.container {
  @apply mx-auto max-w-[1320px] px-4;
}

/* social icons */
.social-icons {
  @apply space-x-4;
}
.social-icons li {
  @apply inline-block;
}
.social-icons li a {
  @apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
}
.social-icons li a svg {
  @apply h-5 w-5;
}

/* content style */
.content {
  @apply prose max-w-none;
  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark dark:prose-headings:text-darkmode-dark;
  @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
  @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
  @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
  @apply prose-img:max-w-full prose-img:rounded;
  @apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
  @apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-theme-light dark:prose-blockquote:text-darkmode-light;
  @apply prose-pre:rounded-lg prose-pre:bg-theme-light dark:prose-pre:bg-darkmode-theme-light;
  @apply prose-code:px-1 prose-code:text-primary dark:prose-code:text-darkmode-primary;
  @apply prose-strong:text-dark dark:prose-strong:text-darkmode-text;
  @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary dark:prose-a:text-darkmode-text dark:prose-a:hover:text-darkmode-primary;
  @apply prose-li:text-text dark:prose-li:text-darkmode-text;
  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
  @apply prose-thead:border-border prose-thead:bg-theme-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-theme-light;
  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark dark:prose-th:text-darkmode-text;
  @apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
}

.content .btn {
  @apply dark:hover:text-dark no-underline hover:!text-white;
}