/* animações */

@keyframes up {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0px)
    }
}

.animate-up {
    animation-name: up;
    animation-duration: 300ms;
    animation-fill-mode: backwards;
}

#logo {
    animation-delay: 50ms ;
}

.location{
    animation-delay: 100ms ;
}

main h1 {
    animation-delay: 150ms ;
}

.visit p {
    animation-delay: 200ms ;
}

.visit a {
    animation-delay: 250ms ; 
}


@keyframes right{
    from{
        transform: translateX(-100%)
    }

    to{
        transform: translateX(0)
    }
}

.animate-right{
    animation-name: right;
    animation-duration: 300ms;
}


@keyframes appear {
    from {
        opacity: 0;
    }
    
    to{
        opacity: 1;
    }
}

.animate-appear {
    animation-name: appear;
    animation-duration: 300ms;
    animation-fill-mode: backwards; /* a faz começar onde definiu aqui */
}