.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .1);
    transition: all .2s
}

.app-header--scrolling-up {
    display: flex;
    opacity: 1;
    animation: slideInDown .2s
}

.app-header--scrolling-down {
    opacity: 0;
    z-index: -1 !important
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes bounceInShow {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    10% {
        opacity: 1;
        transform: scaleX(1)
    }

    20% {
        transform: scale3d(.9, .9, .9)
    }

    30% {
        transform: scaleX(1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    50% {
        transform: scaleX(1)
    }

    60% {
        transform: scale3d(.9, .9, .9)
    }

    70% {
        transform: scaleX(1)
    }

    80% {
        opacity: 1;
        transform: scale3d(.9, .9, .9)
    }

    90% {
        opacity: 1;
        transform: scale3d(1.01, 1.01, 1.01)
    }

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

@keyframes spinToX {
    0% {
        transform: rotate(0deg) scale(1)
    }

    50% {
        transform: rotate(45deg) scale(1.2)
    }

    to {
        transform: rotate(90deg) scale(1)
    }
}

body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden
}

body::-webkit-scrollbar {
    width: var(--chakra-space-1)
}

body::-webkit-scrollbar-thumb {
    background-color: var(--chakra-colors-_primary-600);
    border-radius: var(--chakra-radii-md)
}