/* UTF-8 encoded - Responsive, minimal, black background / white text */

@font-face {
  font-family: 'CustomFont';
  src: url('fonts/DejaVuSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --bg:#000;
  --fg:#fff;
  --accent:#9ab;
  --max-width:1100px;
  --gap:1rem;
  font-family: 'CustomFont', "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  transition:background .3s ease;
  min-height:100%;
}

/* Layout */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter: blur(6px);
  background:rgba(0,0,0,0.6);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.topnav{
  display:flex;
  align-items:center;
  gap:var(--gap);
  max-width:var(--max-width);
  margin:0 auto;
  padding:.5rem;
}
.logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:8px;
  background:#fff1;
  color:var(--fg);
  text-decoration:none;
  font-weight:700;
}
.nav-list{
  list-style:none;
  display:flex;
  gap:.5rem;
  margin:0;
  padding:0;
  margin-left:auto;
  align-items:center;
}
.nav-list a{
  color:var(--fg);
  text-decoration:none;
  padding:.4rem .6rem;
  border-radius:6px;
}
.nav-list a:hover{background:rgba(255,255,255,0.03)}

/* Mobile */
.nav-toggle{display:none;background:none;border:0;color:var(--fg);font-size:1.2rem}

/* Container and cards */
.container{max-width:var(--max-width);margin:1.2rem auto;padding:1rem}
.card{padding:1rem;border-radius:12px;background:rgba(255,255,255,0.02);margin-bottom:1rem}

/* Hero */
#hero{padding:2rem 0}
#hero h1{font-size:clamp(1.5rem,4vw,2.5rem);margin:0}
#hero p{opacity:.85;margin:.4rem 0 0}

/* Footer */
.site-footer{text-align:center;padding:1rem;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}

/* Fade in animation */
.fade-in{animation:fadeIn .7s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Responsive */
@media (max-width:900px){
  .nav-list{display:none;position:absolute;right:0;top:60px;background:rgba(0,0,0,0.9);flex-direction:column;padding:.5rem;border-radius:8px}
  .nav-toggle{display:inline-block;margin-left:auto}
  .topnav{padding:.5rem 1rem}
}