html {
    background-image: url('../img/background.jpg');
    /* 设置背景图片的URL */
    background-repeat: no-repeat;
    background-size: cover;
    /* 防止背景图片重复显示 */
    background-position:center;
    /* 设置背景图片在容器中居中 */
    height:100vh;
    /* 设置容器的高度为视窗高度，以确保背景图片能够充满整个视窗 */
    margin:0;
  }
  body {
    width: 100%;
    margin: 0;
    overflow: hidden; /*内容溢出元素边界时，超出部分将被隐藏*/
  }
.loginCard {
    position: relative;
    padding: 100px 200px;
    position: relative;
    /* 设置容器为相对定位 */
    /*外边框尺寸-自适应*/
    width: fit-content;
    width: 80px;
    /* 设置容器的宽度为80像素 */
    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: 27%;
    /* 通过left属性设置按钮在容器内水平居中 */
}

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

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

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

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

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

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

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

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

/*找回密码按钮*/
.password-button {
    color: rgb(46, 198, 236);
    /* 设置按钮的初始文字颜色 */
    position: absolute;
    /* 设置按钮为绝对定位 */
    top: 59.5%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 71%;
    /* 通过left属性设置按钮在容器内水平居中 */
    background-color: rgba(240, 238, 238, 0);
    /* 设置输入框的背景颜色，并将透明度设置为50% */
    border: none;
    /* 设置按钮的边框为none，即没有边框 */
}

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


/*记住密码容器*/
.remember-me {
    position: absolute;
    /* 设置为绝对定位 */
    top: 70%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置按钮在容器内水平居中 */
    display: flex;
    align-items: center;
    gap: 8px;
}

/*记住密码单选框*/
.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/*记住密码标签*/
.remember-me label {
    color: rgb(104, 238, 204);
    /* 设置记住密码的初始文字颜色 */
    font-size: 14px;
    cursor: pointer;
}

.remember-me label:hover {
    color: rgb(124, 111, 240);
    /* 设置鼠标停留时标签的文字颜色 */
}

/*登录按钮*/
.login-button {

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

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

/*注册按钮*/
.login-enroll {
    /* border-radius: 10px; 按钮边框圆角*/
    position: absolute;
    /* 设置按钮为绝对定位 */
    color: rgb(46, 198, 236);
    /* 设置按钮的初始文字颜色 */
    top: 93%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 87%;
    /* 通过left属性设置按钮在容器内水平居中 */
    /* background-color: #f3f2ce;  设置按钮的背景颜色为红色 */
    width: 70px;
    /*尺寸*/
    height: 30px;
    /*高度*/
    /*background-color: rgba(240, 238, 238, 0.5);  设置输入框的背景颜色为红色，并将透明度设置为50% */
}
.login-enroll:hover {
    color: rgb(124, 111, 240);
    /* 设置鼠标停留时按钮的文字颜色 */
}
.input-captcha{
    position: absolute;
    /* 设置按钮为绝对定位 */
    border-width: 0;
    /* 取消按钮的边框宽度 */
    top: 68%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 25%;
    /* 通过left属性设置按钮在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */
    width: 90px;
    /* 调整输入框的宽度 */
    padding: 10px;
    /* 调整输入框的内边距 */
    background-color: rgba(240, 238, 236, 0.3);
    /* 设置输入框的背景颜色为红色，并将透明度设置为50% */
}
/*验证码输入框占位符文字颜色*/
.input-captcha::placeholder {
    color: #2e2a2a;
    /* 设置占位符文字的颜色 */
}
.captcha-image{
     position: absolute;
    /* 设置按钮为绝对定位 */
    border-width: 0;
    /* 取消按钮的边框宽度 */
    top: 68%;
    /* 通过top属性设置按钮在容器内垂直居中 */
    left: 50%;
    /* 通过left属性设置按钮在容器内水平居中 */
    text-align: center;
    /* 设置输入框内的文字居中对齐 */

    background-color: rgba(240, 238, 238, 0.3);
    /* 设置输入框的背景颜色为红色，并将透明度设置为50% */
}