:root {
	/* Neutrals */
	--bg: #f8fafc;
	--surface: #ffffff;
	--surface-2: #f1f5f9;
	--text: #0f172a;
	--muted: #475569;
	--border: #e2e8f0;

	/* Brand */
	--accent: #2563eb;
	--accent-hover: #1d4ed8;

	/* UI */
	--radius: 8px;
	--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
	--shadow-soft: 0 6px 18px rgba(2, 6, 23, 0.06);
}

/* Global body reset */
body {
	background: var(--bg);
	color: var(--text);
	font-family:
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;
}

/* Links */
a {
	color: var(--accent);
	text-decoration: none;
}
a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* “Card” look for major sections (outer wrappers / big rows) */
:where(
  .container-grid.container-5,   /* index: row with “What I'm all about” + thumbnails */
  .container-grid.container-9,   /* index: row with large thumbs */
  .container-grid.container-13,  /* index: row with “Let’s get in touch” */
  .container-grid.container-18,  /* about: hero row */
  .container-grid.container-21,  /* about: “Why I Design / My Achievements” row */
  .container-grid.container-24,  /* about: “Honors / Certificates” row */
  .container-grid.container-27,  /* portfolio: hero row */
  .container-grid.container-30,  /* portfolio: main content */
  .container-grid.container-31,  /* contact: intro block */
  .container-grid.container-33   /* contact: form wrapper */
) {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

/* Headings feel more pro */
h1,
h2,
h3 {
	letter-spacing: 0.01em;
	color: var(--text);
}

/* Body text readability */
p,
li {
	color: var(--muted);
	line-height: 1.65;
	font-family:
		system-ui,
		-apple-system,
		Segoe UI,
		Roboto,
		Arial,
		sans-serif;
}

.pmuted {
	color: var(--muted);
	line-height: 1.65;
}

/* Force your main “text panels” to follow the theme surfaces */
:where(
  /* index panels */
  .container-grid.container-7,
  .container-grid.container-12,
  .container-grid.container-14,

  /* about panels */
  .container-grid.container-20,
  .container-grid.container-22,
  .container-grid.container-23,
  .aboutleft1,
  .aboutleft2,
  .container-grid.container-26,

  /* portfolio panels */
  .container-grid.container-30,

  /* contact panels */
  .container-grid.container-33
) {
	background: var(--surface) !important;
}

/* Alternate every other panel (so the page "stripes" naturally) */
:where(
  /* index */
  .container-grid.container-12,

  /* about */
  .container-grid.container-23,
  .aboutleft2
) {
	background: var(--surface-2) !important;
}

.bebasneue {
	letter-spacing: 0.03em;
}

.thumb {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
	transition:
		transform 140ms ease,
		box-shadow 140ms ease;
}
.thumb:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

/* Nav Effects */

.container-grid.container-4 a {
	position: relative;
	color: #222;
	text-decoration: none;
	font-weight: 500;
	margin: 0 1rem;
	padding: 0.25rem 0;
	transition: color 0.2s ease;
}

.container-grid.container-4 a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background-color: #6c63ff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.container-grid.container-4 a:hover {
	color: #6c63ff;
}

.container-grid.container-4 a:hover::after {
	transform: scaleX(1);
}

.container-grid.container-2 {
	border-bottom-style: solid;
	border-bottom-width: 0.0625rem;
	border-bottom-color: rgba(136, 136, 136, 1);
}

.spotlight-group.pswp-gallery,
#gallery-coding {
	width: 100% !important; /* override the 600/500/300px rules */
	max-width: 1200px; /* pick whatever feels right */
	margin: 0 auto; /* centers the whole gallery block */
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centers rows of thumbs */
	gap: 10px; /* modern spacing between thumbs */
}

/* Make each thumbnail behave like a “card” */
.spotlight-group.pswp-gallery a {
	display: block;
}

/* Prevent inline-img spacing quirks */
.spotlight-group.pswp-gallery img,
#gallery-coding img {
	display: block;
  margin-bottom: 10px;
}


#gallery-fig {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

#gallery-fig p {
	color: #000;
  max-width: 540px;
  padding-top: 10px;
}