@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-size: 16px;
}

.katex {
  font-size: 1em !important;
}

.katex-display > .katex {
  overflow-x: auto;
  overflow-y: hidden;
}

.HKU {
  background: linear-gradient(
    90deg,
    #019cd5 25%,
    #02b38d 35%,
    #02b38d 65%,
    #ef4022 75%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

article {
  li {
    margin: 0 !important;
  }

  table {
    background-color: hsl(var(--card) / 0.4) !important;
    width: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  th {
    background-color: hsl(var(--muted) / 0.4) !important;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --color-1: 0 100% 63%;
    --color-2: 270 100% 63%;
    --color-3: 210 100% 63%;
    --color-4: 195 100% 63%;
    --color-5: 90 100% 63%;
  }
}

@layer base {
  @layer utilities {
    .step {
      counter-increment: 1;
      position: relative;
    }

    .step:before {
      @apply absolute w-[25px] h-[25px] bg-muted flex items-center justify-center rounded-full -left-[42px] -top-[2px];
      content: counter(step);
    }

    .bar {
      position: relative;
    }

    .bar:before {
      @apply absolute w-[20px] h-[2px] bg-muted-foreground rounded-full -left-[35px] top-[13px];
      content: "";
    }
  }
}

.h1 {
  @apply mb-8 relative max-w-[43.5rem] text-balance font-semibold tracking-tighter text-5xl sm:text-7xl md:text-7xl lg:text-7xl;
}

details summary::-webkit-details-marker {
  display: none;
}

/* invert images in dark mode */

.dark img,
.dark picture {
  filter: invert(1) hue-rotate(180deg);
}
