:root {
	/* Backgrounds */
	--bg-primary: #f2f2f2;
	--bg-secondary: #f5f7f9;

	/* Text */
	--text-primary: #1a1a1a;
	--text-secondary: #555555;

	/* Borders */
	--border-light: #e0e4e8;
	--border-medium: #bbbbbb;

	/* Buttons */
	--btn-bg: #1a73e8;
	--btn-bg-hover: #3382ea;
	--btn-text: #ffffff;

	/* Effects */
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.1);
	--overlay: rgba(0, 0, 0, 0.5);

	/* Transitions */
	--transition: 200ms ease;

	/* Typography */
	--font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Links */
	--link-color: #333333;
	--link-hover: #555555;
	--link-underline: #c8c8c8;
}

/* Automatic dark mode via system preference */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #0f0f0f;
		--bg-secondary: #1a1a1a;

		--text-primary: #f5f5f5;
		--text-secondary: #b0b0b0;

		--border-light: #2a2a2a;
		--border-medium: #181818;

		--btn-bg-hover: #2b7de9;
		--btn-text: #f5f5f5;

		--shadow-card: 0 0 10px rgba(0, 0, 0, 0.5);
		--shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.6);
		--overlay: rgba(0, 0, 0, 0.8);

		--link-color: #f5f5f5;
		--link-hover: #ffffff;
		--link-underline: #424242;
	}
}

body {
	font-family: var(--font);
	color: var(--text-primary);
	background-color: var(--bg-primary);
	line-height: 1.5;
	margin: 0;
	transition: background-color var(--transition), color var(--transition);
	-webkit-font-smoothing: antialiased;
}

a:link, a:visited {
	color: var(--text-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--link-underline);
	transition: border-color var(--transition), color var(--transition);
}

a:hover {
	color: var(--text-primary);
	border-bottom-color: var(--text-primary);
}

header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-light);
	height: 5rem;
	margin-bottom: 2rem;
	padding: 0 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background-color var(--transition), border-color var(--transition);
}

.name {
	display: flex;
	align-items: center;
}

.name h1 {
	margin: 0;
}

.name h1 a {
	color: var(--text-primary);
	text-decoration: none;
	border: none;
	transition: color var(--transition);
}

.name h1 a:hover {
	color: var(--text-secondary);
	border: none;
}

.social-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.social-links a {
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--transition), transform var(--transition);
	border: none;
}

.social-links a:hover {
	color: var(--text-primary);
	transform: translateY(-2px);
	border: none;
}

.projects-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	max-width: min(90%, 1600px);
	margin: 0 auto;
	padding: 0 1rem 3rem 1rem;
}

.project-card {
	width: 100%;
	border-radius: 7.5px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-card);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: start;
	transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition);
}

.project-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
}

/* 600px+: Tablet (2 columns) */
@media (min-width: 600px) {
	.project-card {
		width: calc(50% - 1rem);
	}
}

/* 1024px+: Desktop (3 columns) */
@media (min-width: 1024px) {
	.project-card {
		width: calc(33.333% - 1.34rem);
	}
}

/* 1600px+: Large (4 columns) */
@media (min-width: 1600px) {
	.project-card {
		width: calc(25% - 1.5rem);
	}
}

.project-image {
	border-top-left-radius: 7.5px;
	border-top-right-radius: 7.5px;
}

.project-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	background-color: var(--bg-primary);
	border-top-left-radius: 7.5px;
	border-top-right-radius: 7.5px;
	border-bottom: 1.5px solid var(--border-light);
	display: block;
}

.project-text {
	padding: 1rem;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.project-title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.project-text h3 {
	margin-top: 0;
	margin-bottom: 0.15rem;
	font-size: 1.5rem;
}

.project-year {
	font-size: 0.9rem;
	color: #888888;
	white-space: nowrap;
	font-weight: normal;
}

.project-text p {
	color: var(--text-secondary);
}

.project-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1rem 1rem 1rem;
}

.footer-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.tech-icons {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	margin-left: auto;
}

.tech-icons i {
	font-size: 2.25rem;
}

.project-footer button {
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 5px;
	background-color: var(--btn-bg);
	color: var(--btn-text);
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background-color var(--transition);
}

.project-footer button:hover {
	background-color: var(--btn-bg-hover);
}

button:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

#video-player-modal {
	background-color: var(--overlay);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	justify-content: center;
	align-items: center;
}

#video-player-modal iframe {
	width: min(90vw, 960px);
	aspect-ratio: 16 / 9;
	max-height: 90vh;
	border: none;
}