/* ===== Header ===== */

* {
    outline: 1px solid rgba(255,0,0,0.2); /* temporarily visualize overlays */
}


html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

header {
	background: #1c1c1c;
	color: #fff;
	padding: 28px 0;
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: background 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease;
}




header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
}

header .container a {
	color: #fff;
	text-decoration: none;
}

header h1 {
	font-size: 2rem;
	transition: font-size 0.4s ease;
}

header nav a {
	color: #fff;
	margin: 0 15px;
	text-decoration: none;
	font-weight: bold;
	position: relative;
	font-size: 1rem;
	display: inline-block;
	transform-origin: center;
	transition: color 0.3s ease, transform 0.3s ease;
}

header nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 2px;
	background-color: #ff6b00;
	transition: width 0.3s ease;
}

header nav a:hover {
	color: #ddd;
	transform: scale(1.15);
}

header nav a:hover::after {
	width: 100%;
}

header nav a.active {
	color: #ffa040;
	transform: scale(1.2);
}

header.scrolled {
	background: rgba(28, 28, 28, 0.85);
	backdrop-filter: blur(6px);
	padding: 20px 0;
}

header.scrolled h1 {
	font-size: 1.7rem;
}

main {
	position: relative;
	flex: 1; /* grows to fill space */
	color: #f1f1f1;
	font-family: 'Courier New', Courier, monospace;
	padding:8px;
	overflow: scroll;
	background: repeating-linear-gradient(
		0deg,
		rgba(255,255,255,0.03),
		rgba(255,255,255,0.03) 1px,
		transparent 1px,
		transparent 20px
	),
	repeating-linear-gradient(
		90deg,
		rgba(255,255,255,0.03),
		rgba(255,255,255,0.03) 1px,
		transparent 1px,
		transparent 20px
	);
	pointer-events: all;
}

footer {
	z-index: 1000;
	background: #1c1c1c;
	color: #fff;
	padding: 20px;
	text-align: center;
}

footer a:hover {
	color:white;
}

html {
    scroll-behavior: smooth;
}