body {
    height: 100vh;
    background: url("../img/back.png");
    background-size: contain;
    user-select: none;
}

.diban {
    position: fixed;
    width: 100%;
    height: 112px;
    left: 0;
    bottom: 0;
    background: red;
}

.diban img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bird {
    position: fixed;
    left: 100px;
    width: 34px;
    height: 24px;
    transition: all linear 0.15s;
    z-index: 999;
}

.pipe {
    position: fixed;
    width: 55px;
    z-index: 998;
    transition: all linear 0.1s;
}

.pause {
    position: fixed;
    top: 30px;
    left: 30px;
    cursor: pointer;
    z-index: 999;
}

.score {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
.up {
    transform: rotate(-38deg);
}
.down {
    transform: rotate(90deg);
}

/* .birdDefault {
    animation: birdDefault 0.4s linear infinite reverse;
}


.birdBlue {
    animation: birdBlue 0.4s linear infinite reverse;
}

.birdRed {
    animation: birdRed 0.4s linear infinite reverse;
} */

@keyframes birdShake {
    0% {
        transform: translateY(0px);
    }

    33% {
        transform: translateY(15px);
    }

    100% {
        transform: translateY(0px);
    }
}


@keyframes birdDefault {
    0% {
        background: url("../img/hn1.png");
    }

    33% {
        background: url("../img/hn2.png");
    }

    100% {
        background: url("../img/hn3.png");
    }
}


@keyframes birdBlue {
    0% {
        background: url("../img/hn_blue_1.png");
    }

    33% {
        background: url("../img/hn_blue_2.png");
    }

    100% {
        background: url("../img/hn_blue_3.png");
    }
}

@keyframes birdRed {
    0% {
        background: url("../img/hn_red_1.png");
    }

    33% {
        background: url("../img/hn_red_2.png");
    }

    100% {
        background: url("../img/hn_red_3.png");
    }
}


.bird_title {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    text-align: center;
    z-index: 999;
}
.bird_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bird_list img {
    cursor: pointer;
}