* {
     margin: 0;
     padding: 0;
 }

 html,
 body {
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     overflow: hidden;
     /* 防止出现滚动条 */
 }

 body {
     height: 100%;
     width: 100%;
     background-image: url(../img/back.jpg);
     background-size: cover;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 #background {
     width: 30%;
     height: 70%;
     background: linear-gradient(135deg, #D2B48C 0%, #87CEEB 100%);
     border-radius: 14px;
     opacity: 0.5;
 }

 #main {
     width: 30%;
     height: 70%;
     border-radius: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     z-index: 2;
     overflow: hidden;
     clear: both;
 }


 #profile {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 10%;
     color: #ffffff;
 }


 .profile {
     width: 20%;
     height: 20%;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px solid #000;
     border-radius: 50%;
     overflow: hidden;
 }

 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 #btn {
     width: 130px;
     height: 50px;
     border: 4px solid #ffffff;
     border-radius: 30px;
     clear: both;
     position: absolute;
     top: 80%;
     text-align: center;
     align-items: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 #btn div a {
     font-size: 30px;
     font-weight: 500;
     color: #ffffff;
     text-decoration: none;
 }

 .text {
     font-size: 15px;
     font-weight: 500;
     color: #ffffff;
     text-align: center;
     position: absolute;
     top: 55%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .text p {
     margin: 10px;
 }