/* 设置基准字体大小，这里假设根元素字体大小为20px */
html {
    font-size: 20px;
}
/* 设置背景颜色 */
body {
	background-color: #eef7f2;   /* 颜色背景#e0c8d1 */
	font-family: 'Arial', sans-serif; /* 设置全局字体 */
	text-align: center;
}
main {
	width: 80%;
	margin: 6% auto;
	text-align: center;
	/*background-color: #2e317c;  */
}
/* 添加样式规则以定义链接文本的样式 */
.box a {
	margin: 0 12px;
    text-decoration: none; /* 去掉链接下划线 */
    /* color: #fff; /* 设置链接文本颜色 */
    /* display: block; 让链接占据整个盒子空间 */
    padding: 1px; /* 设置内边距 */
	display: inline-block;
}
/* 悬停时的样式 */
.box a[target="_blank"]:hover {
    border-bottom: 0.08rem dashed #4e2a40; /* 悬停时改变标签颜色 */
}
.row1 row2 row3 row4 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box2 {
    border: 1px solid #333; /* 添加边框，颜色为深灰色 */
    padding: 20px; /* 添加内边距，使内容与边框有一定距离 */
    margin: 2rem; /* 添加外边距，使盒子与周围元素有一定距离 */
    border-radius: 10px; /* 添加圆角边框 */
    background-color: #f5f5f5; /* 添加背景颜色，这里为浅灰色 */
	height: 30%;
    width: 40%;
	margin: 2.6rem auto; /* */
	font-size: 0.6rem; /* 字体大小 */
	color: #856d72; /* 字体颜色 */
	letter-spacing: 0.08rem; /* 字体间距，单位为rem */
	text-align: center; /* 内容居中 */
}

/* 字体设置 */
h1 {
	color: #4e2a40; /* 字体颜色 */
	letter-spacing: 1rem; /* 字体间距，单位为rem */
	text-align: center; /* 内容居中 */
	margin: 8% 5% 0 5%; /* 浮动：上下为0，左右为5% */	
}
h2 {
	font-family: "SimSun", Arial, sans-serif; /* 宋体 */
	font-size: 0.8rem; /* 字体大小 */
	color: #4e2a40; /* 字体颜色 */
	letter-spacing: 0.1rem; /* 字体间距，单位为rem */
	text-align: center; /* 内容居中 */
	margin: 0 5% 0% 5%; /* 浮动：上下为0，左右为5% */	
}
h3 {
	margin: 10px 2px;
	font-size: 0.6rem; /* 字体大小 */
	color: #4e2a40; /* 字体颜色 */
	letter-spacing: 0.1rem; /* 字体间距，单位为rem */
	/* font-style: italic; 字体倾斜 */
	text-align: center; /* 内容居中 */
}
/* 添加一个分割线 */
hr {
	border: 1px solid #4b1e2f; /* 设置边框为1像素实线*/
	opacity: 0.7; /* 设置透明度为70% */
    margin: 2% 28% 0.8% 28%;
}
/* 底部添加一个footer元素 */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
	font-size: 0.6rem;
	letter-spacing: 0.1rem; 
    color: #2c9678;
    padding: 6px;
    text-align: center;
	/* font-style: italic; */
}

/* 在移动设备上增加一些额外的样式，以提高可读性 */
@media only screen and (max-width: 720px) {
	html {
		font-size: 18px;
		text-align: center;
	}
	body {
		background-color: #eef7f2;   /* 颜色背景 */
		font-family: 'Arial', sans-serif; /* 设置全局字体 */
	}
	main {
		width: 80%;
		margin: 12% auto;
		text-align: center;
		/*background-color: #2e317c;  */
	}
	h1 {
		font-size: 1.6rem;
		color: #4e2a40; /* 字体颜色 */
		letter-spacing: 0.2rem; /* 字体间距，单位为rem */
		text-align: center; /* 内容居中 */
		margin: 38% 5% 0 5%; /* 浮动：上下为0，左右为5% */	
	}
	hr {
		border: 1px solid #4b1e2f; /* 设置边框为1像素实线*/
		opacity: 0.7; /* 设置透明度为70% */
		margin: 2% 10% 0.8% 10%;
	}
	h2 {
		font-family: "SimSun", Arial, sans-serif; /* 宋体 */
		font-size: 0.6rem; /* 字体大小 */
		color: #4e2a40; /* 字体颜色 */
		letter-spacing: 0.1rem; /* 字体间距，单位为rem */
		text-align: center; /* 内容居中 */
		margin: 0% 5% 0% 5%; /* 浮动：上下为0，左右为5% */	
	}
	h3 {
		margin: 1px 0;
		font-size: 0.6rem; /* 字体大小 */
		color: #4e2a40; /* 字体颜色 */
		letter-spacing: 0.1rem; /* 字体间距，单位为rem */
		font-style: italic; /* 字体倾斜 */
		text-align: center; /* 内容居中 */
	}
	/* 添加样式规则以定义链接文本的样式 */
	.box a {
		margin: 6px 2px;
		text-decoration: none; /* 去掉链接下划线 */
		/* color: #fff; /* 设置链接文本颜色 */
		/* display: block; 让链接占据整个盒子空间 */
		padding: 1px; /* 设置内边距 */
		display: inline-block;
	}
	/* 悬停时的样式 */
	.box a[target="_blank"]:hover {
		border-bottom: 0.08rem dashed #4e2a40; /* 悬停时改变标签颜色 */
	}
	.row1 row2 row3 row4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.box2 {
		border: 1px solid #333; /* 添加边框，颜色为深灰色 */
		padding: 20px; /* 添加内边距，使内容与边框有一定距离 */
		margin: 2rem; /* 添加外边距，使盒子与周围元素有一定距离 */
		border-radius: 10px; /* 添加圆角边框 */
		background-color: #f5f5f5; /* 添加背景颜色，这里为浅灰色 */
		height: 30%;
		width: 80%;
		margin: 2.6rem auto; /* */
		font-size: 0.6rem; /* 字体大小 */
		color: #856d72; /* 字体颜色 */
		letter-spacing: 0.08rem; /* 字体间距，单位为rem */
		text-align: center; /* 内容居中 */
	}	
}