@keyframes logo-arrow-bounce {
    0% {
        transform: translateY(0);
    }

    20%,
    50%,
    80%,
    100% {
        transform: translateY(-3rem);
    }

    40% {
        transform: translateY(-2rem);
    }

    60% {
        transform: translateY(-2.5rem);
    }
}

@-webkit-keyframes logo-arrow-bounce {
    0% {
        transform: translateY(0);
    }

    20%,
    50%,
    80%,
    100% {
        transform: translateY(-3rem);
    }

    40% {
        transform: translateY(-2rem);
    }

    60% {
        transform: translateY(-2.5rem);
    }
}

@keyframes logo-bounce {
    0% {
        transform: translateY(-3rem);
    }

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

    40% {
        transform: translateY(0.5rem);
    }

    60% {
        transform: translateY(0.25rem);
    }
}

@-webkit-keyframes logo-bounce {
    0% {
        transform: translateY(-3rem);
    }

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

    40% {
        transform: translateY(0.5rem);
    }

    60% {
        transform: translateY(0.25rem);
    }
}

.logo-bounce:hover {
    -webkit-animation-name: logo-arrow-bounce;
    animation-name: logo-arrow-bounce;
    animation-duration: 0.75s;
    animation-fill-mode: both;
    animation-timeline: both;
}

.logo-bounce {
    -webkit-animation-name: logo-bounce;
    animation-name: logo-bounce;
    animation-duration: 0.75s;
    animation-fill-mode: both;
}

/* form#nav-search-form:focus-within #nav-search-result {
    display: block;
} */

/* input#sidebar-expanded + #sidebar {
    width: 1000px;
}
input#sidebar-expanded:checked + #sidebar {
    width: 500px;
} */

.main-indicator {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request.main-indicator {
    display: block;
    opacity: 1
}

.tr-indicator {
    display: none;
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request.tr-indicator {
    display: flex;
    opacity: 1
}


.spinning-button {
    display: none;
}

.htmx-request .spinning-button {
    display: block;
}

.htmx-request.spinning-button {
    display: block;
}

.htmx-request.spinning-button~span {
    display: none;
}