/* ======== DOCK HTML ========= */

.dock_html_container {
    align-items: center;
    justify-content: center;
}

.dock_html_title {
    padding-block: 2rem;
}

.dock_html_data {
    transform-origin: center center;
    will-change: transform, opacity;
    row-gap: 0;
}

.pop-in {
    animation: popIn .35s ease-out;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.75);
    }

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

.dock_html_data h4 {
    color: var(--button-color);
    font-size: var(--h3-font-size);
    margin-bottom: 1rem;
}

.filter_controls {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.filter_controls button {
    padding: .5rem 1rem;
    background: var(--container-color);
    color: var(--title-color-2);
    border-radius: 10px;
    cursor: pointer;
    transition: .5s;
}

.filter_controls button:hover {
    background-color: var(--title-color-2);
    color: var(--body-color);
}

.mixitup-control-active {
    background-color: var(--title-color-2) !important;
    color: var(--body-color) !important;
}