/* === Site-wide background image (behind nav & all content) === */
:root{
  --site-bg: url('../../images/wdbh.jpg');  /* <-- change this path */
  --bg-scrim: rgba(0,0,0,.35);
}
html, body { height: 100%; }
body{ position: relative; background: transparent !important; }
body::before{
  content:"";
  position: fixed; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--bg-scrim), var(--bg-scrim)), var(--site-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Let the background show through Massively containers */
/* #wrapper, #main, #footer, #header, #nav { background: transparent !important; } */

/* Optional glassy nav for readability on photos
#nav{
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  margin: 0 1rem 1rem;
} 
#nav .links a, #nav .icons a { color: #fff !important; } */

/* Headshot at the very top (masthead) */
#masthead img.photo{
  width:400px; height:400px;
  max-width:none !important;
  border-radius:50%;
  object-fit:cover; object-position:50% 50%;
  display:block; margin:0 auto .75rem;
  border:8px solid rgba(255,255,255,.9);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
@media (min-width:980px){ #masthead img.photo{ width:400px; height:40 0px; } }

/* Title/tagline colors on top of photo */
/* #masthead .name{ color:#fff; }
#masthead .tagline{ color:rgba(255,255,255,.9); } */