body {
    background-image: url('../img/background.jpg');   /* 设置背景图片的URL */
    background-repeat: no-repeat; /* 防止背景图片重复显示 */   
    background-size: cover; /* 使用cover值使背景图片完全覆盖容器 */
    background-position: center; /* 设置背景图片在容器中居中 */
    height: 100vh; /* 设置容器的高度为视窗高度，以确保背景图片能够充满整个视窗 */
    margin: 0;
}

.loginCard {
    position: relative;
    padding: 100px 200px;
    position: relative;
    /* 设置容器为相对定位 */
    /*外边框尺寸-自适应*/
    width: fit-content;
    width: 80px;
    /* 设置容器的宽度为400像素 */
    height: 200px;
    /* 设置容器的高度为200像素 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 50%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 50%;
    /* 通过left属性设置按钮在容器内水平居中 */
    transform: translate(-50%, -50%);
    /* 使用transform属性进行水平和垂直方向上的居中偏移 */
    /*边框-颜色*/
    border: 2px solid rgb(149, 240, 235);
    /*外边框角度圆滑*/
    border-radius: 10px;
    background-color: transparent;
    /* 设置容器背景为透明 */
    /*边框阴影*/
    box-shadow: 0px 0px 0px 0px rgb(233, 200, 200);
}

/*头标属性*/
h1 {
    color: rgb(39, 41, 40);
    /* 设置文字的初始文字颜色 */
    position: absolute;
    /* 设置文字为绝对定位 */
    top: 3%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 35%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

/*分割线*/
.a-div {

    width: 480px;
    /* 设置边框长度为300px */
    margin-left: -250%;
    /* 设置左边距为 */
    border-bottom: 2px solid #b6f592;
    /* 设置边框样式 */
    padding-bottom: -40%;
    /* 设置容器内部内容与底部边框的距离 */
}


/*邀请码输入框属性*/
.input-code {
    position: absolute;
    /* 设置输入框为绝对定位 */
    top: 28%;
    /* 通过top属性设置输入框在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置输入框在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 200px;
    /* 调整输入框的宽度 */
    padding: 8px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色，并将透明度设置为50% */
}

/*邀请码输入框占位符颜色*/
.input-code::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}

.img-code {
    width: 25px;
    /* 设置图片宽度 */
    height: auto;
    /* 根据宽度自动调整高度 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 29.5%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

/*用户名输入框属性*/
.input-username {
    position: absolute;
    /* 设置输入框为绝对定位 */
    top: 40%;
    /* 通过top属性设置输入框在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置输入框在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 200px;
    /* 调整输入框的宽度 */
    padding: 8px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色，并将透明度设置为50% */
}

/*用户名输入框占位符颜色*/
.input-username::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}

.img-username {
    width: 25px;
    /* 设置图片宽度 */
    height: auto;
    /* 根据宽度自动调整高度 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 42%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

/*账号输入框属性*/
.input-account {
    position: absolute;
    /* 设置输入框为绝对定位 */
    top: 52%;
    /* 通过top属性设置输入框在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置输入框在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 200px;
    /* 调整输入框的宽度 */
    padding: 8px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色，并将透明度设置为50% */
}

/*账号输入框占位符颜色*/
.input-account::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}

/*账号输入框图标*/
.img-account {
    width: 25px;
    /* 设置图片宽度 */
    height: auto;
    /* 根据宽度自动调整高度 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 53%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}


/*密码输入框属性*/
.input-passwd {
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 64%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置按钮在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 200px;
    /* 调整输入框的宽度 */
    padding: 8px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色为红色，并将透明度设置为50% */
}

/*密码输入框占位符文字颜色*/
.input-passwd::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}

/*密码输入框图标*/
.img-passwd {
    width: 25px;
    /* 设置图片宽度 */
    height: auto;
    /* 根据宽度自动调整高度 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 65.5%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

/*邮箱输入框属性*/
.input-Email {
    position: absolute;
    /* 设置输入框为绝对定位 */
    top: 76%;
    /* 通过top属性设置输入框在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置输入框在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 200px;
    /* 调整输入框的宽度 */
    padding: 8px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色，并将透明度设置为50% */
}

/*邮箱输入框占位符颜色*/
.input-Email::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}

.img-Email {
    width: 25px;
    /* 设置图片宽度 */
    height: auto;
    /* 根据宽度自动调整高度 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 77.5%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

/*注册按钮*/
.login-button {

    border-radius: 10px;
    /*按钮边框圆角*/
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 91%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 84%;
    /* 通过left属性设置按钮在容器内水平居中 */
    background-color: #f3f2ce;
    /* 设置按钮的背景颜色为红色 */
    width: 70px;
    /*尺寸*/
    height: 30px;
    /*高度*/
    background-color: rgba(240, 238, 238, 0.5);
    /* 设置输入框的背景颜色为红色，并将透明度设置为50% */
}

.login-button:hover {
    background-color: rgb(241, 203, 240);
    /* 设置鼠标停放时按钮的背景颜色 */
}


.password-button:hover {
    color: rgb(62, 43, 240);
    /* 设置鼠标停留时按钮的文字颜色 */
}