* {
font-family:Arial,"Microsoft YaHei",黑体,宋体,sans-serif;
margin:0;
padding:0;
}

body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
background-image:linear-gradient(125deg,#fdcbf1,#e6dee9,#a1c4fd,#a8edea,#d299c2);
background-size:cover;
z-index:-1;
}

.container {
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:50%;
}

.bg-user {
width:300px;
background-color:#fff;
border-radius:15px;
transition:.3s;
padding:20px;
}

.top {
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}

.top > img {
width:100%;
height:200px;
border:0 solid #fff;
border-radius:15px;
}

.index-box h3 {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    color: #666;
    font-weight: 700;
    font-size: 16px;
}

.circle {
position:relative;
margin-top:-50px;
}

.circle > img {
border:0 solid #fff;
height:80px;
width:80px;
border-radius:50%;
}

.user-title {
position:absolute;
top:18px;
display:inline;
margin-left:10px;
color:#ffffff;
font-size:15px;
font-weight:500;
}

.user-qq {
position:absolute;
bottom:10px;
display:inline;
margin-left:10px;
font-size:15px;
font-weight:500;
}

.sign-text {
text-align:left;
font-size:.85rem;
margin-top:10px;
cursor:default;
}

.sign-text:hover {
transition:.3s;
color:#007bff;
transform:scale(1.05);
}

.sign-text>img {
width:15px;
height:15px;
}

.btn-blue {
display:block;
width:100%;
height:40px;
margin-top:10px;
background-color:#a1c4fd;
border:2px solid #a1c4fd;
border-radius:5px 5px 5px 5px;
outline:none;
color:#fff;
transition:.3s;
transform:translateZ(0);
border-color:#a1c4fd;
}

.btn-music {
display:block;
width:100%;
height:40px;
margin-top:10px;
background-color:#fecfef;
border:2px solid #fecfef;
border-radius:5px 5px 5px 5px;
outline:none;
color:#fff;
transition:.3s;
border-color:#fecfef;
}

.btn-blue:hover,.btn-music:hover {
transform:scale(1.01);
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
}