/* 重置浏览器默认样式 */
* {
	margin: 0; /* 移除外边距 */
	padding: 0; /* 移除内边距 */
	box-sizing: border-box; /* 盒子模型计算包含边框 */
	font-family: Arial, sans-serif; /* 设置全局字体 */
	text-decoration: none; /* 去除链接下划线 */
}

/* 下方菜单容器 */
.bottom-menu {
	position: fixed; /* 固定在视窗底部 */
	bottom: 0; /* 距离底部 0 */
	left: 0; /* 距离左侧 0 */
	width: 100%; /* 宽度填满整个视窗 */
	display: flex; /* 使用 Flexbox 排版 */
	justify-content: space-around; /* 平均分配按钮间距 */
	align-items: center; /* 垂直居中 */
	background-color: #111; /* 深灰色背景 */
	padding: 8px 0; /* 上下内边距 */
	z-index: 1000; /* 保证在最上层显示 */
}

/* 链接标签 <a> 样式，确保全区域可点击 */
.menu-link {
	display: block; /* 链接变为块级元素 */
	flex: 1; /* 链接区域平均分配宽度 */
	margin: 0 5px; /* 链接之间的间距 */
}

/* 炫彩渐变变色的按钮样式 */
.menu-button {
	position: relative; /* 相对定位 */
	flex: 1; /* 平均分配宽度 */
	margin: 0 1px; /* 按钮间距缩小 */
	padding: 12px 0; /* 上下 12px 内边距 */
	color: #fff; /* 文字设置为白色 */
	font-size: 16px; /* 字体大小 */
	font-weight: bold; /* 字体加粗 */
	text-align: center; /* 文字居中 */
	border: none; /* 无边框 */
	border-radius: 10px; /* 圆角 10px */
	cursor: pointer; /* 鼠标指针 */
	background-image: linear-gradient(45deg, #ff6a00, #ee0979, #ffd200, #00c9ff, #00ff6c); /* 炫彩背景 */
	background-size: 300% 300%; /* 扩大背景以实现动画效果 */
	animation: gradientAnimation 5s ease infinite; /* 动画效果 */
	transition: transform 0.3s ease; /* 平滑放大效果 */
}

/* 背景渐变动画 */
@keyframes gradientAnimation {
	0% {
		background-position: 0% 50%; /* 初始位置 */
	}
	50% {
		background-position: 100% 50%; /* 中间位置 */
	}
	100% {
		background-position: 0% 50%; /* 回到起始位置 */
	}
}

/* 按钮悬停效果 */
.menu-button:hover {
	transform: scale(1.05); /* 微微放大 */
}

/* 在移动端和小屏幕上优化按钮大小 */
@media (max-width: 768px) {
	.menu-button {
		font-size: 14px; /* 调整字体大小 */
		padding: 10px 0; /* 按钮内边距调整 */
	}
}