@import 'tailwindcss';

@theme inline {
  --color-charcoal: #2f3e46;
  --color-nyanza: #eaf4d3;

  --font-body: var(--font-archivo-narrow);
  --font-heading: var(--font-rader);
  --bg-flowers: url('/src/assets/bg.svg');
}

@layer components {
  .social-btn {
    @apply bg-nyanza/10 backdrop-blur-[2px] border-2 border-charcoal hover:brightness-90 p-2 rounded-sm hover:rounded-3xl flex items-center justify-center duration-100 ease-in-out;
  }
}

@keyframes pan-bg {
  100% {
    background-position: var(--bg-size) var(--bg-size);
  }
}