/* Reset default margin and padding */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p {
	color: #EAF4F9;
}

h1 {
	color: #EAF4F9;
}

h2 {
	color: #EAF4F9;
}
h3 {
	color: #EAF4F9;
}

#footer {
	/* 设置页脚的样式 */
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3.125rem;
	background: linear-gradient(to left, #000033, #5500ff);
}

a {
	text-decoration: none;
	/* 取消文本装饰 */
	color: black;
	/* 恢复默认的黑色 */
}

a div {
	border: 2px solid #5500ff;
	/* 设置边框宽度和颜色 */
	border-radius: 10px;
	/* 设置圆角半径 */
	padding: 10px;
	/* 可选，为了给内容留出一些空间 */
}

/* Global styles */
body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	/* overflow: hidden; */
	background-color: #000033;
	/* background-image: url('images/bodybg.png'); */
}

header {
	background: linear-gradient(to right, #000033, #5500ff);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	text-align: center;
	padding: 1rem 0;
	position: relative;
}

header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('images/headerbg.png');
	opacity: 0.75;
	/* 调整透明度以达到合适的效果 */
}




main {
	padding: 2rem;
}

/* Card styles */
.card {
	display: flex;
	flex-direction: column;
	margin: 1rem;
	/* background-color: #5500ff; */
	border: 1px solid #5500ff;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.card:hover {
	transform: scale(1.05);
}

.card img {
	width: 100%;
	height: auto;
}

.covers img {
	width: 100%;
	height: auto;
}

.card-text {
	padding: 1rem;
}

.covers-text {
	padding: 1rem;
}

/* Responsive styles */
@media (min-width: 768px) {
	.card {
		flex-direction: row;
		/* Display image and text side by side on larger screens */
	}

	.card img {
		width: 40%;
		/* Adjust image width for larger screens */
	}

	.card-text {
		padding: 1rem;
	}

	.covers-text {
		padding: 1rem;
	}
}

/* 资源卡片样式 */

.res-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding: 20px;
	/* 添加整体边距 */
}

.res-card-content {
	display: flex;
	flex-direction: row;
	/* 将排列方式改为水平 */
	width: calc(20% - 20px);
	/* 默认PC端每行5个，减去间距 */
	background-color: #5500ff;
	/* 修改背景色为冰蓝色 */
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.3s ease;
}

@media (max-width: 768px) {

	/* 在手机端 */
	.res-card-content {
		width: calc(50% - 10px);
		/* 手机端每行2个，减去间距 */
	}
}

.res-card-content:hover {
	transform: scale(1.1);
}

.res-card-content img {
	width: 40%;
	/* 设置图片宽度 */
	height: auto;
	object-fit: cover;
	border-radius: 10px 0 0 10px;
	/* 图片左边圆角 */
}

.res-card-content .res-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 将内容垂直居中 */
	padding: 10px;
	font-size: 14px;
	flex-grow: 1;
	/* 让内容充满剩余空间 */
}

.res-card-content .res-content p {
	margin: 0;
}

.res-card-content .res-content h3 {
	margin: 0;
	/* 去掉标题的默认上下边距 */
}

/* 代码雨 */
canvas {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	/* 防止代码干扰用户交互 */
}