body {
	font-family: Arial, sans-serif; /* 设置字体为 Arial 或者 sans-serif */
	margin: 0; /* 去除页面的默认外边距 */
	padding: 0; /* 去除页面的默认内边距 */
	background: #f3f4f6; /* 设置背景色为浅灰色 */
	color: #333; /* 设置字体颜色为深灰色 */
}

header {
	background: #007bff; /* 设置头部背景色为蓝色 */
	color: #fff; /* 设置文字颜色为白色 */
	padding: 1rem 0; /* 设置上下内边距为 1rem，左右为 0 */
	text-align: center; /* 设置文本居中 */
}

header h1 {
	margin: 0; /* 去除标题的外边距 */
	font-size: 2.5rem; /* 设置标题字体大小为 2.5rem */
}

header p {
	margin: 0.5rem 0 0; /* 设置段落的外边距，上 0.5rem，其他为 0 */
	font-size: 1rem; /* 设置段落字体大小为 1rem */
}

.content {
	padding: 2rem; /* 设置内容区域的内边距为 2rem */
	max-width: 800px; /* 设置最大宽度为 800px */
	margin: 0 auto; /* 设置内容居中对齐 */
	text-align: center; /* 设置文本居中 */
}

.content h2 {
	color: #007bff; /* 设置小标题颜色为蓝色 */
	margin-bottom: 1rem; /* 设置小标题下方外边距为 1rem */
}

.content p {
	line-height: 1.6; /* 设置段落行高为 1.6 */
	margin-bottom: 1rem; /* 设置段落下方外边距为 1rem */
}

.telegram-link {
	margin: 2rem 0; /* 设置链接上下外边距为 2rem */
	font-size: 1.2rem; /* 设置字体大小为 1.2rem */
}

.telegram-link a {
	text-decoration: none; /* 去除链接的下划线 */
	color: #007bff; /* 设置链接文字颜色为蓝色 */
	font-weight: bold; /* 设置链接文字为加粗 */
	border: 2px solid #007bff; /* 设置边框为蓝色，宽度为 2px */
	padding: 0.5rem 1rem; /* 设置内边距，上下 0.5rem，左右 1rem */
	border-radius: 5px; /* 设置边框圆角为 5px */
	transition: all 0.3s ease; /* 设置所有属性的过渡效果，时长 0.3s */
}

.telegram-link a:hover {
	background: #007bff; /* 设置悬停时背景色为蓝色 */
	color: #fff; /* 设置悬停时字体颜色为白色 */
}

.button-row {
	display: flex; /* 使用 Flexbox 布局 */
	flex-wrap: wrap; /* 自动换行 */
	justify-content: center; /* 将按钮居中 */
	gap: 1rem; /* 设置按钮之间的间距为 1rem */
	margin-top: 2rem; /* 设置按钮区域顶部外边距为 2rem */
}

.button-row a {
	flex: 1 1 calc(33% - 1rem); /* 每行最多显示三个按钮，减去按钮之间的间距 */
	text-decoration: none; /* 去除链接的下划线 */
	color: #fff; /* 设置按钮文字颜色为白色 */
	background: #007bff; /* 设置按钮背景色为蓝色 */
	padding: 1rem 1.5rem; /* 设置按钮内边距，上下 1rem，左右 1.5rem */
	border-radius: 5px; /* 设置按钮的圆角为 5px */
	font-weight: bold; /* 设置按钮文字加粗 */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 设置按钮的阴影效果 */
	text-align: center; /* 设置按钮内文字居中 */
	transition: all 0.3s ease; /* 设置按钮所有属性的过渡效果 */
}

.button-row a:hover {
	background: #0056b3; /* 悬停时按钮背景色变为深蓝色 */
	transform: translateY(-3px); /* 悬停时按钮上移 3px */
}

footer {
	margin-top: 2rem; /* 设置页脚顶部外边距为 2rem */
	padding: 1rem 0; /* 设置页脚上下内边距为 1rem */
	background: #333; /* 设置页脚背景色为深灰色 */
	color: #fff; /* 设置页脚文字颜色为白色 */
	text-align: center; /* 设置页脚文本居中 */
}

@media (max-width: 768px) {
	.button-row a {
		flex: 1 1 calc(50% - 1rem); /* 屏幕宽度小于 768px 时，每行显示两个按钮 */
	}
}

@media (max-width: 480px) {
	.button-row a {
		flex: 1 1 100%; /* 屏幕宽度小于 480px 时，每行显示一个按钮 */
	}
}

/* 向下滑动查看资源 */
.content {
	display: flex; /* 使用 Flexbox 布局 */
	flex-direction: column; /* 使内容垂直排列 */
	align-items: center; /* 将内容水平居中 */
	justify-content: flex-start; /* 内容从顶部开始排列 */
	height: auto; /* 内容容器的高度自适应 */
	min-height: 100vh; /* 设置内容容器最小高度为 100vh，至少占满屏幕 */
	padding: 20px; /* 设置内边距为 20px */
	overflow-y: auto; /* 允许垂直方向滚动 */
}