@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');


.font-dm-sans{
    font-family: "DM Sans", sans-serif;
}

.font-raleway{
    font-family: "Raleway", serif;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: "DM Sans", sans-serif;
    font-style: normal;
}

.heading-green{
    background: linear-gradient(90deg, #C3C412 0%, #98C426 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-blue{
    background: linear-gradient(90deg, #34ABE1 0%, #118cd8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-green-blue{
    background: linear-gradient(90deg, #98C426 0%, #34ABE1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-blue-green{
    background: linear-gradient(90deg, #34ABE1 0%, #98C426 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.animate-title{
    left: 0;
    animation: titleSlide 2s ease-in infinite;
}

@keyframes titleSlide{
    0%{
        left: 0;
    }
    50%{
        left: calc(100% - 5px);
    }
    100%{
        left: 0;
    }
}