/* 重置浏览器默认样式 */
* {
	margin: 0; /* 去除所有元素的默认外边距 */
	padding: 0; /* 去除所有元素的默认内边距 */
	box-sizing: border-box; /* 设置所有元素的 box-sizing 为 border-box，确保padding和border不影响元素宽度 */
	font-family: 'Courier New', Courier, monospace; /* 设置全局字体为等宽字体 */
}

/* 设置页面全局样式 */
body, html {
	height: 100%; /* 设置页面高度为 100% */
	background-color: black; /* 设置背景色为黑色 */
	color: #0f0; /* 设置文本颜色为绿色 */
	overflow: auto; /* 允许页面滚动 */
}

/* 黑客背景 */
.hacker-background {
	position: absolute; /* 设置为绝对定位 */
	top: 0; /* 顶部对齐 */
	left: 0; /* 左侧对齐 */
	width: 100%; /* 宽度为 100% */
	height: 100%; /* 高度为 100% */
	overflow-y: auto; /* 允许垂直方向滚动 */
	background-color: black; /* 背景色为黑色 */
	display: flex; /* 使用 Flexbox 布局 */
	justify-content: center; /* 水平居中对齐内容 */
	align-items: center; /* 垂直居中对齐内容 */
	flex-direction: column; /* 设置子元素垂直排列 */
	text-align: center; /* 设置文本居中 */
	padding-bottom: 100px; /* 确保内容不会被底部菜单遮挡 */
}

/* 黑客文字容器 */
.hacker-content {
	position: absolute; /* 设置为绝对定位 */
	top: 50%; /* 垂直居中 */
	left: 50%; /* 水平居中 */
	transform: translate(-50%, -50%); /* 使用 transform 来精确居中 */
	display: flex; /* 使用 Flexbox 布局 */
	flex-direction: column; /* 垂直排列按钮 */
	justify-content: center; /* 垂直方向上居中对齐 */
	align-items: center; /* 水平方向上居中对齐 */
	width: 100%; /* 宽度为 100% */
	max-width: 600px; /* 最大宽度为 600px */
}

/* 每个按钮的样式 */
.hacker-content a {
	font-size: 2rem; /* 设置字体大小为 2rem */
	color: #0f0; /* 设置字体颜色为绿色 */
	letter-spacing: 1px; /* 设置字母间距 */
	animation: glow 1.5s ease-in-out infinite alternate; /* 设置字体的发光动画 */
	text-decoration: none; /* 去除文本下划线 */
	padding: 10px 20px; /* 设置按钮内边距 */
	border: 2px solid #0f0; /* 设置按钮边框颜色为绿色 */
	border-radius: 5px; /* 设置按钮圆角 */
	margin: 10px 0; /* 设置按钮之间的垂直间距 */
	transition: background-color 0.3s, color 0.3s; /* 设置背景色和字体颜色的过渡效果 */
	white-space: nowrap; /* 防止按钮文字换行 */
}

/* 链接按钮悬停效果 */
.hacker-content a:hover {
	background-color: #0f0; /* 悬停时按钮背景变为绿色 */
	color: black; /* 悬停时字体颜色变为黑色 */
}

/* 字体发光效果 */
@keyframes glow {
	0% {
		text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 15px #0f0, 0 0 20px #0f0, 0 0 30px #0f0; /* 初始发光效果 */
	}
	100% {
		text-shadow: 0 0 20px #0f0, 0 0 30px #0f0, 0 0 40px #0f0, 0 0 50px #0f0; /* 结束时发光效果加剧 */
	}
}

/* 二进制代码 */
.binary-code {
	font-size: 1.5rem; /* 设置字体大小为 1.5rem */
	color: #0f0; /* 设置字体颜色为绿色 */
	letter-spacing: 2px; /* 设置字母间距 */
	margin-top: 20px; /* 设置顶部外边距 */
	white-space: nowrap; /* 防止文字换行 */
	font-family: 'Courier New', Courier, monospace; /* 设置字体为等宽字体 */
	opacity: 0.7; /* 设置透明度为 0.7 */
}

/* 控制字体若隐若现的动画 */
@keyframes flicker {
	0% {
		opacity: 0.3; /* 初始透明度为 0.3 */
	}
	50% {
		opacity: 0.7; /* 透明度变化为 0.7 */
	}
	100% {
		opacity: 1; /* 最终透明度为 1 */
	}
}

.binary-code span {
	animation: flicker 2s linear infinite; /* 设置闪烁动画 */
	display: inline-block; /* 使元素内联显示 */
	padding: 0 2px; /* 设置内边距 */
}