html {
	margin: 0 2% auto;
	background-color: #282a36;
	color: #fff;
}
body {
	line-height: 1.4;
	font-size: 14px;
	margin: 4em 4em auto;
	padding: 0 0.55em;

	margin-bottom: 20vh;

	@media (max-width: 800px) {
		line-height: 1;
		font-size: 10px;
	}
}
@font-face {
	font-family: 'Teletactile';
	src: url('/assets/Teletactile.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
html,
body {
	font-family: 'Teletactile', sans-serif;
}

header {
	display: flex;
}
header ul {
	float: right;
}
header span {
	list-style-type: none;
	display: inline;
	padding: 0 0.2rem 0 0.2rem;
	vertical-align: middle;
}
a {
	text-decoration: none;
	color: #ffb428;
	position: relative;
	transition: text-shadow 0.3s ease, color 0.3s ease;
}
a:hover {
	color: #fff; /* makes the main text white so the RGB pops */
	text-shadow: 4px 0 rgba(255, 0, 0, 0.376), -4px 0 rgba(0, 255, 255, 0.473),
		0 4px rgba(0, 0, 255, 0.45), 0 -4px rgba(0, 255, 0, 0.385);
}
.social {
	width: 35px;
	fill: #ffb428; /* same base color as link */
	transition: fill 0.3s ease, filter 0.3s ease;
	cursor: pointer;
}

.social:hover {
	fill: #fff; /* main color white on hover */
	filter: drop-shadow(4px 0 rgba(255, 0, 0, 0.376))
		drop-shadow(-4px 0 rgba(0, 255, 255, 0.473))
		drop-shadow(0 4px rgba(0, 0, 255, 0.45))
		drop-shadow(0 -4px rgba(0, 255, 0, 0.385));
}

.tag,
time.post {
	display: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 8px;
	border: #fff solid 0.5px;
	border-radius: 2px;
	padding: 4px;
	margin-right: 5px;
}
ul.nav {
	list-style: none;
	padding-left: 0;
	line-height: 50px;
}
h1.title {
	margin-bottom: -10px;
}
pre,
code {
	background-color: #44475a;
	color: #fff;
	border-radius: 5px;
	padding: 5px;
	font-size: 10px;
	overflow-x: auto;
	width: 90%;
	margin: auto;
}
.inserted-sign {
	background-color: hsl(126, 31%, 39%);
}
.token.prefix.inserted,
.token.prefix.deleted {
	background-color: #15202b;
}
.deleted-sign {
	background-color: hsl(0, 51%, 37%);
}
mark {
	background-color: #f1fa8c;
}
.post-nav-next {
	float: right;
}
blockquote {
	background-color: #44475a;
	border-left: 10px solid #ccc;
	margin: 1.5em 10px;
	padding: 0.5em 10px;
}
blockquote p {
	display: inline;
}

.layout {
	display: flex;
	gap: 2rem;
}

.left-col {
	flex: 1;
	max-width: 45%;
}

.right-col {
	flex: 2;
	max-width: 45%;
}

@media (max-width: 800px) {
	.layout {
		flex-direction: column-reverse;
	}

	.left-col,
	.right-col {
		max-width: 100%;
	}
}

.post-columns {
	display: flex;
	gap: 2rem;
	margin: 2rem 0;
}

.post-columns > div {
	flex: 1;
	min-width: 200px; /* ensures columns don’t collapse too small */
}

/* Responsive for mobile */
@media (max-width: 800px) {
	.post-columns {
		flex-direction: column;
	}
}

.subtitle {
	margin-block: 16px;
}

ul {
	list-style: none;
}

.post-columns li p {
	line-height: 1.4; /* matches paragraph line-height */
	margin: 0 0 1em 0; /* bottom margin same as paragraphs */
}

/* Make all images inside posts responsive */
.right-col img,
.post-columns img,
.post-content img {
	max-width: 100%; /* never exceed container width */
	height: auto; /* maintain aspect ratio */
	display: block; /* removes inline spacing issues */
	margin: 1rem 0; /* spacing above and below */
}

/* Optional: center images */
.right-col img {
	margin-left: auto;
	margin-right: auto;
}

.video-bg-wrapper {
	position: fixed; /* stay behind all content */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -1; /* send behind content */
}

.video-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover; /* scale and crop to cover */
	z-index: -1;
}

.site-content {
	position: relative;
	z-index: 1; /* sit above video */
	color: #fff; /* optional: text color for contrast */
}
.sticky-footer {
	position: fixed; /* stay fixed on the viewport */
	bottom: 1rem; /* distance from bottom */
	left: 1rem; /* distance from left */
	display: flex;
	flex-direction: column; /* stack logo above text */
	align-items: flex-start; /* align left */
	gap: 2rem; /* spacing between logo and text */
	padding: 2rem 4rem;
	border-radius: 5px;
	z-index: 1000; /* sit above other content */
	color: #fff;
	font-size: 0.5rem;
}

.sticky-footer .footer-logo {
	height: 10vh; /* adjust logo size */
	width: auto;

	@media (max-width: 800px) {
		height: 5vh;
	}
}
/* CRT Overlay Effects */
.crt-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1000;
	overflow: hidden;
}

/* More visible scanlines */
.crt-scanlines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(255, 119, 0, 0.06) 6px,
		rgba(255, 136, 0, 0.06) 4px
	);
	animation: crtScanlineMove 0.1s linear infinite;
	mix-blend-mode: overlay;
}

@keyframes crtScanlineMove {
	0% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(4px);
	}
}

/* More prominent mouse-reactive glow */
.crt-glow {
	position: absolute;
	width: 200px;
	height: 200px;
	background: radial-gradient(
		circle,
		rgba(255, 115, 0, 0.305) 0%,
		rgba(255, 136, 0, 0.15) 25%,
		rgba(255, 25, 0, 0.05) 50%,
		transparent 70%
	);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.1s ease;
	transform: translate(-50%, -50%);
	mix-blend-mode: screen;
}

/* Screen curvature vignette */
.crt-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		ellipse at center,
		transparent 60%,
		rgba(0, 0, 0, 0.15) 90%,
		rgba(0, 0, 0, 0.4) 100%
	);
	z-index: 1;
}

.crt-overlay::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 255, 0, 0.01);
	z-index: 2;
	animation: crtFlicker 0.15s infinite linear alternate;
}

@keyframes crtFlicker {
	0% {
		opacity: 1;
	}
	98% {
		opacity: 1;
	}
	99% {
		opacity: 0.8;
	}
	100% {
		opacity: 1;
	}
}

/* NEW: Mouse distortion effect */
.crt-distortion {
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.15s ease;
	transform: translate(-50%, -50%);
	background: radial-gradient(
		circle,
		transparent 30%,
		rgba(255, 100, 100, 0.05) 40%,
		rgba(100, 255, 100, 0.03) 50%,
		rgba(100, 100, 255, 0.05) 60%,
		transparent 70%
	);
	z-index: 4;
	animation: distortionWave 2s ease-in-out infinite;
	mix-blend-mode: multiply;
}

@keyframes distortionWave {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1) rotate(0deg);
		filter: blur(0px);
	}
	25% {
		transform: translate(-50%, -50%) scale(1.05) rotate(1deg);
		filter: blur(0.5px);
	}
	50% {
		transform: translate(-50%, -50%) scale(0.95) rotate(-1deg);
		filter: blur(0.3px);
	}
	75% {
		transform: translate(-50%, -50%) scale(1.02) rotate(0.5deg);
		filter: blur(0.2px);
	}
}

/* Mobile optimization */
@media (max-width: 800px) {
	.crt-scanlines {
		opacity: 1;
	}

	.crt-glow,
	.crt-distortion {
		display: none;
	}
}

/* Hide video on small screens, show image */
.desktop-video {
	display: block;
	width: 100%;
	height: auto;
}

.mobile-image {
	display: none;
	width: 100%;
	height: auto;
}

@media (max-width: 800px) {
	.desktop-video {
		display: none;
	}
	.mobile-image {
		display: block;
	}
}