* {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
    font-size: 20px;
    list-style: none;
}



a{
    text-decoration: none;
    color: rgb(231, 231, 231);
}
body{
    background: rgb(231, 231, 231);
}
#playing{
    background: rgb(54, 54, 54);
}
/*歌手头像*/
#headPicture{
    border-radius: 50%;
    cursor: pointer;
    margin: 50px auto;
}
#boximg {
    margin: 50px auto;
    /* 定义磁盘图片 */
    background: url("../img/record.png");
    background-size: 350px 350px;
    width: 350px;
    height: 350px;
    /* 定义动画 */
    -webkit-animation: rotateImg 30s linear infinite;
}
#like{
    cursor: pointer;
}
#collect{
    cursor: pointer;
}

#song{
    letter-spacing: 2px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
}
#singer{
    font-size: 15px;
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
}
#lyric{
    width: 500px;
    height: 500px;
    border: none;
    margin: 0px auto;
    text-align: center;
    letter-spacing: 5px;
    overflow-y: auto;
    font-size: 15px;
    /* background-color: aqua; */
}

#previous,#next{
    margin: 25px 10px;
    display: block;
    float: left;
    cursor: pointer;
    width: 30px;
    height: 30px;
}
#start{
    float: left;
    margin: 20px 10px;
    display: block;
    cursor: pointer;
    width: 40px;
    width: 40px;
}
#musicNow{
    float: left;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    letter-spacing: 5px;
}
#playTime{
    float: right;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    cursor: pointer;
    color: rgb(255, 255, 255);
    letter-spacing: 3px;
    
}
#progressBar{
    margin-top: 50px;
    margin-bottom: 30px;
    height: 5px;
    width: 800px;
    background-color: rgb(223, 223, 223);
    border-radius: 50px;
}
#progress{
    height: 5px;
    width: 0px;
    cursor: pointer;
    background: rgb(229, 18, 24);
    border-radius:50px ;
}
.father {
    margin: 0 auto;
    width: 1450px;
    text-align: center;
}
.Bar{
    width: 100%;
    height: 100px;
    background: rgb(36, 36, 36);
    position:absolute;/*绝对定位*/
    z-index: -1;
}
.boxBar{
    width: 1450px;
    float:left;
    height: 100px;
    background: rgb(36, 36, 36);
}
.logo{
    margin: 20px auto;
    margin-left: 50px;
    margin-right: 25px;
    float: left;
}
.boxBar span{
    line-height: 100px;
    font-size: 40px;
    float: left;
    color: rgb(231, 231, 231);
}
.BavItem{
    margin-left: 450px;
}
.BavItem li{
    float: left;
    line-height: 100px;
    width: 200px;
    height: 100px;
    transition:  0.3s  ease-in-out
}
.box0{
    margin: 0px auto;
    width: 1400px;
    height: 700px;
}
.boxLeft{
    /* 控制整个图像与浏览器的距离 */
    padding: 25px 0;
    margin-left: 150px;
    margin-right: 100px;
    float: left;
    width: 500px;
    height: 450px;
}
    

.boxRight {
    width: 650px;
    height: 600px;
    float: right;
    text-align: center;
    color: rgb(0, 0, 0);
}



.boxCenter{
    /* margin: 0px 100px; */
    margin-left: 175px;
    margin-right: 125px;
    width: 450px;
    height: 50px;
    padding: 5px auto;
    float: left;
    padding-bottom:50px;
}
.centerItem li{
    display: inline-block;
    list-style: none;
    width: 40px;
    height: 40px;
    margin:0 25px;
}
.boxBottom{
    position: fixed;
    bottom: 0px;
    float: left;
    width: 100%;
    height: 80px;
    background: rgb(36, 36, 36);
}
.bottomValue{
    width: 1450px;
    height: 80px;
    margin: 0px auto;
    padding: 0 25px;
}
.left{
    float: left;
    width: 160px;
    height: 80px;
    padding: 0px 70px;
}
.center{
    float: left;
    width: 800px;
    height:80px;
    /* background-color: blueviolet; */
}
.right{
    float: left;
    width: 300px;
    height:80px;
    /* background-color: rgb(43, 226, 83); */
}
@keyframes rotateImg {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.BavItem li:hover{
    background: rgb(54, 54, 54);
}