@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&display=swap');
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-flyer-yellow: #DEE213;
  --color-flyer-black: #171512;
  --color-flyer-cream: #FAF7EC;

  --font-roboto: Roboto, sans-serif;
  --font-stick: "Stick No Bills", sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes photo-sway {
  0%, 100% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-2deg);
  }
}

.animate-photo-sway {
  animation: photo-sway 5s ease-in-out infinite;
}

.bg-halftone {
  background-image: radial-gradient(rgba(23, 21, 18, 0.12) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}