/* =========================================
   Nord Hybrid — compatible with your original HTML
   Keeps float-based nav and background image path
   ========================================= */

:root{
  /* Nord base */
  --bg: #2e3440;        /* page background fallback */
  --panel: #3b4252cc;   /* semi-opaque panel (cc ≈ 80%); change to #3b4252 for solid */
  --ink: #eceff4;       /* primary text */
  --muted: #d8dee9;     /* secondary */
  --accent: #ebcb8b;    /* headings / gold */
  --link: #88c0d0;      /* links */
  --hover: #434c5e;     /* hover bg */
  --nav-bg: #2f3441;    /* nav bar bg */
}

/* ----- Page background & type ----- */
html,body{height:100%;margin:0}
body{
  background-color: var(--bg);
  background-image: url('../assets/images/background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--ink);
  line-height: 1.6;
}

/* ----- Main content panel ----- */
div.MainSite{
  max-width: 800px;
  margin: 32px auto;
  padding: 12px 45px 45px 45px;
  color: var(--ink);
  background: var(--panel);
  backdrop-filter: blur(3px);     /* safe no-op if unsupported */
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(236,239,244,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border-radius: 12px;
}

/* ----- Headers ----- */
h1,h2,h3{margin:10px 0 6px;text-shadow:none}
h1{text-align:center;color:var(--accent)}
h2{color:var(--accent)}
h3{color:var(--ink)}

/* ----- Paragraphs / lists ----- */
p{margin:6px 0 12px;text-indent:0}
ul{margin:6px 0 12px 18px}
.muted{color:var(--muted)}

/* ----- Nav (float-compatible) ----- */
ul.nav{
  list-style:none;
  padding:0;
  margin:0 0 12px 0;
  overflow:hidden;                 /* keeps your original flow */
  background-color: var(--nav-bg);
  border-radius:10px;
}
li.nav{float:left;font-weight:bold;font-size:14pt}
ul.nav li[style*="float:right"]{float:right}  /* respects your inline right-float */

li.nav a{
  display:block;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
  color: var(--ink);
}
li.nav a:hover{background-color: var(--hover)}

/* ----- Links ----- */
a:link,a:visited{color:var(--link);text-decoration:none}
a:hover{color:var(--ink)}

/* ----- Code / tables ----- */
code,pre{
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color:#a3be8c;
}
.tg{border-spacing:6px}
.tg td{vertical-align:top}
.tg th{border-width:0}
.tg .tg-0pky{vertical-align:top;font-weight:bold}
.tg .tg-0lax{vertical-align:middle}

/* ----- Mobile ----- */
@media (max-width:600px){
  div.MainSite{max-width:92vw;margin:16px auto;padding:10px 16px 32px;border-radius:10px}
  li.nav{font-size:13pt}
  li.nav a{padding:12px 12px}
}