:root{
  --accent:#0047ab;
  --muted:#6b7280;
  --bg:#ffffff;
  --text:#111111;
  --max-width:760px;
  --page-padding:24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Page reset */
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
}

/* Centering container */
body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--page-padding);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Card / content area */
.card{
  max-width:var(--max-width);
  width:100%;
  text-align:left;
}

/* Headline and text */
h1{
  margin:0 0 .25rem;
  font-size:2rem;
  line-height:1.05;
}

.lead{
  margin:.25rem 0 1rem;
  color:var(--muted);
  font-size:1rem;
}

/* Links */
.links{
  margin-top:8px;
}

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

a:focus,
a:hover{
  text-decoration:underline;
}

/* small separator */
.sep{
  margin: 0 8px;
  color:var(--muted);
  font-weight:600;
}

body {
  position: relative; /* establish stacking context for pseudo element */
  z-index: 0;
}

/* full-screen background image (fixed) with low opacity */
body::before {
  content: "";
  position: fixed;
  inset: 0; 
  background-image: url("/face.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  /* filter: grayscale(0.15) blur(0px) saturate(0.9); */
}

/* ensure main content sits above the image */
.card {
  position: relative;
  z-index: 1;
}