css and svg

// globals.css

@import url('https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

h1,
h2,
h3,
h4,
h5,
a,
span,
p {
  font-family: 'Advent Pro', sans-serif;
}

.shine-text {
  color: transparent;
  background-clip: text !important;
  animation: shine 3s linear infinite;
}

.shine-text {
  background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.85),
        #f000
      ) -200% 50% / 200% 100% no-repeat,
    #000;
}

@keyframes shine {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}





// Down Arrow SVG
<svg
className="hs-dropdown-open:rotate-180 size-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>


//