/* 设定body的基础样式 */
body {
    margin: 0;                       /* 移除body的外边距，确保内容贴合边缘 */
    font-family: Arial, sans-serif; /* 设置字体为Arial，如果Arial不可用则使用无衬线字体 */
}
 
/* 设定.container的样式，这是一个flex容器 */
.container {
    display: flex;               /* 使用弹性布局 */
    height: 100vh;               /* 设置容器高度为视口高度 */
}
 
/* 设定.left-side的样式，左侧区域 */
.left-side {
    width: 80%;                  /* 宽度占容器的80% */
    background-image: url("../img/bg1.jpeg"); /* 设置背景图片 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    background-size: cover;       /* 背景图片覆盖整个元素 */
}
 
/* 设定登录表单的样式 */
.login-form {
    display: flex;               /* 使用弹性布局 */
    flex-direction: column;     /* 子元素垂直排列 */
}
 
/* 设定登录表单中的h2标题样式 */
.login-form h2 {
    margin: 0 0 20px;           /* 设置上下外边距为0，下内边距为20px */
    text-align: center;         /* 文本居中显示 */
}
 
/* 设定输入组的样式 */
.input-group {
    margin-bottom: 20px;        /* 设置下外边距为20px */
}
 
/* 设定输入组中的label样式 */
.input-group label {
    display: block;             /* 以块级元素显示 */
    margin-bottom: 5px;         /* 设置下外边距为5px */
}
 
/* 设定输入组中的input样式 */
.input-group input {
    width: 100%;                /* 宽度占满父元素 */
    padding: 10px;             /* 设置内边距 */
    border: 1px solid #ddd;    /* 设置边框为1px灰色实线 */
    border-radius: 5px;        /* 设置边框圆角 */
    box-sizing: border-box;    /* 宽度和高度包含内边距和边框 */
}
 
/* 设定按钮的通用样式 */
button {
    padding: 10px;             /* 设置内边距 */
    border: none;             /* 无边框 */
    border-radius: 5px;       /* 设置边框圆角 */
    background-color: #5cb85c; /* 设置背景色为绿色 */
    color: white;             /* 设置文本颜色为白色 */
    cursor: pointer;          /* 鼠标悬停时变为手型 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}
 
/* 设定按钮的hover样式 */
button:hover {
    background-color: #4cae4c; /* 鼠标悬停时背景色变为深绿色 */
}
 
/* 设定.right-side的样式，右侧区域 */
.right-side {
    width: 20%;                  /* 宽度占容器的20% */
    background-color: #eeb589;   /* 设置背景色为橙色 */
    padding: 20px;               /* 设置内边距 */
    display: flex;               /* 使用弹性布局 */
    flex-direction: column;     /* 子元素垂直排列 */
    justify-content: center;     /* 子元素垂直居中 */
}
 
/* 设定图片的通用样式 */
img {
    max-width: 100%;            /* 图片最大宽度不超过父元素 */
    height: auto;               /* 图片高度自动调整，保持比例 */
}
 
/* 设定表单的通用样式 */
form {
    display: flex;               /* 使用弹性布局 */
    flex-direction: column;     /* 子元素垂直排列 */
}
 
/* 设定输入框的通用样式 */
input {
    margin-bottom: 10px;        /* 设置下外边距为10px */
    padding: 10px;              /* 设置内边距 */
    font-size: 16px;           /* 设置字体大小为16px */
}
 
/* 设定.register的样式，注册相关区域 */
.register {
margin-top: 10px; /* 设置上外边距为10px */
text-align: center; /* 文本居中显示 */
}
 
/* 设定.register中链接的样式 */
.register a {
color: blue; /* 设置链接颜色为蓝色 */
text-decoration: none; /* 去除链接下划线 */
}

 body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 底部容器样式 */
.footer-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 50px; /* 你可以根据需要调整高度 */
    background-color: #f0f0f0; /* 你可以设置你喜欢的背景色 */
    width: 100%; /* 容器宽度占满整个视口 */
    position: absolute;
    bottom: 0; /* 固定在页面底部 */
}

/* 备案信息样式 */
.icp-record {
    margin: 0; /* 移除默认的margin */
    color: #333; /* 文本颜色 */
}

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

}