@font-face {
	font-family: 'Pixelify';
	src: url('/static/fonts/PixelifySans-Regular.ttf') format('truetype');
	font-weight: normal;
}
@font-face {
	font-family: 'Pixelify';
	src: url('/static/fonts/PixelifySans-Bold.ttf') format('truetype');
	font-weight: bold;
}

:root {
	--color-heading-h1: rgb(21, 128, 61);
	--color-heading-h2: rgb(22, 163, 74);
	--color-heading-h3: rgb(34, 197, 94);
	--color-heading-h4: rgb(74, 222, 128);
	--color-heading-h5: rgb(134, 239, 172);
	--color-code-bg: #000;
	--color-code-border: #444444;
	--color-blockquote-border: rgb(21, 128, 61);

	--color-text: #ccc;
	--color-text-muted: #ccc;
	--color-link: #22c55e;
	--color-link-hover: #86efac;
	--color-blockquote: #6b7280;
	--color-strong: #eed;
}

html {
	scroll-behavior: smooth;
	font-size: 82.5%;
}
body {
	color: var(--color-text);
}


.nav-link { position: relative; }
.nav-link:hover::before {
	content: ">";
	position: absolute;
	left: -12px;
}


.terminal-glow {
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}


.table-wrapper {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	margin: 0 auto !important;
}

.table-wrapper table {
	width: fit-content !important;
	min-width: 300px !important;
	max-width: 900px !important;
	border-collapse: collapse !important;
	border: none !important;
	background: transparent !important;
	font-size: 120% !important;
}

.table-wrapper tr,
.table-wrapper tbody tr,
.table-wrapper thead tr,
.table-wrapper th,
.table-wrapper td {
	background: transparent !important;
	border: none !important;
}

.table-wrapper th,
.table-wrapper td {
	padding: 0.4rem clamp(1rem, 15vw, 9rem) !important;
	font-size: 1.3rem !important;
	text-align: left !important;
}

.table-wrapper th {
	font-size: 1.4rem !important;
	font-weight: bold !important;
}

.table-wrapper td::before {
	content: "▸ ";
}


main {
	line-height: 1.5;
}


h1 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.9rem;
	text-decoration: underline;
	text-decoration-color: var(--color-heading-h3);
	color: var(--color-heading-h3);
	font-weight: 900;
}

h2 {
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.4rem;
	color: var(--color-heading-h2);
	font-weight: 700;
}

h3 {
	margin-top: 1.1rem;
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
	color: var(--color-heading-h3);
	font-weight: 700;
}

h4 {
	margin-top: 1.0rem;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	color: var(--color-heading-h4);
	font-weight: 700;
}

h5 {
	margin-top: 1.9rem;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	color: var(--color-heading-h5);
	font-weight: 600;
	line-height: 1.4;
	white-space: pre-line;
	word-wrap: break-word;
}


p {
	margin-left: 0.5rem;
	color: var(--color-text);
	line-height: 1.5;
	font-size: 1.1rem;
}


a {
	color: var(--color-heading-h1);
	text-decoration: inherit;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-link-hover);
	text-decoration: underline;
}


ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 1rem;
}

ul li {
	color: var(--color-text);
	margin-bottom: 0.5rem;
	padding-left: 1rem;
	position: relative;
	line-height: 1.4;
}

ul li::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--color-heading-h3);
	font-weight: bold;
}


blockquote {
	border-left: 3px solid var(--color-blockquote-border);
	color: var(--color-blockquote);
	padding-left: 0.8rem;
	margin: 1rem 0;
	font-style: italic;
}

blockquote p {
	color: inherit;
}


code {
	background: var(--color-code-bg);
	border: 1px solid var(--color-code-border);
	padding: 0.15rem 0.35rem;
	border-radius: 0px;
	font-family: 'Courier New', monospace;
	font-size: 0.8rem;
	color: var(--color-text);
}

pre {
	background: var(--color-code-bg);
	border: 1px solid var(--color-code-border);
	border-radius: 0px;
	padding: 0.3rem;
	overflow-x: auto;
	margin:1rem !important;
}

pre code {
	background: none;
	border: none;
	padding: 0;
}


div:has(> p:first-child + ul + p + ul) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: start;
}


hr {
	border: none;
	border-top: 1px solid var(--color-code-border);
	margin: 1.5rem 0;
}


strong, b {
	color: var(--color-strong);
	font-weight: 900;
}

em, i {
	font-style: italic;
	color: var(--color-text-muted);
}


.citation {
	color: var(--color-link);
}

.highlight {
	margin: 0;
	padding: 0;
	background-color: transparent !important;
}

.highlighttable tbody tr td {

	margin: 0;
	padding: 0;
	border: 0;
	.linenodiv{
		display: none;
	}

	pre {
		border: 0;
		margin: 0 !important;
		padding: 7px;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
	border: 1px solid var(--color-code-border);
	color: var(--color-text);
}

th, td {
	padding: 0.5rem 0.75rem;
	text-align: left;
	font-size: 90%;
	color: var(--color-text);
}

th {
	background-color: var(--color-code-bg);
	color: var(--color-heading-h3);
	font-weight: 900;
}

tr:nth-child(even) {
	background-color: rgba(34, 197, 94, 0.05);
}

tr:hover {
	background-color: rgba(34, 197, 94, 0.1);
}

@media (max-width: 768px) {
	.title { font-size: 1rem; }
	h1 { font-size: 1.2rem; }
	h2 { font-size: 1.0rem; }
	h3 { font-size: 0.9rem; }
	h4 { font-size: 0.8rem; }
	h5 { font-size: 0.7rem; }

	p {
		line-height: 1.0;
		font-size: 0.8rem;
	}

	ul li {
		line-height: 1.2;
		font-size: 0.85rem;
		padding-left: 0.8rem;
	}

	code {
		font-size: 0.75rem;
		padding: 0.1rem 0.25rem;
	}

	pre {
		padding: 0.8rem;
		font-size: 0.8rem;
	}

	.skills-container {
		gap: 3.4rem;
		font-size: 80%;
	}
	.skills-container h4 { font-size: 0.8rem; }

	.table-wrapper th,
	.table-wrapper td {
		padding: 0.1rem clamp(1rem, 8vw, 7rem) !important;
		font-size: 0.9rem !important;
		text-align: left !important;
	}

	.table-wrapper table {
	margin: 1rem 0;

	}

	.table-wrapper th {
		font-size: 1.0rem !important;
		font-weight: bold !important;
	}

	.table-wrapper td::before {
		content: "▸ ";
	}
}