/*使所有元素的内边距和外边距为0*/
*{
    padding: 0;
    margin: 0;
}

/*让 html 撑满视口，body 才能以视口高度为基准铺满背景*/
html {
    height: 100%;
}

/*设置body的背景图片和字体*/
body {
    width: 100%;
    min-height: 100%;
    background: url("../img/背景.jpg") no-repeat center center;
    background-size: cover;
    font-family: "微软雅黑";
}

/*设置导航栏的样式*/
.nav {
    width:100%;
    height: 40px;
    background-color: rgba(255, 255, 255, 50%);
    box-shadow: -4px 4px 6px rgba(116, 120, 122, 50%);
}

/*导航栏超链接样式*/
.position{
    position: absolute;
    right: 200px;
    top: 9px;
}

.href{
    display: inline-block;
    text-decoration: none;
    color: rgb(116,120,122);
    font-size: 1em;
    margin-left: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.href:hover{
    transform: translateY(-3px);
}

/*进入样式*/
.box{
    width: 600px;
    height: 700px;
    background-color: rgba(255, 255, 255, 50%);
    position: relative;
    top: 100px;
    margin: 0 auto;
    border-radius: 20px;
}
/*头像样式*/
.Avatar{
    width:100px;
    height:100px;
    border-radius: 50%;
    margin-left: 41.8%;
    overflow: hidden;/*保证图片的四个角被裁切*/
    position: relative;
    top: 50px;
    border: 2px solid pink;
    transition: all 0.3s ease;
}
/*头像样式*/
.Avatar:hover{
    transform:scale(1.1);   
}

.Avatar img{
    width:100%;
    height:100%;
    object-fit: cover;/*防止头像变形，保持比例*/
}

/*名字与内容样式*/
.name{
    text-align:center;
    position: relative;
    top: 100px;

}

.name h1{
    font-size:2em;
    font-weight: bold;
    font-family: "ZCOOL Kursive", cursive;
}

.name p{
    font-family:"Georgia",serif;
    font-size: 1.6em;
    text-align: center;
    color: rgb(116,120,122);
    margin-top: 40px;
    line-height: 1.8;
    letter-spacing: 0.5px;
}

/*按钮样式*/
.button{
    /*定位*/
    position: relative;
    left:50%;
    top: 130px;
    transform: translateX(-50%);
    /*按钮*/
    display:block;
    width: 200px;
    height: 75px;
    border-radius: 50px;
    background-color:rgba(208,231,245,0.8);
    /*字体*/
    text-align: center;
    line-height: 75px;
    font-size: 1.5em;
    text-decoration: none;
    color:rgb(255,254,248);
    /*过渡效果*/
    transition: all 0.3s;
    cursor: pointer;
}

.button:hover{
    transform: translateX(-50%) translateY(-5px);
    box-shadow: 5px 5px 5px 5Spx rgb(255,254,248);
}