:root{
	--bg: rgba(40, 40, 40);
	--card-bg: rgba(40, 40, 40,0.65);
	--card: #3c3836;
	--text: #fbf1c7;
	--muted: #ebdbb2;
	--accent: #fabd2f;
	--card-gradient: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.05));

	/* Color Scheme: https://github.com/morhetz/gruvbox?tab=readme-ov-file */

	/* Light mode colors*/
	--card-gradient-light: linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,0.05));
	--bg-light: #fbf1c7;
	--card-bg-light: rgb(251, 241, 199,0.85);
	--card-light: #ebdbb2;
	--text-light: #282828;
	--muted-light: #3c3836;
	--accent-light: #f5ae2b;;

	

}
*{box-sizing:border-box}
html,body{height:100%}

@font-face {
	font-family: 'Jetbrains';
	src: url(/fonts/JetBrainsMono-Regular.ttf) format('truetype');
}

body{
	margin:0;
	font-family:'Jetbrains',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
	background-color:var(--bg);
	color:var(--text);
	display:flex;
	flex-direction:column;
	min-height:100vh;
}

.center-auto.phone-links{display:none;}

@media (prefers-color-scheme: light){

	:root{
		--card-gradient: var(--card-gradient-light);
		--card-gradient-reverse: var(--card-gradient-light-reverse);
		--bg: var(--bg-light);
		--card-bg: var(--card-bg-light);
		--card: var(--card-light);
		--text: var(--text-light);
		--muted: var(--muted-light);
		--accent: var(--accent-light);
	}
}
header{padding:2rem 1rem;text-align:center}
figure{margin:0}
figure img{
	width:160px;
	max-width:100%;
	height:160px;
	object-fit:cover;
	border-radius:50%;		

	display:block;
	margin:0 auto;
}
figure figcaption{
	margin-top:.5rem;
	color:var(--muted)
}
.summary{max-width:900px;margin:1rem auto;text-align:left;padding:0 1rem}
.summary h2,.summary h3{margin:.4rem 0}
main{
	flex:1;
	max-width:1100px;
	margin:2rem auto;
	padding:1rem;
	width:100%
}

#projects .projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.project{
	background-size:cover;
	background-position:center;
	min-height:360px;
	display:flex;
	align-items:flex-end;
	padding:1rem;
	border-radius:10px;
	box-shadow:0 6px 18px rgba(11,17,32,0.06);
	color:var(--text);
	position:relative;
	overflow:hidden;
	transition:transform .25s;
}
.project::before{
	content:"";
	position:absolute;
	inset:0;
	background: var(--card-gradient);
}

.project *{position:relative;z-index:1}
.project h3{
	position:absolute;
	top:12px;
	left:12px;
	margin:0;
	color:var(--text);
}
.pdiv{
	position:absolute;
	top:0px;
	left:0px;
	background-color: var(--card-bg);

	width: 100%;
	height: 15%;
	margin:0;
}

.project p{
	
	position:absolute;
	left:12px;
	right:12px;
	bottom:12px;
	margin:0;
	color:var(--muted);
	font-size:0.95rem;
}
.project:hover{transform:scale(1.02)}



.nav-inner{
    max-width:1100px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.6rem 1rem}

.brand{color: var(--text); text-decoration: none; padding: .35rem .5rem; border-radius: 6px; font-size: 0.95rem;}
.brand:hover, .brand:focus{color: var(--accent); background: rgba(255, 255, 255, 0.03); outline: none;}

.nav-links{display:flex;gap:0.75rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--text);text-decoration:none;padding:.35rem .5rem;border-radius:6px;font-size:0.95rem}
.nav-links a:hover,.nav-links a:focus{color:var(--accent);background:rgba(255,255,255,0.03);outline:none}
.nav-links svg {
  vertical-align: text-bottom;
  margin-bottom: 0.2rem;}
@media (max-width:560px){
	.center-auto.phone-links{display:flex;}
	.nav-inner{padding:.5rem}
	.nav-links{display:none}
}

.visually-hidden{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

.center-auto{margin: 0 auto; display: flex; justify-content: center; align-items: center;}