body{
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.headerSlide{
    animation: slideUp both;
    animation-timeline: view(10% 5%);
    /* animation-range: ; */
}

@keyframes slideUp {
    0%{
        opacity: 0;
        transform:translateY(100px);
    }

    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.card-slideUp{
    animation: cardSlideUp both;
    animation-timeline: view(25% 20%);
    animation-range: entry 20% cover 40%;
}

@keyframes cardSlideUp {
    0%{
        opacity: 0;
        transform: translateY(10px) scale(.5);
    }
    100%{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.slidefromleft{
    animation: slideLeft both;
    animation-timeline: view(60% 5%);
}

@keyframes slideLeft {
    0%{
        filter: blur(10px);
        transform: translateY(20px);
    }

    100%{
        filter: blur(0);
        transform: translateX(0) scale(1.1);
    }
}

.slidefromright{
    animation: slideRight both;
    animation-timeline: view(60% 5%);
}

@keyframes slideRight {
    0%{
        filter: blur(10px);
        transform: translateY(40px);
    }

    100%{
        filter: blur(0);
        transform: translateX(0) scale(1.1);
    }
}