@import "tailwindcss";

@theme {
    --color-primary: #fafafa;
    --color-secondary: #171717;
    --color-primary-green: #8DECB4;
    --color-primary-blue: #3f84d8;
    --color-light-blue: #b3c6f9;
    --header-height: 3.5rem;
    --color-hero-gradient: linear-gradient(to right, #3F84D8, aquamarine);

    --animate-gradient: gradient 15s ease infinite;

    @keyframes gradient {
        "0%": {
            "background-position": "0% 50%",
        }
        "50%": {
            "background-position": "100% 50%",
        }
        "100%": {
            "background-position": "0% 50%",
        }
    }

    @keyframes fadeIn {
        from: {
            opacity: "0",
        }
        to: {
            opacity: "1",
        }
    }
}