/* via https://ribo.zone/ style */
@font-face {
	font-family: "DOS";
	src: url('../fonts/Px437_DOS-V_re_ANK24.woff2') format('woff2');
}

:root {
	--bg: #FDFBF8;
	--panel: #F5F2EE;
	--surface: #FFFFFF;
	--border: #E0DDD8;
	--text: #0D0D0D;
	--muted: #999;
	--accent: #F03397;
	--link: #00aede;

	/* category accent colors */
	--cat-tech: #4A90D9;
	--cat-art: #D94AA0;
	--cat-brand: #E8881A;
	--cat-web: #20B2AA;

	font-family: 'Nunito', Arial, sans-serif;
	color: var(--text);
	background: var(--bg);
}

:root {
	--scroll-thumb: rgba(0, 0, 0, .18);
	--scroll-thumb-hover: rgba(0, 0, 0, .32);
}

body {
	background: var(--bg);
	color: var(--text);
	rotate: 1deg;
	/* filter: blur(0.35px); */
}

/* ===== links ===== */
a {
	color: var(--link);
	text-decoration-style: wavy;
	text-decoration-skip-ink: none;
}

a:hover {
	color: var(--accent);
}

/* ===== header ===== */
header {
	padding: 1rem 1.2rem 0.5rem;
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: 2rem;
}

header h1 {
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1;
}

header h1 a {
	color: var(--text);
	text-decoration: none;
}

header h1 a:hover {
	color: var(--accent);
}

header nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.2rem;
}

header nav ul li::marker {
	content: none;
}

header nav a {
	font-size: 0.9rem;
	color: var(--muted);
	text-decoration: none;
	transition: color 0.15s;
}

header nav a:hover {
	color: var(--accent);
}

/* ===== footer ===== */
footer {
	font-size: 0.78rem;
	color: var(--muted);
	padding: 0.5rem 1.2rem;
}

footer a {
	color: var(--muted);
}

footer a:hover {
	color: var(--accent);
}

/* Firefox (modern) */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scroll-thumb) transparent;
	/* thumb, track */
}

/* Chromium / WebKit */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--scroll-thumb);
	border-radius: 8px;
	border: 3px solid transparent;
	/* padding so thumb doesn't touch edges */
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-thumb-hover) !important;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03) inset, 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* active (pressed) state */
::-webkit-scrollbar-thumb:active {
	background: rgba(0, 0, 0, 0.6) !important;
}