body {  
            font-family: Arial, sans-serif;  
            background-color: #f5f5f5;  
            margin: 0;  
            padding: 0;  
        }  
  
/* 导航栏样式 */  
#nav {  
            background-color: #EA4335;  
            color: white;
           list-style-type: none; /* 移除默认的列表样式 */  
           text-align: center; /* 使列表项文字居中 */  
           padding: 1px; /* 内边距+1 */  
}  
  
#nav li {  
    display: inline-block; /* 使列表项在同一行显示 */  
    margin: 0 1px; /* 为每个列表项添加一些外边距 */  
}  
  
#nav li a {  
    display: block; /* 使链接占据整个列表项的空间 */  
    padding: 10px; /* 为链接添加一些内边距 */  
    text-decoration: none; /* 移除链接的下划线 */  
    color: white; /* 设置链接文字的颜色 */  
    margin: 0 10px; 
}

         .login-container {  
            max-width: 400px;  
            margin: 50px auto;  
            padding: 20px;  
            background-color: white;  
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);  
            border-radius: 8px;  
            text-align: center;  
        }  
         .form-group {  
            display: flex; /* 使用Flexbox布局 */  
            align-items: center; /* 垂直居中 */  
            margin-bottom: 10px; /* 添加一些间距 */  
        }  
  
         .form-group label {  
            flex: 0 0 100px; /* 设置标签的固定宽度 */  
        }  
  
         .form-group input {  
            flex: 1; /* 输入框占据剩余空间 */  
            margin-left: 10px; /* 与标签之间的间距 */  
        }
        .login-container h2 {  
            color: #EA4335;  
        }  
        .form-group {  
            margin-bottom: 20px;  
        }  
        .form-group label {  
            display: block;  
            margin-bottom: 5px;  
            color: #333;  
        }  
        .form-group input {  
            width: 100%;  
            padding: 10px;  
            border: 1px solid #ddd;  
            border-radius: 4px;  
            box-sizing: border-box;  
        }  
        button[type="submit"] {  
            width: 100%;  
            padding: 10px;  
            background-color: #EA4335;  
            color: white;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
        }  
        button[type="submit"]:hover {  
            background-color: #d23f31;  
        }

.question-container {  
    display: flex;  
    flex-wrap: wrap; /* 允许内容换行 */  
    justify-content: space-between; /* 水平方向均匀分布 */  
}  
  
.question-group {  
    flex: 0 0 calc(31.333% - 20px); /* 设置每列的宽度，并留出间隙 */  
    margin-bottom: 30px; /* 列之间的垂直间距，除最后一行外 */  
    border: 1px solid #ddd; /* 添加边框 */  
    border-radius: 8px; /* 添加圆角，与.question-cell保持一致 */  
    padding: 10px; /* 添加内边距，可选 */  
    margin-left: 20px; /* 增加左外边距 */  
    margin-top: 20px;  /* 增加上边距离 */  
}  
  
/* 清除最后一行的垂直间距 */  
.question-container > .question-group:nth-child(4n+1) {  
    margin-bottom: 0;  
}  

.question-grid {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-around; /* 水平方向均匀分布 */  
    margin: 0 auto; /* 水平居中 */  
    max-width: 1000px; /* 你可以根据需要调整这个宽度 */  
}  
  
.question-cell {  
    flex: 1 0 calc(33.333% - 20px); /* 三列布局，每列占据1/3宽度并留出一些间隙 */  
    margin: 10px; /* 每列之间的间隙 */  
    background-color: white; /* 背景颜色，可根据需要调整 */  
    padding: 20px; /* 内边距 */  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 阴影效果 */  
    border-radius: 8px; /* 圆角 */  
    text-align: center; /* 文字居中 */  
}
        
        /* 底部信息样式 */  
        .footer {  
            background-color: #333;  
            color: white;  
            padding: 20px 0;  
            text-align: center;  
            position: fixed;  
            bottom: 0;  
            width: 100%;  
        }