@font-face {
	font-family: 'Google Sans Code';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('/static/fonts/google-sans-code-latin.woff2?v=a60e017') format('woff2');
}

@font-face {
	font-family: 'Google Sans Code';
	font-style: italic;
	font-weight: 400;
	font-display: block;
	src: url('/static/fonts/google-sans-code-latin-italic.woff2?v=99ea59e') format('woff2');
}

@font-face {
	font-family: 'Atma';
	font-style: normal;
	font-weight: 300;
	font-display: block;
	src: url('/static/fonts/atma-latin-300.woff2?v=bba8397') format('woff2');
}

@font-face {
	font-family: 'Atma';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('/static/fonts/atma-latin-400.woff2?v=ba27439') format('woff2');
}

@font-face {
	font-family: 'Atma';
	font-style: normal;
	font-weight: 500;
	font-display: block;
	src: url('/static/fonts/atma-latin-500.woff2?v=e903901') format('woff2');
}

@font-face {
	font-family: 'Atma';
	font-style: normal;
	font-weight: 600;
	font-display: block;
	src: url('/static/fonts/atma-latin-600.woff2?v=b606f40') format('woff2');
}

@font-face {
	font-family: 'Atma';
	font-style: normal;
	font-weight: 700;
	font-display: block;
	src: url('/static/fonts/atma-latin-700.woff2?v=ffe775b') format('woff2');
}

:root {
	--bg-primary-colour: #21587d;
	--bg-secondary-colour: #1d4f6f;
	--bg-stripe-width: 100px;
	--bg-fade-colour: #00000075;
	--bg-fade-size: 30%;
	--font-colour: white;
	--border-colour: white;
	--link-colour: #f0c040;
	--content-border: 5px solid var(--border-colour);
	--content-border-radius: 20px;
	--form-border-radius: 10px;
	--content-bg-colour: #1a1a1a;
	--accent-font: "Atma", system-ui;
	--content-font: "Google Sans Code", monospace;
	--cursor-pointer: url('/static/images/cursor_pointer.webp?v=c01b870'), pointer;
}

body {
	margin: 0;
	padding: 0;
	background: var(--content-bg-colour);
	color: var(--font-colour);
	font-family: var(--content-font);
	font-size: 1.3rem;
	cursor: url('/static/images/cursor.webp?v=0f322fb'), auto;
}

a {
	cursor: var(--cursor-pointer);
	color: inherit;
	text-decoration: none;
}

/* Content links (links within paragraphs/text) */
p a, section a:not(.post-list a):not(#nav-links a):not(#footer-icons a) {
	color: var(--link-colour);
}

p a:hover, section a:not(.post-list a):not(#nav-links a):not(#footer-icons a):hover {
	color: black;
	background-color: white;
}

#nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 50;
}

#nav-overlay.open {
	display: block;
}

#page-container {
	background:
		linear-gradient(to bottom, var(--bg-fade-colour), transparent var(--bg-fade-size)),
		linear-gradient(to top, var(--bg-fade-colour), transparent var(--bg-fade-size)),
		repeating-linear-gradient(
			90deg,
			var(--bg-primary-colour) 0px,
			var(--bg-primary-colour) var(--bg-stripe-width),
			var(--bg-secondary-colour) var(--bg-stripe-width),
			var(--bg-secondary-colour) calc(var(--bg-stripe-width) * 2)
		);
	padding: 50px;
}

#content-container {
	position: relative;
	max-width: 1080px;
	background: var(--content-bg-colour);
	margin: 70px auto 0 auto;
	padding: 30px;
	padding-top: 75px;
	border-radius: var(--content-border-radius);
}

#content-container::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	border-radius: var(--content-border-radius);
	filter: url(#wonky);
	pointer-events: none;
}

#main-avatar {
	position: absolute;
	width: 150px;
	height: 150px;
	top: -90px;
	left: 30px;
	background: var(--content-bg-colour) url(/static/images/kravatar.webp?v=f957c97);
	border-radius: var(--content-border-radius);
	transform: rotate(5deg);
}

#main-avatar::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	border-radius: var(--content-border-radius);
	filter: url(#wonky);
	pointer-events: none;
}

#main-nav {
	position: absolute;
	top: -88px;
	right: 30px;
	font-size: 1.8rem;
}

#nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: var(--cursor-pointer);
	padding: 10px;
	flex-direction: column;
	gap: 6px;
}

#nav-toggle span {
	display: block;
	width: 30px;
	height: 4px;
	background: var(--font-colour);
	border-radius: 2px;
	transition: transform 0.3s, opacity 0.3s;
}

#nav-links {
	display: flex;
	gap: 30px;
}

#nav-links > a {
	cursor: var(--cursor-pointer);
	padding: 10px;
	font-family: var(--accent-font);
	position: relative;
	isolation: isolate;
}

#nav-links > a::before {
	content: '';
	position: absolute;
	inset: 0;
	background: white;
	transform: rotate(-2deg) skewX(-3deg);
	opacity: 0;
	z-index: -1;
}

#nav-links > a:nth-child(2)::before {
	transform: rotate(1.5deg) skewX(2deg);
}

#nav-links > a:nth-child(3)::before {
	transform: rotate(-1deg) skewX(-4deg);
}

#nav-links > a:nth-child(4)::before {
	transform: rotate(2.5deg) skewX(1deg);
}

#nav-links > a:nth-child(5)::before {
	transform: rotate(-1.5deg) skewX(3deg);
}

#nav-links > a:hover::before {
	opacity: 1;
}

#nav-links > a:hover {
	color: black;
}

section {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

footer {
	position: relative;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
}

footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	border-top: 5px solid var(--border-colour);
	filter: url(#wonky);
	pointer-events: none;
}

#footer-icons {
	display: flex;
	gap: 60px;
}

#footer-icons svg {
	width: 60px;
	height: 60px;
}

#footer-icons a {
	flex-shrink: 0;
}

hr {
	position: relative;
	border: none;
	height: 5px;
	margin: 2em 0;
	background: transparent;
	overflow: visible;
}

hr::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--border-colour);
	filter: url(#wonky);
	mask-image: repeating-linear-gradient(to right, black 0 8px, transparent 8px 16px);
}

.spacer {
	height: 30px;
}

h1 {
	margin: 0;
	font-family: var(--accent-font);
	font-size: 3rem;
}

h2 {
	margin: 0;
	font-family: var(--accent-font);
}

h1.with-margin {
	margin-bottom: 15px;
}

p {
	margin: 0;
}

.image-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 10px 0;
}

.image {
	position: relative;
	display: inline-block;
}

.image > img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--content-border-radius);
}

.image::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	border-radius: var(--content-border-radius);
	filter: url(#wonky);
	pointer-events: none;
}

@media (max-width: 999px) {
	:root {
		--bg-stripe-width: 50px;
	}

	body {
		font-size: 0.9rem;
	}

	.image-grid {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.image {
		width: fit-content;
	}

	#page-container {
		padding: 20px;
	}

	#content-container {
		margin-top: 70px;
		padding: 30px;
		padding-top: 60px;
	}

	#main-avatar {
		width: 100px;
		height: 100px;
		top: -50px;
		left: 30px;
		background-size: cover;
	}

	#nav-toggle {
		display: flex;
	}

	#main-nav {
		top: -60px;
		right: 20px;
	}

	#nav-links {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		flex-direction: column;
		background: var(--content-bg-colour);
		border-radius: var(--content-border-radius);
		padding: 15px;
		gap: 10px;
		min-width: 150px;
		z-index: 100;
	}

	#nav-links::after {
		content: '';
		position: absolute;
		inset: 0;
		border: var(--content-border);
		border-radius: var(--content-border-radius);
		filter: url(#wonky);
		pointer-events: none;
	}

	#nav-links.open {
		display: flex;
	}

	#main-nav.open #nav-toggle span:nth-child(1) {
		transform: rotate(45deg) translate(7px, 7px);
	}

	#main-nav.open #nav-toggle span:nth-child(2) {
		opacity: 0;
	}

	#main-nav.open #nav-toggle span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -7px);
	}

	h1 {
		font-size: 1.5rem;
	}

	#footer-icons {
		gap: 20px;
	}

	#footer-icons svg {
		width: 40px;
		height: 40px;
	}
}

.cursor-pointer {
	cursor: var(--cursor-pointer);
}

.image-pending {
	background: linear-gradient(
		90deg,
		#2a2a2a 0%,
		#3a3a3a 50%,
		#2a2a2a 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--content-border-radius);
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

#image-popout-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	z-index: 200;
	justify-content: center;
	align-items: center;
}

#image-popout-overlay.open {
	display: flex;
}

#image-popout-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: var(--cursor-pointer);
	z-index: 201;
}

#image-popout-close span {
	display: block;
	width: 30px;
	height: 4px;
	background: var(--font-colour);
	border-radius: 2px;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -2px;
}

#image-popout-close span:first-child {
	transform: rotate(45deg);
}

#image-popout-close span:last-child {
	transform: rotate(-45deg);
}

#image-popout-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 90vw;
	max-height: 90vh;
}

#image-popout-img-wrapper > img {
	display: block;
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: var(--content-border-radius);
}

#image-popout-img-wrapper {
	position: relative;
	min-height: 0;
	width: fit-content;
	flex: 1 1 auto;
	overflow: hidden;
}

#image-popout-img-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	border-radius: var(--content-border-radius);
	filter: url(#wonky);
	pointer-events: none;
}

#image-popout-title:empty {
	display: none;
}

#image-popout-title {
	text-align: center;
	padding: 15px 0;
	font-family: var(--accent-font);
	font-size: clamp(1rem, 4vw, 1.5rem);
	flex-shrink: 0;
}

/* Contact Form */
#contact-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 600px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-group label {
	font-family: var(--accent-font);
	font-size: 1.2rem;
}

.form-group input,
.form-group textarea {
	font-family: var(--content-font);
	font-size: 1rem;
	padding: 12px 15px;
	background: #2a2a2a;
	border: none;
	border-radius: var(--form-border-radius);
	color: var(--font-colour);
	outline: none;
	position: relative;
}

.form-group input,
.form-group textarea {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.form-group input:focus,
.form-group textarea:focus {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 1);
}

.form-group textarea {
	min-height: 120px;
}

textarea {
	resize: none;
}

.form-group input.error,
.form-group textarea.error {
	box-shadow: 0 0 0 3px rgba(255, 100, 100, 0.4);
}

.form-error:empty {
	display: none;
}

.form-error {
	color: #ff6b6b;
	font-size: 0.85rem;
}

.button-tray {
	margin-top: 10px;
}

#contact-submit {
	font-family: var(--accent-font);
	font-size: 1.3rem;
	padding: 15px 30px;
	background: transparent;
	border: none;
	color: var(--font-colour);
	cursor: var(--cursor-pointer);
	align-self: flex-start;
	position: relative;
	isolation: isolate;
}

#contact-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	transform: rotate(-2deg) skewX(-3deg);
	pointer-events: none;
	z-index: -1;
}

#contact-submit:hover::before {
	background: white;
}

#contact-submit:hover {
	color: black;
}

#contact-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#contact-status {
	font-size: 1rem;
	min-height: 1.5em;
}

#contact-status.success {
	color: #6bff6b;
}

#contact-status.error {
	color: #ff6b6b;
}

@media (max-width: 999px) {
	#contact-form {
		max-width: 100%;
	}

	#contact-submit {
		align-self: stretch;
	}
}

/* Post List */
.post-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.post-list li {
	display: block;
	background: #2a2a2a;
	border-radius: var(--form-border-radius);
}

.post-list li:hover {
	background: #3a3a3a;
}

.post-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 15px 20px;
}

.post-list time {
	font-size: 0.9rem;
	opacity: 0.7;
	white-space: nowrap;
}

@media (max-width: 999px) {
	.post-list a {
		flex-direction: column;
		gap: 5px;
	}

	.post-list time {
		font-size: 0.8rem;
	}
}

time {
	display: block;
	opacity: 0.7;
	margin-bottom: 15px;
}

.post-list time {
	margin-bottom: 0;
}

/* Project metadata row */
.project-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
}

.project-meta time {
	margin-bottom: 0;
}

.project-meta a {
	color: #f0c040;
}

.project-meta a:hover {
	color: black;
	background-color: white;
}

.project-meta a::before {
	content: '[';
}

.project-meta a::after {
	content: ']';
}

/* Post Navigation */
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 30px;
}

.post-nav a {
	padding: 15px 20px;
	background: #2a2a2a;
	border-radius: var(--form-border-radius);
	max-width: 45%;
	font-family: var(--accent-font);
	font-size: 1.2rem;
}

.post-nav a:hover {
	background: #3a3a3a;
}

.post-nav-newer {
	margin-left: auto;
	text-align: right;
}

.post-nav-spacer {
	flex: 1;
}

@media (max-width: 999px) {
	.post-nav {
		flex-direction: column;
		gap: 15px;
	}

	.post-nav a {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.post-nav-newer {
		text-align: left;
	}
}

/* Comments Section */
.comments-section {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 5px solid var(--border-colour);
}

.comments-section h2 {
	margin-bottom: 20px;
}

.no-comments {
	opacity: 0.7;
	font-style: italic;
}

.comments-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.comment {
	background: #2a2a2a;
	border-radius: var(--form-border-radius);
	padding: 15px 20px;
}

.comment-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
	gap: 15px;
}

.comment-author {
	font-family: var(--accent-font);
	font-size: 1.1rem;
}

.comment-header time {
	font-size: 0.85rem;
	opacity: 0.7;
	margin-bottom: 0;
}

.comment-content {
	line-height: 1.5;
}

/* Comment Form */
.comment-form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 600px;
	margin-top: 30px;
}

.comment-form h3 {
	margin: 0;
	font-family: var(--accent-font);
}

.form-hint {
	font-size: 0.85rem;
	opacity: 0.6;
	margin-top: 5px;
}

#comment-submit {
	font-family: var(--accent-font);
	font-size: 1.3rem;
	padding: 15px 30px;
	background: transparent;
	border: none;
	color: var(--font-colour);
	cursor: var(--cursor-pointer);
	align-self: flex-start;
	position: relative;
	isolation: isolate;
}

#comment-submit::before {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--content-border);
	transform: rotate(-2deg) skewX(-3deg);
	pointer-events: none;
	z-index: -1;
}

#comment-submit:hover::before {
	background: white;
}

#comment-submit:hover {
	color: black;
}

#comment-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#comment-status {
	font-size: 1rem;
	min-height: 1.5em;
}

#comment-status.success {
	color: #6bff6b;
}

#comment-status.error {
	color: #ff6b6b;
}

@media (max-width: 999px) {
	.comment-header {
		flex-direction: column;
		gap: 5px;
	}

	.comment-form {
		max-width: 100%;
	}

	#comment-submit {
		align-self: stretch;
	}
}

/* View Post Link (on front page) */
a.view-post-link {
	display: block;
	margin-top: 30px;
	font-family: var(--accent-font);
	opacity: 0.7;
}

a.view-post-link:hover {
	opacity: 1;
}

/* Like Button */
.like-container {
	margin-top: 20px;
}

.like-label {
	color: var(--link-colour);
}

.like-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: #2a2a2a;
	border: none;
	border-radius: 20px;
	color: var(--font-colour);
	font-family: var(--content-font);
	font-size: 0.9rem;
	cursor: var(--cursor-pointer);
	transition: background 0.2s;
	vertical-align: middle;
}

.like-button:hover {
	background: #3a3a3a;
}

.like-button.liked {
	background: #3a5a3a;
}

.like-button img {
	display: block;
}