@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --breakpoint-xl2: 1320px;
}


@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

* {
  box-sizing: border-box;

}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}



/* latest news scroll */

@keyframes animate-marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@layer utilities {
  .animate-marquee {
    animation: animate-marquee 50s linear infinite;
    will-change: transform;
    display: inline-block;
  }

  .animate-marquee:hover {
    animation-play-state: paused;
  }
}