@keyframes nav-hover {
    from {
        color: white;
        background-color: transparent; 
    } to {
        color: black;
        background-color: rgba(255, 255, 255, 0.8);
    }
}

@keyframes nav-sticky-hover {
    from {
        color: black;
        background-color: transparent;
    } 
    
    to {
        color: white;
        background-color: rgba(1, 1, 1, 0.4);
    }
}

@keyframes fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fall-in {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
    }
}

@keyframes fall-in {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
    }
}

@keyframes slide-left {
    from {
        transform: translateX(-100vw);
    }
}

@keyframes slide-right {
    from {
        transform: translateX(100vw);
    }
}

.fade-in {
    opacity: 1 !important;
    animation: fade-in 2s;
}

.fall-in {
    opacity: 1 !important;
    animation: fall-in 2s;
}

.slide-left {
    opacity: 1 !important;
    animation: slide-left 2s;
}

.slide-right {
    opacity: 1 !important;
    animation: slide-right 2s;
}
