* {
    margin: 0;
    padding: 0;
    list-style: none;
}


body {
    width: 100%;
    height: 100vh;
    background-image: url("../img/back.png");
    background-size: contain;
    /* 等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 */
    position: relative;
    overflow: hidden;   
    /* 超过部分隐藏 */
    user-select: none;
    /* 属性规定是否能选取元素的文本 */
}

.ground {
    position: absolute;
    width: 100%;
    height: 112px;  
    /* 高度为图片本身高度 */
    left: 0;
    right: 0;
    bottom: 0;
}
.pause {
    z-index: 1111;
}
.ground img {
    position: absolute;
    width: 100%;
    height: 100%;
}
.bird {
    width: 34px;
    height: 24px;
    position: absolute;
    left: 100px;
    transition: all linear 0.15s;
    /* 设置所有属性都有动画属性 以相同速度开始至结束的过渡效果 */
    z-index: 999;
}
.result {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    z-index: 999;
}
.up {
    transform: rotate(-38deg);
}
.down {
    transform: rotate(90deg);
}
.sg {
    width: 55px;
    position: absolute;
}

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

/* 定义一个动画实现来回移动的过程 */
@keyframes yellowbird {
    0% {
        background: url("../img/hn1.png");
    }
    50% {
        background: url("../img/hn2.png");
    }
    100% {
        background: url("../img/hn3.png");
    }
}
@keyframes bluebird {
    0% {
        background: url("../img/ln1.png");
    }
    50% {
        background: url("../img/ln2.png");
    }
    100% {
        background: url("../img/ln3.png");
    }
}
@keyframes redbird {
    0% {
        background: url("../img/red1.png");
    }
    50% {
        background: url("../img/red2.png");
    }
    100% {
        background: url("../img/red3.png");
    }
}
/* 定义一个动画使小鸟有3种动作 */

/* .bird_one {
    background: url("../img/hn1.png");
} */
/* 小鸟的初始状态 */
.start {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -40%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999;
}
.start .difficulty {
    cursor: pointer;
    background: #00000036;
    font-size: 20px;
    border-radius: 4px;

} 
.start .difficulty .simpleMode{
    margin-bottom: 10px;
}
.niao {
    position: absolute;
    top: 55%;
    left: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}
.niao .yellow {
    margin-right: 20px;
}
.niao .blue {
    margin-right: 20px;
}

.start .reset {
    width: 60px;
    margin-top: 20px;
    cursor: pointer;
    /* 是在计算机中将光标呈现为指示链接的指针（一只手） */
}



.show {
    display: block;
}

.hidden {
    display: none;
}
/* 定义两个通用css */