@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";

@theme {
  --font-fredoka: "Fredoka", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-oswald: "Oswald", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-roboto: "Roboto", sans-serif;
  --font-space: "Space Grotesk", sans-serif;
}

body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

.font-fredoka { font-family: var(--font-fredoka); }
.font-inter { font-family: var(--font-inter); }
.font-montserrat { font-family: var(--font-montserrat); }
.font-oswald { font-family: var(--font-oswald); }
.font-poppins { font-family: var(--font-poppins); }
.font-roboto { font-family: var(--font-roboto); }
.font-space { font-family: var(--font-space); }