:root{
--bg:#03102a; 
--card:#071022; 
--muted:#9fb7c9; 
--semimuted:#b9cddb; 
--accent:#7bdff6;
--accent-hover:rgb(0, 208, 255);
--text:#e6f6ff;
--snow:#eaf6ff;
--font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{
box-sizing:border-box;
}

body{
margin:0;
background:linear-gradient(180deg,#031849 0%, #03102a 100%);
color:var(--text);
line-height:1.5;
font-family:var(--font-family);
min-height: 100vh;
  margin: 0;
}

a{
color:var(--accent);
text-decoration:none;
}

.wrap{
padding:24px;
}

/* Ensure main content sits above the animated background/overlay */
.wrap{
	position: relative;
	z-index: 4;
}

header{
display:flex;
gap:20px;
align-items:center;
}

.avatar{
width:200px;
height:200px;
border-radius:8px;
background:url(img/logo.png) center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
color:#002;
flex-shrink:0;
}

h1{
margin:0;
font-size:2rem;
}

.byline{
color:var(--muted);
margin-top:6px;
}

.meta{
margin-left:auto;
text-align:right;
color:var(--muted);
font-size:0.9rem;
}

nav{
margin-top:18px;
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn{
background: var(--accent);
border:1px solid rgba(255,255,255,0.06);
padding:8px 12px;
border-radius:8px;
color:black;
text-decoration:none;
font-weight:600;
 font-family:var(--font-family);
 -webkit-appearance:none;
 appearance:none;
 cursor:pointer;
}
.btn:hover{
background: var(--accent-hover);
}

/* Ensure native form controls use the same typeface */
button, input, textarea, select { font-family: inherit; }

main{
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-top:24px;
}

section.card{
background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
padding:20px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.03);
}

h2{
margin-top:0;
margin-bottom:12px;
}

.summary{
color:var(--semimuted);
margin-bottom:12px;
}

.caption{
color:var(--semimuted);
margin-bottom:12px;
font-size:0.9rem;
text-align: center;
font-style: italic;
}

.skills{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.chip{
background:rgba(255,255,255,0.05);
padding:6px 10px;
border-radius:999px;
font-size:0.9rem;
color:var(--semimuted);
}

.grid{
display:grid;
gap:14px;
}

.work{
display:block;
padding:14px;
border-radius:8px;
background:rgba(255,255,255,0.05);
text-decoration:none;
color:var(--text);
}

.work:hover{
background:rgba(255,255,255,0.1);
}

.work h3{
margin:0;
font-size:1rem;
}

.work p{
margin:6px 0 0;
color:var(--muted);
font-size:0.95rem;
}

aside .contact{
display:flex;
flex-direction:column;
gap:8px;
}

.small{
font-size:0.9rem;
color:var(--muted);
}

footer{
margin-top:28px;
color:var(--muted);
font-size:0.9rem;
text-align:center;
}

.bgm-panel { 
	position: fixed; 
	bottom: 35px; right: 
	-150px; width: 150px; 
 	background: var(--card); 
 	border: 2px solid var(--accent); 
	border-right: none; 
	padding: 10px; 
	transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
 	color: var(--text); 
	font-family: monospace; 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	z-index: 9999; 
	box-sizing: border-box; 
}

.bgm-panel.is-open { 
	right: 0; 
}

.bgm-toggle { 
	position: absolute; 
	left: -34px; 
	top: -2px; 
	width: 30px; 
	height: 34px; 
 	background: var(--accent); 
 	color: #001; 
	cursor: pointer; 
	font-size: 16px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	border-radius: 5px 0 0 5px; 
	transition: background 0.2s; 
}

.bgm-toggle:hover { 
 	background: var(--text); 
}

.bgm-play-btn { 
 	background: var(--card); 
 	border: 1px solid var(--accent); 
 	color: var(--accent); 
	padding: 5px; 
	cursor: pointer; 
	font-weight: bold; 
	width: 100%; 
	margin-top: 5px; 
	transition: 0.2s; 
}

.bgm-play-btn:hover { 
 	background: var(--accent); 
 	color: #000; 
}

.snow-bg { 
	position: fixed;
	top: 0; 
	left: 0; 
	width: 100vw; 
	height: 100vh; 
	z-index: -1; 
	pointer-events: 
	none; 
	overflow: hidden; 
}

.snow-layer { 
	position: absolute; 
	top: -100vh; 
	left: 0; 
	width: 100vw; 
	height: 200vh; 
	background-image: 
	radial-gradient(4px 4px at 100px 50px, var(--snow), transparent), radial-gradient(6px 6px at 200px 150px, var(--snow), transparent), radial-gradient(3px 3px at 300px 250px, var(--snow), transparent), radial-gradient(5px 5px at 400px 350px, var(--snow), transparent), radial-gradient(4px 4px at 500px 100px, var(--snow), transparent), radial-gradient(6px 6px at 600px 200px, var(--snow), transparent), radial-gradient(3px 3px at 700px 300px, var(--snow), transparent), radial-gradient(5px 5px at 800px 400px, var(--snow), transparent), radial-gradient(4px 4px at 900px 50px, var(--snow), transparent); 
	background-size: 1000px 1000px; 
	animation: snowFall 10s linear infinite; }

.snow-layer:nth-child(2) { 
	background-size: 800px 800px; 
	animation-duration: 15s; 
	animation-delay: -5s; 
	opacity: 0.7; 
	filter: blur(1px); }

.snow-layer:nth-child(3) { 
	background-size: 600px 600px; 
	animation-duration: 20s; 
	animation-delay: -10s; 
	opacity: 0.5; 
	filter: blur(2px); }

@keyframes snowFall { 
	from { 
		transform: translateY(0);
	 } 
	 to { 
		transform: translateY(1000px);
	 } 
	}

@media(max-width:900px){
main{
grid-template-columns:1fr;
}
.meta{
display:none;
}
}
/* Print-friendly resume link */

@media print{
nav, footer, .aside-only{
display:none;
}
body{
background:white;
color:black;
}
}