* {
    font-family: "Microsoft JhengHei", "LiHei Pro", "sans-serif";
}

#vue-content {
    /* horizontal center align */
    margin: 0 auto;
    /* normal width */
    max-width: 800px;
    margin-top: 50px;
}

.color-group {
    display: flex;
    flex-wrap: wrap;
}

.color-group.display-border {
    border: 1px dashed lightgray;
}

.color {
    overflow: hidden;
    cursor: move;
}

.color span {
    font-size: 50%;
}

.can-overflow {
    overflow: visible;
}

.shake {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-2px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(4px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-8px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(8px, 0, 0);
    }
}