/* Animations */

/* Navbar item animation */
@keyframes nav-item-hover-pull {
    50% {
        background-color: rgb(255, 217, 0);
        padding: 10px 20px;
    }
    100% {
        transform: translateY(0px);
        background-color: rgb(255, 217, 0);
        color: #023047;
        padding: 10px 20px;
        border-radius: var(--nav-sub-border-radius);
    }
}

/* Content slide-in animation */
@keyframes slide-in {
    0% {
        transform: translateX(-40px);
        filter: blur(2px);
    }
    60% {
        transform: translateX(-10px);
        filter: none;
    }
    100% {
        transform: translateX(0px);
    }
}

/* Fade-in hover background color change (looks nicer) */
@keyframes button-hover-pull {
    100% {
        background-color: gold;
    }
}

/* Make the "join newsletter" button dissapear once you click it. */
@keyframes disappear {
    0%{
        width: 100%;
        margin: auto;
    }
    100% {
        width: 10%;
        margin: auto;
        pointer-events: none;
        background-color: gold;
        min-width: 10px;
        min-height: 10px;
    }
}