:root{
	--bg: #282828;
	--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.2));


	--bg-light: #fbf1c7;
	--card-light: #ebdbb2;
	--text-light: #282828;
	--muted-light: #3c3836;
	--accent-light: #7b4f00;;

	

}
*{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;
}
@media (prefers-color-scheme: light){

	:root{
		--card-gradient: var(--card-gradient-light);
		--bg: var(--bg-light);
		--card: var(--card-light);
		--text: var(--text-light);
		--muted: var(--muted-light);
		--accent: var(--accent-light);
	}
}


.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;}
.center-auto.phone-links{display: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}

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}
}

.repo-summary{
    max-width:900px;
    margin:1rem auto;
    text-align:left;
    padding:0 1rem;
}

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}
#projects .projects-grid a{text-decoration:none}
.project{
	background-color: var(--card);
	min-height:160px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:space-between;
	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 *{position:relative;z-index:1; text-decoration: none;}
.project h3{
	margin:0;
	color:var(--text);
	font-size:1.1rem;
}
.project p{
	margin:0;
	color:var(--muted);
	font-size:0.9rem;
	line-height:1.4;
}
.project a{
	position:absolute;
	bottom:12px;
	color:var(--accent);
	text-decoration:none;
	font-size:0.85rem;
	padding:0.25rem;
}
.project a:first-of-type{
	left:12px;
  
}
.project a:last-of-type{
	right:12px;
}

.project a:first-of-type:hover{
  text-decoration:underline;
}

.source-link-wrapper:hover {
  margin: 0;
  border-bottom: solid 1px var(--accent);
}

.project:hover{transform:scale(1.02)}

.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;}