h1 {
	font-family: 'Orbital';
}

.navbar-brand {
	/*
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	*/
	font-family: 'Orbital';
	letter-spacing: 1pt;
	font-size: 24pt;
}

.navbar-brand a:hover {
	text-decoration: none;
}

.WebStateIndicator {
	font-size: 0.8rem;
	position: relative;
	left: 50px;
	top: -10px;
	font-family: 'JetBrainsMono';
}

.container {
	margin-right: 0%;
	margin-left: 0%;
	width: 100%;
}

.containerfooter {
	margin-left: 50%;
	transform: translatex(-50%);
}

.MakelekTextHeader {
	position: relative;
	left: -10px;
}

@keyframes pulse {

	0%,
	100% {
		filter: drop-shadow(0 0 2px var(--accentTransparent));
	}

	50% {
		filter: drop-shadow(0 0 10px var(--accentTransparent));
	}
}

.glowing-accent {
	color: var(--accentColor);

	animation: pulse 2s infinite ease-in-out;
}



.navbar {
	padding-top: 0%;
	padding-bottom: 0%;
	font-size: 12pt;
	font-weight: bold;
}

hr {
	border-top: 2px solid var(--accentColor);
	border-bottom: 5px solid rgba(0, 0, 0, 0.3);
	margin-bottom: 15pt;
	margin-top: -4pt;
}

.color1 {
	color: var(--accentColor)
}

.color2 {
	color: var(--textColor);
}

header {
	min-height: 50px;
}


.text {
	font-size: 24pt;
}


footer {
	min-height: 30px;
	/*box-shadow: 0 50vh 0 50vh var(--dark);
 */
	position: absolute;
	right: 0;
	bottom: -30px;
	left: 0;
	width: 100%;
	padding: 0.25rem;
	text-align: center;
}

body {
	position: relative;
	margin: 0;
	padding-bottom: 80px;
	min-height: 100%;
	/* padding-top: 65px; */
}

html {
	height: 100%;
	box-sizing: border-box;
}

/* Content */
.contact {
	padding: 14pt;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--dark-transparent);
}

.contact .col-4 img {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.contact .col-lg-12 > div:not(.tools-grid) {
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 12pt;
}

/* Projects */
/* We can't work with clip path since this lags a lot on my laptop */
/* Badges defined in /css/Theme.css */

.card-number {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
	margin-top: 15px;
	width: 40px;
	color: color-mix(in srgb, var(--textColor) 25%, transparent);
	font-weight: 400;
	font-size: 0.9rem;
	border-radius: 8px;
	font-family: 'Orbital';
	letter-spacing: 1px;
}

.card-deck {
	margin: 10px !important;
	margin-top: 30px !important;
}

.card {

	flex-grow: 1;
	padding: 20px;
	background: var(--dark-transparent);
	color: var(--textColor) !important;

	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--textColor) 8%, transparent);
}

.card:hover {
	background: var(--brighter);
	cursor: pointer;
	text-decoration: none;
	border-color: var(--accentTransparent);
}

.card:hover .card-img {
	box-shadow: 0px 0px 10px var(--accentColor);
}

.card p,
.card h5 {
	z-index: 25;
}

/* Card backdrop with blur seems to lag as well... :( */
.card-backdrop {
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
	aspect-ratio: 1 / 1;
	width: 40%;
	height: 100%;
	z-index: 0;
	--blur-size: 10px;
	filter: blur(var(--blur-size));
	-webkit-filter: blur(var(--blur-size));
	opacity: 0.1;
}

.card-title {
	font-family: 'Orbital';
	letter-spacing: 3.5pt;
}

.card-text,
.text-muted {
	font-family: 'JetBrainsMono';
}

.card-rim {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: var(--accentTransparent);
	width: 100%;
	height: 100%;
	content: "";
	--weight: 0px;
	/* clip-path: polygon(
        calc(100% - var(--weight)) 0%, 
        100% 0%,
		100% 100%, 
        calc(90% - var(--weight)) 100%
    ); */
}

.card:hover .card-rim {
	background-color: var(--accentColor);
}

.card-container {
	height: 100%;
}

.card-img {
	aspect-ratio: 1/1;
	max-width: 200px;
	max-height: 200px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0px 0px 10px black;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


.row {
	/* height: 100%; */
}

.card-deck {


	position: relative;
	left: 50%;
	transform: translateX(-52.5%);
	max-width: 1200px;
}

.card-deck:hover {
	filter: grayscale(0);
}

@media (min-width: 560px) and (max-width: 1199px) {
	.card-deck {
		display: block !important;
		/* Forces cards to stack vertically */
	}

	.card-deck .card {
		flex: 0 0 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		margin-bottom: 15px !important;
		/* Restores vertical spacing */
	}
}

@media (min-width: 1200px) {
	.card-deck .card {
		-ms-flex: 1 0 0%;
		flex: 1 0 0%;
		margin-right: 15px;
		margin-bottom: 0;
		margin-left: 15px;
	}

}

@media (max-width: 1200px) {
	.card-number {
		width: 100%;
	}

	.card-backdrop {
		width: 100%;
		height: 50%;

	}

	.card-rim {
		visibility: hidden;
	}

	.card-img {
		left: 50%;

		transform: translate(-50%, -50%);
	}

	.card-deck {
		max-width: 450px;
	}

	.card {
		border-color: color-mix(in srgb, var(--textColor) 10%, transparent);
	}
}


/* ── Entry Title Banner ──
   Full-viewport overlay that shows the page name on first visit,
   then fades out. Created by sessionManager.js. */

@keyframes entryFade {
	0%   { opacity: 1; }
	60%  { opacity: 1; }
	100% { opacity: 0; }
}

.EntryTitle {
	position: fixed;
	inset: 0;
	z-index: 5000;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--backgroundColor) 85%, transparent);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: entryFade 4s forwards;
}

.EntryTitle h1 {
	font-family: 'Orbital', sans-serif;
	letter-spacing: 12pt;
	text-transform: uppercase;
	color: var(--textColor);
	white-space: nowrap;
	margin: 0;
	font-size: clamp(20px, 5vw, 48px);
}


/* Blog Cards New */
.card-date {
	text-align: center;

}

.blog-card {
	width: 100%;
	margin: 20px;
	flex-grow: 1;
	position: relative;
	background: var(--dark-transparent);
	color: var(--textColor) !important;
	text-decoration: none;
	border-radius: 8px;
}

.blog-card:hover {
	cursor: pointer;
	text-decoration: none;
}

.blog-card:hover .blog-card-img {
	box-shadow: 0px 0px 10px var(--accentColor);
}

/* Left cards: dot on RIGHT — gradient from right, open on left (mirrors project card) */
.timeline-item.left .blog-card {
	border: 1px solid transparent;
	border-left: 0;
	background-image:
		linear-gradient(var(--dark-transparent), var(--dark-transparent)),
		linear-gradient(to left, var(--accentVeryTransparent), transparent);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.timeline-item.left .blog-card:hover {
	background-image:
		linear-gradient(var(--dark-transparent), var(--dark-transparent)),
		linear-gradient(to left, var(--accentColor), transparent);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/* Right cards: dot on LEFT — gradient from left, open on right (exact project card match) */
.timeline-item.right .blog-card {
	border: 1px solid transparent;
	border-right: 0;
	background-image:
		linear-gradient(var(--dark-transparent), var(--dark-transparent)),
		linear-gradient(to right, var(--accentVeryTransparent), transparent);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.timeline-item.right .blog-card:hover {
	background-image:
		linear-gradient(var(--dark-transparent), var(--dark-transparent)),
		linear-gradient(to right, var(--accentColor), transparent);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/* Selecting like this to have priority. */
.card-deck a {
	color: var(--textColor);
	text-decoration: none;
}

.card-body {}

.blog-card-img {
	width: 100%;
	height: 50px;
	object-fit: cover;
	border-radius: 8px;
}

.blog-card hr {
	width: 100%;
	border: 1px solid var(--accentVeryTransparent);
}

.blog-card-left {
	padding: 20px
}

/* Timeline Layout */
.timeline {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
}

/* Thicker central column background — invisible, kept for spacing geometry */
.timeline::before {
	content: '';
	position: absolute;
	width: 140px;
	background: transparent;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -70px;
	z-index: 0;
}

/* The actual center line */
.timeline::after {
	content: '';
	position: absolute;
	width: 0;
	border-left: 2px dotted var(--timeline-line);
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -1px;
	z-index: 0;
}

.timeline-item {
	padding: 10px 120px;
	position: relative;
	background-color: inherit;
	width: 50%;
	box-sizing: border-box;
	z-index: 1;
}

.timeline-item.left {
	left: 0;
}

.timeline-item.right {
	left: 50%;
}

.timeline-item.left::before {
	content: '';
	position: absolute;
	right: 60px;
	top: 50%;
	width: 60px;
	height: 2px;
	background: var(--accentColor);
	z-index: 0;
}

.timeline-item.left::after {
	content: '';
	position: absolute;
	right: 60px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 12px;
	background: var(--accentColor);
	z-index: 10;
}

.timeline-item.right::before {
	content: '';
	position: absolute;
	left: 60px;
	top: 50%;
	width: 60px;
	height: 2px;
	background: var(--accentColor);
	z-index: 0;
}

.timeline-item.right::after {
	content: '';
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 12px;
	background: var(--accentColor);
	z-index: 10;
}

.timeline-dot {
	position: absolute;
	width: 16px;
	height: 16px;
	background-color: var(--dark);
	border: 1px solid var(--accentTransparent);
	top: 50%;
	border-radius: 50%;
	z-index: 5;
}

.timeline-item.left .timeline-dot {
	right: 120px;
	transform: translate(50%, -50%);
}

.timeline-item.right .timeline-dot {
	left: 120px;
	transform: translate(-50%, -50%);
}

.timeline-date {
	position: absolute;
	top: 50%;
	font-family: 'JetBrainsMono';
	font-weight: bold;
	color: var(--textColor);
	width: 120px;
	z-index: 10;
	text-align: center;
	background-color: rgb(14, 12, 13);
	background-color: var(--dark);
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid var(--glow);
	box-shadow: 0 0 8px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.timeline-item.left .timeline-date {
	right: 0;
	transform: translate(50%, -50%);
}

.timeline-item.right .timeline-date {
	left: 0;
	transform: translate(-50%, -50%);
}

.timeline-date-sub {
	display: block;
	font-size: 0.65em;
	font-weight: normal;
	opacity: 0.45;
	margin-top: 2px;
}

.timeline-item .blog-card {
	margin: 0;
	width: 100%;
	display: block;
}

.timeline-item:has(.blog-card:hover) .timeline-dot {
	background-color: var(--accentColor);
	border-color: var(--accentColor);
	box-shadow: 0 0 8px var(--accentColor), 0 0 20px var(--accentTransparent);
}

.timeline-item:has(.blog-card:hover)::before {
	box-shadow: 0 0 4px var(--accentTransparent);
}

@media (max-width: 1200px) {
	.timeline::before {
		left: 80px;
		/* Keep thick column over the dot line */
		width: 140px;
		margin-left: -70px;
	}

	.timeline::after {
		left: 80px;
	}

	.timeline-item {
		width: 100%;
		padding-left: 200px;
		/* Expand out to escape the 150px edge (80 + 70) + 50px gap */
		padding-right: 25px;
	}

	.timeline-item.right {
		left: 0;
	}

	.timeline-item.left::before,
	.timeline-item.right::before {
		left: 140px;
		right: auto;
		width: 60px;
		/* Connect from date right edge (80px center + 60px half-width) to 200px card edge */
	}

	.timeline-item.left::after,
	.timeline-item.right::after {
		left: 140px;
		right: auto;
		transform: translateY(-50%);
	}

	.timeline-item.left .timeline-dot,
	.timeline-item.right .timeline-dot {
		left: 200px;
		/* Move dot to new padding box edge */
		right: auto;
		transform: translate(-50%, -50%);
	}

	.timeline-item.left .timeline-date,
	.timeline-item.right .timeline-date {
		position: absolute;
		left: 80px;
		/* Placed cleanly above the track line */
		right: auto;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		background: var(--dark);
		text-shadow: none;
	}

	/* Single column: dot always on left — reset both sides to right-card style */
	.timeline-item.left .blog-card,
	.timeline-item.right .blog-card {
		border: 1px solid transparent;
		border-right: 0;
		background-image:
			linear-gradient(var(--dark-transparent), var(--dark-transparent)),
			linear-gradient(to right, var(--accentVeryTransparent), transparent);
		background-origin: border-box;
		background-clip: padding-box, border-box;
	}

	.timeline-item.left .blog-card:hover,
	.timeline-item.right .blog-card:hover {
		background-image:
			linear-gradient(var(--dark-transparent), var(--dark-transparent)),
			linear-gradient(to right, var(--accentColor), transparent);
		background-origin: border-box;
		background-clip: padding-box, border-box;
	}

}

/* Phone: compact single-column layout — project-card style, alternating open edge */
@media (max-width: 576px) {
	.timeline {
		padding: 20px 0;
	}

	.timeline::before {
		display: none;
	}

	.timeline::after {
		left: 14px;
	}

	.timeline-item {
		padding-left: 28px;
		padding-right: 0;
	}

	/* Hide the horizontal connector and tick — no room for them */
	.timeline-item.left::before,
	.timeline-item.right::before,
	.timeline-item.left::after,
	.timeline-item.right::after {
		display: none;
	}

	/* Dot sits on the track */
	.timeline-item.left .timeline-dot,
	.timeline-item.right .timeline-dot {
		left: 14px;
		right: auto;
		transform: translate(-50%, -50%);
	}

	/* Date: pull out of absolute flow, sits above card as an inline tag */
	.timeline-item.left .timeline-date,
	.timeline-item.right .timeline-date {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		display: inline-block;
		width: auto;
		text-align: left;
		margin-bottom: 6px;
		font-size: 0.75rem;
		padding: 2px 8px;
		background: var(--dark);
	}

	/* All phone cards: consistent project-card style — open right, line on left, gradient from left */
	.timeline-item.left .blog-card,
	.timeline-item.right .blog-card {
		border-radius: 8px 0 0 8px;
		border-right: 0;
		background-image:
			linear-gradient(var(--dark-transparent), var(--dark-transparent)),
			linear-gradient(to right, var(--accentVeryTransparent), transparent);
		background-origin: border-box;
		background-clip: padding-box, border-box;
	}

	.timeline-item.left .blog-card::before,
	.timeline-item.right .blog-card::before {
		content: "";
		position: absolute;
		left: -1px;
		top: 10%;
		bottom: 10%;
		width: 2px;
		background: linear-gradient(to bottom,
			transparent,
			var(--accentTransparent),
			var(--accentColor) 50%,
			var(--accentTransparent) 80%,
			transparent);
		z-index: 2;
		filter: blur(1px) drop-shadow(0 0 5px var(--accentTransparent));
	}

	.timeline-item.left .blog-card:hover,
	.timeline-item.right .blog-card:hover {
		background: var(--brighter);
		background-image:
			linear-gradient(var(--dark-transparent), var(--dark-transparent)),
			linear-gradient(to right, var(--accentColor), transparent);
		background-origin: border-box;
		background-clip: padding-box, border-box;
	}
}

/* EntryTitle mobile: handled by clamp() and flex, no overrides needed */

@media (prefers-color-scheme: light) {
	hr {
		border-bottom-color: rgba(0, 0, 0, 0.08);
	}

	/* Replace black card-img shadow with soft warm shadow */
	.card-img {
		box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.14);
	}

	.card-number {
		color: color-mix(in srgb, var(--textColor) 30%, transparent);
	}

	/* Timeline date: distinct background so it doesn't blend with page bg */
	.timeline-date {
		background: var(--brighter) !important;
		box-shadow: 0 0 6px var(--accentTransparent);
	}

	/* Timeline hover: softer glow on dot and track */
	.timeline-item:has(.blog-card:hover) .timeline-dot {
		box-shadow: 0 0 6px var(--accentColor), 0 0 14px var(--accentTransparent);
	}

	.timeline-item:has(.blog-card:hover)::before {
		box-shadow: 0 0 3px var(--accentTransparent);
	}

	/* Card hover glow: soften */
	.card:hover .card-img {
		box-shadow: 0px 0px 8px var(--accentTransparent);
	}

	.blog-card {
		border-color: var(--accentTransparent);
	}

}