body {
    background: whitesmoke; /* 添加渐变色背景效果 */
    font-family: Arial, sans-serif;
}

table {
    margin: 20px auto; /* 居中显示表格 */
    border-collapse: collapse;
    width: 50%; /* 设置表格宽度 */
}

td {
    text-align: center; /* 表格元素居中显示 */
    padding: 10px;
}

h1 {
    text-align: center; /* 标题居中显示 */
}

td label {
    /* 标签右侧显示*/
    display: block;
    text-align: left;
}

input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid black;
}

input {
    background-color: whitesmoke;
}

button {
    width: 80px; /* 设置按钮、输入框的宽度 */
    height: 30px; /* 设置按钮、输入框的高度 */
    border-radius: 3px; /* 设置圆角矩形 */
    border: none;
    margin: 5px; /* 设置按钮、输入框的外边距 */
}

button {
    background-color: #4CAF50; /* 设置按钮背景颜色 */
    color: white;
    cursor: pointer;
}

button:hover {
    background-color: #45a049; /* 设置按钮鼠标悬停时的背景颜色 */
}

#total_btn {
    text-align: right;
}

#count_btn {
    text-align: right;
}

#people_btn {
    text-align: right;
}

#calc {
    width: 300px;
    height: 30px; /* 设置按钮、输入框的高度 */
    border-radius: 3px; /* 设置圆角矩形 */
    border: none;
    margin: 5px; /* 设置按钮、输入框的外边距 */
}

#calc:hover {
    background-color: #45a049;
}
#result {
    display: block;
    text-align: center;
}
footer {
    margin-bottom: 1px; /* 将 footer 推到页面底部 */
    text-align: center; /* 居中显示 footer 内容 */
    padding: 20px; /* 添加内边距 */
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}