change design;

src/app/globals.css

@@ -1,3 +1,51 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@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";
+@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;
+}