html {
  @apply text-base h-screen;
}

body {
  @apply font-secondary font-normal leading-relaxed text-txt-s dark:text-darkmode-txt-s;
  @apply bg-bg-p dark:bg-darkmode-bg-p;
  @apply flex flex-col min-h-screen lg:mx-8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-primary font-bold leading-tight text-txt-p dark:text-darkmode-txt-p intersect:animate-fade opacity-0;
  // @apply font-primary font-bold leading-tight bg-gradient-to-r from-orange-500 via-indigo-500 to-green-500 text-transparent bg-clip-text;
}
h1,
.h1 {
  @apply text-h1-sm md:text-h1;
}
h2,
.h2 {
  @apply text-h2-sm md:text-h2;
}
h3,
.h3 {
  @apply text-h3-sm md:text-h3;
}
h4,
.h4 {
  @apply text-h4 font-medium;
}
h5,
.h5 {
  @apply text-h5 font-medium;
}
h6,
.h6 {
  @apply text-h6 font-medium;
}

p {
  @apply intersect:animate-fade opacity-0;
}

b,
strong {
  @apply font-semibold;
}

img {
  @apply mx-auto;
}

a:hover,
.a:hover {
  @apply opacity-60;
}

hr {
  @apply border-border dark:border-darkmode-border;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.katex {
  .base {
    @apply text-txt-s dark:text-darkmode-txt-s;
  }
}

html.dark .astro-code,
html.dark .astro-code span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}

// code {
//   @apply after:border-none;
// }
