/* Minimal, clean, responsive portfolio */
:root{
  --bg:#0e0e10;
  --bg-alt:#151518;
  --text:#e7e7ea;
  --muted:#a7a7b0;
  --card:#1b1b21;
  --accent:#7bd88f;
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background: url("assets/Write.jpg") no-repeat center center fixed;
  background-size: cover;color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.section{padding:64px 20px;max-width:var(--max);margin:auto}
.section.alt{background:var(--bg-alt)}
.site-header{background:linear-gradient(180deg, rgba(255,255,255,0.08), transparent);border-bottom:1px solid #222}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max);margin:auto;padding:16px 20px}
.logo{font-weight:700;letter-spacing:.3px}
.nav-toggle{display:none}
.nav-menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:32px 20px;max-width:var(--max);margin:auto}
.hero .hi{opacity:.7;font-weight:400;margin-right:.5ch}
.hero .sub{opacity:.9;max-width:42ch}
.tags{color:var(--muted)}
.cta{display:flex;gap:12px;margin-top:16px}
.btn{display:inline-block;border:1px solid #333;padding:10px 14px;border-radius:8px}
.btn.primary{background:var(--accent);color:#0a0a0c;border-color:transparent;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cards .card{background:var(--card);padding:18px;border-radius:12px;border:1px solid #24242a}
.about-wrap{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:start}
.avatar{width:140px;height:140px;border-radius:100%;object-fit:cover;border:2px solid #24242a}
.facts{margin:0;padding-left:18px}
.center{text-align:center;margin-top:24px}
.contact-form{display:grid;gap:12px}
.field{display:grid;gap:6px}
input,textarea{background:#0c0c0f;color:var(--text);border:1px solid #2a2a33;border-radius:8px;padding:10px}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.site-footer{border-top:1px solid #222;padding:24px 20px;text-align:center;color:var(--muted)}
.sub-header{border-bottom:1px solid #222}
.sub-header h1{max-width:var(--max);margin:0 auto;padding:12px 20px 24px}
.narrow{max-width:800px;margin:auto}
.card a{display:inline-block;margin-top:8px}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:16px}
  .about-wrap{grid-template-columns:1fr}
  .nav-menu{display:none}
  .nav-toggle{display:inline-block;background:transparent;border:1px solid #333;color:var(--text);padding:8px 10px;border-radius:8px}
}
.project{background:var(--card);border:1px solid #24242a;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.project .meta{padding:14px}
.project .stack{color:var(--muted);font-size:.9rem}
.content-box {
  background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  color: #fff; /* make text white for readability */
  padding: 20px;
  border-radius: 10px; /* rounded corners */
  max-width: 800px;
  margin: 0 auto; /* center it */
}
.content-box {
  background-color: rgba(0, 0, 0, 0.6); /* semi-transparent dark background */
  color: #fff; /* text color */
  padding: 20px;
  border-radius: 10px;
  max-width: 800px;
  margin: 0 auto; /* center horizontally */
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;

  /* background settings */
  background-image: url("assets/your-background.jpg"); /* path to your image */
  background-size: cover;      /* cover whole screen */
  background-position: center; /* keep it centered */
  background-attachment: fixed; /* makes it stay still */
  background-repeat: no-repeat;
}