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

@layer base {
  :root {
    --background: 216 100% 100%;
    --foreground: 216 5% 10%;
    --card: 216 50% 100%;
    --card-foreground: 216 5% 15%;
    --popover: 216 100% 100%;
    --popover-foreground: 216 100% 10%;
    --primary: 216 77.5% 13.9%;
    --primary-foreground: 0 0% 100%;
    --secondary: 216 30% 90%;
    --secondary-foreground: 0 0% 0%;
    --muted: 178 30% 95%;
    --muted-foreground: 216 5% 40%;
    --accent: 178 30% 90%;
    --accent-foreground: 216 5% 15%;
    --destructive: 0 100% 50%;
    --destructive-foreground: 216 5% 100%;
    --border: 216 30% 82%;
    --input: 216 30% 50%;
    --ring: 216 77.5% 13.9%;
    --radius: 1rem;
  }
  .dark {
    --background: 239 10% 10%;
    --foreground: 239 0% 90%;
    --card: 239 0% 10%;
    --card-foreground: 239 0% 90%;
    --popover: 239 10% 5%;
    --popover-foreground: 239 0% 90%;
    --primary: 239 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 239 10% 20%;
    --secondary-foreground: 0 0% 100%;
    --muted: 201 10% 25%;
    --muted-foreground: 239 0% 65%;
    --accent: 201 10% 25%;
    --accent-foreground: 239 0% 90%;
    --destructive: 0 50% 50%;
    --destructive-foreground: 239 0% 90%;
    --border: 239 20% 50%;
    --input: 239 20% 50%;
    --ring: 239 0% 100%;
    --radius: 1rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    padding-bottom: 1rem;
  }

  h1 {
    @apply scroll-m-20 text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-semibold;
  }

  h3 {
    @apply text-2xl font-medium;
  }

  h4 {
    @apply text-xl font-medium;
  }

  h5 {
    @apply text-lg font-medium;
    /* Add  h5 settings here */
  }

  h6 {
    @apply text-base font-medium;
  }
  li {
    margin-left: 2rem;
    padding-bottom: 0.1rem;
    list-style-type: square;
  }
  li li {
    list-style: circle;
  }
  li li li {
    list-style: disc;
  }
}

html,
body {
  overflow: auto;
}
