@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg)
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg)
    }

    20% {
        transform: translate(-3px) rotate(1deg)
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg)
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg)
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg)
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg)
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg)
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg)
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg)
    }

    to {
        transform: translate(1px, -2px) rotate(-1deg)
    }
}

@keyframes move {
    0% {
        transform: translate(0)
    }

    50% {
        transform: translateY(5px)
    }

    to {
        transform: translate(0)
    }
}

@keyframes loader {
    0% {
        transform: translate(-50%, -50%)
    }

    50% {
        transform: translate(-50%, -55%) rotate(180deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes shadow {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

@keyframes bounce {

    0%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    50% {
        transform: translate(-50%, -50%) scale(1)
    }
}

.bingoList {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    margin: auto auto 1em
}

.bingoList_title {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 2;
    background: #4c0006;
    margin: 1px 0
}

.bingoList_item {
    width: 10%;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding: 1px
}

.bingoList .bingo_number,
.bingoList .bingo_point {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5
}

.bingoList .bingo_number {
    color: #000;
    background: hsla(0, 0%, 100%, .8)
}

.bingoList .bingo_point {
    background: rgba(252, 238, 33, .8);
    color: #c1272d
}

[data-page=bingoHistory] .bingoHistoryList {
    margin-bottom: 2em
}

[data-page=bingoHistory] .bingoList_title {
    display: flex;
    justify-content: space-around;
    text-align: center
}

[data-page=bingoHistory] .bingoList_title label {
    cursor: pointer
}

[data-page=bingoHistory] input[type=checkbox]:checked~.bingoList .bingo_number {
    display: none
}

[data-page=bingoHistory] .show_hide {
    position: absolute;
    opacity: 0;
    pointer-events: none
}