/* Basic clean styling approximating fiaverse.me layout */
:root { --bg:#0b0b0f; --fg:#eaeaf0; --muted:#a8a8b3; --accent:#9b8cff; --bg-overlay: rgba(6,6,12,0.55); --card-bg: rgba(17,17,25,0.72); }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }


body {
  background-image:
    linear-gradient(var(--bg-overlay), var(--bg-overlay)),
    url('https://raw.githubusercontent.com/FiaVerse/fiaverse.github.io/main/space-bg.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh;
}

/* content wrapper stays centered but gets a subtle backdrop (optional) */
.wrap {
  width:min(1100px, 92%);
  margin:0 auto;
  /* small translucent background to separate content from the image */
  background: transparent;
  padding-top: 0; /* keep spacing controlled by sections */
}

.site-header { padding:56px 0 24px; text-align:center; }
.site-header h1 { font-size:clamp(28px, 4vw, 44px); margin:0 0 8px; font-weight:800; letter-spacing:0.2px; }
.tag { margin:0; color:var(--muted); font-size:clamp(14px, 2.2vw, 18px); }
.links { margin-top:18px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.links a { color:var(--fg); text-decoration:none; border:1px solid rgba(43,43,53,0.9); padding:8px 12px; border-radius:999px; font-size:14px; background: rgba(8,8,12,0.4); }
.links a:hover { border-color:var(--accent); }

.projects { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; padding:28px 0 64px; }

/* Make project cards slightly translucent so the background shows through */
.project {
  background: var(--card-bg);
  border:1px solid rgba(255,255,255,0.03);
  border-radius:16px;
  padding:18px;
  backdrop-filter: blur(6px); /* subtle glass effect where supported */
  -webkit-backdrop-filter: blur(6px);
}
.project h2 { font-size:18px; margin:0 0 12px; font-weight:600; color:var(--fg); }

.video-box { position:relative; aspect-ratio:16/9; background:linear-gradient(180deg, rgba(14,14,20,0.6), rgba(9,9,12,0.5)); border-radius:12px; overflow:hidden; border:1px dashed rgba(43,43,53,0.9); display:grid; place-items:center; }
.video-box iframe { width:100%; height:100%; border:0; display:block; }
.placeholder { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:14px; padding:12px; text-align:center; pointer-events:none; }

.site-footer { padding:36px 0 64px; text-align:center; color:var(--muted); }