/* styles extracted from index.html */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #0a0e27;
	color: #e0e0e0;
	font-family: 'Courier New', Courier, monospace;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
}

.container {
	max-width: 600px;
	padding: 40px;
	text-align: center;
}

h1 {
	font-size: 3em;
	margin-bottom: 10px;
	letter-spacing: 3px;
	text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
	color: #00ff88;
	animation: glow 2s ease-in-out infinite;
}

.subtitle {
	color: #ff006e;
	font-size: 0.9em;
	margin-bottom: 40px;
	text-shadow: 0 0 5px #ff006e;
	letter-spacing: 2px;
}

ul {
	list-style: none;
	margin: 40px 0;
}

li {
	margin: 15px 0;
	position: relative;
}

a {
	color: #00d9ff;
	text-decoration: none;
	font-size: 1.1em;
	padding: 10px 20px;
	border: 2px solid #00d9ff;
	display: inline-block;
	transition: all 0.3s ease;
	text-shadow: 0 0 8px #00d9ff;
	position: relative;
	overflow: hidden;
}

a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, #00d9ff, transparent);
	transition: left 0.5s ease;
	opacity: 0.3;
}

a:hover::before {
	left: 100%;
}

a:hover {
	/* preserve the link's color and border; use currentColor for glow */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
	transform: scale(1.05);
	box-shadow: 0 0 15px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.03);
}

li:nth-child(2) a {
	border-color: #ff006e;
	color: #ff006e;
	text-shadow: 0 0 8px #ff006e;
}

li:nth-child(2) a:hover {
	/* preserve the link's color; just add a glow using currentColor */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
}

li:nth-child(3) a {
	border-color: #ffbd39;
	color: #ffbd39;
	text-shadow: 0 0 8px #ffbd39;
}

li:nth-child(3) a:hover {
	/* preserve the link's color; just add a glow using currentColor */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
}

/* green link (4th item) */
.green {
	border-color: #00ff88;
	color: #00ff88;
	text-shadow: 0 0 8px #00ff88;
}

.green:hover {
	/* keep green as-is; use currentColor for glow */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
	transform: scale(1.05);
	box-shadow: 0 0 15px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.03);
}

/* orange link */
.orange {
	border-color: #ffbd39;
	color: #ffbd39;
	text-shadow: 0 0 8px #ffbd39;
}

.orange:hover {
	/* keep orange as-is; use currentColor for glow */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
	transform: scale(1.05);
	box-shadow: 0 0 15px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.03);
}

/* purple link */
.purple {
	border-color: #ce59ff;
	color: #ce59ff;
	text-shadow: 0 0 8px #ce59ff;
}

.purple:hover {
	/* keep purple as-is; use currentColor for glow */
	text-shadow: 0 0 15px currentColor, 0 0 25px currentColor;
	transform: scale(1.05);
	box-shadow: 0 0 15px currentColor, inset 0 0 10px rgba(255, 255, 255, 0.03);
}

.footer {
	margin-top: 60px;
	font-size: 0.8em;
	color: #666;
	letter-spacing: 1px;
}

.social {
	margin-top: 12px;
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: center;
}

.plain {
	color: #bfbfbf;
	text-decoration: none;
	font-size: 0.95em;
	padding: 6px 8px;
	border: none;
	text-shadow: none;
	transition: color 0.2s ease, transform 0.12s ease;
}

.plain:hover {
	color: #ffffff;
	transform: translateY(-2px);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
}

/* scanline effect */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: repeating-linear-gradient(0deg,
			rgba(0, 0, 0, 0.1),
			rgba(0, 0, 0, 0.1) 1px,
			transparent 1px,
			transparent 2px);
	z-index: 2;
}

@keyframes glow {

	0%,
	100% {
		text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
	}

	50% {
		text-shadow: 0 0 20px #00ff88, 0 0 40px #00ff88, 0 0 60px #00ff88;
	}
}

@media (max-width: 600px) {
	h1 {
		font-size: 2em;
	}

	.container {
		padding: 20px;
	}
}