/* animation part */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes shake {

    0%,
    50% {
        transform: translateX(-5px)
    }

    25%,
    75% {
        transform: translateX(5px)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes fadeInBackground {
    from {
        backdrop-filter: blur(0px);
        background-color: rgba(0, 0, 0, 0)
    }

    to {
        backdrop-filter: blur(3px);
        background-color: rgba(0, 0, 0, .3)
    }
}

@media only screen and (max-width: 600px) {
    @keyframes fadeInBackground {
        from {
            backdrop-filter: blur(0px);
            background-color: rgba(0, 0, 0, 0)
        }
    
        to {
            backdrop-filter: blur(0px);
            background-color: rgba(0, 0, 0, .3)
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important
    }
}

@keyframes slideUp {
    from {
        transform: translateY(80px);
        opacity: 0
    }

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

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(80px);
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px)
    }

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

@keyframes growButton {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.05)
    }
}

@keyframes fadeInPopup {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

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

@keyframes fade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes bounceIn {

    0%,
    100%,
    20%,
    50%,
    80% {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-10px)
    }

    60% {
        transform: translateY(-5px)
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

@keyframes hoverGrow {
    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.05)
    }
}

@keyframes rotate360 {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

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

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0)
    }

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