/* Parallax-style global background */
html, body {
  height: 100%;
}

body {
  /* Original layering: stars on top, gradient beneath */
  /* Note: In Hugo, files in static/ are served from site root, so '/images/stars.png' is the correct URL. */
  background-image: url('/images/stars.png'), linear-gradient(#00aeef, #001c30 500px) !important;
  background-attachment: fixed, scroll !important;
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: cover, cover;
  background-color: #001c30; /* deep blue behind everything */  
  color: #e8e8e8;
}

/* Match original: ensure explicit custom background color fallback */
body.custom-background {
  background-color: #001c30;
}

/* Avoid solid blocks covering the background */
.bg-near-white,
.bg-white,
.bg-light-gray,
.bg-near-white .bg-white {
  background-color: transparent !important;
}

/* Darken default horizontal rules slightly so they show on dark bg */
.hr, hr {
  border-color: rgba(255,255,255,0.25);
}

/* Make primary headings readable over dark background */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Tweak body text for readability */
p, li, dd, dt {
  color: #e6e6e6;
}

/* Links: lighter blue for contrast */
a { color: #9bd1ff; }
a:hover, a:focus { color: #c4e4ff; }

/* If the theme uses a black hero/cover, make it transparent */
.bg-black, .bg-near-black, .bg-dark-gray, .black-90, .black-80, .black-70 {
  background-color: transparent !important;
}

/* Header: force white background with dark text and links */
header, .site-header, .ananke-header, .pa3.bg-black-90, .bg-black-90, .bg-transparent-header {  
  background-image: none !important;
  text-align: center !important;

}

nav {
  background-color: #ffffff !important;
}

header a, .site-header a, .ananke-header a, nav a, .ananke-navigation a {
  color: #111 !important;
}

header a:hover, .site-header a:hover, .ananke-header a:hover, nav a:hover, .ananke-navigation a:hover {
  color: #0b5d86 !important; /* subtle theme blue on hover */
}

.nested-copy-line-height {
  background-color: #0006;
  border-radius: 50px;
  padding: 20px;
  margin-top: 30px;
}

h2 {
  margin-block-start: 0;
  margin-block-end: 0;
}

h2 a{
  color: #fff !important;
}

h3 a{
  color: #fff !important;
}


h3 {
  margin-block-start: 0;
  margin-block-end: 0;
}



h4 {
  color: #fff570;
    font-weight: 600;
    font-family: serif;
    font-size: 38px;
    line-height: normal;
    text-shadow: 2px 2px 3px black;
    font-variant-caps: small-caps;
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Optional: give content sections a subtle translucent backing if needed */
.section, main, .content {
  /* Keep fully transparent by default (non-empty rule to satisfy linters) */
  background: transparent;
}

/* Do not constrain content to two-thirds width on large screens */
.w-two-thirds-l { width: 100% !important; }

/* Remove the aside, subtitle */
aside {
 display: none;
}

.pb6-l {
  padding-bottom: 0;
}


/* home page */
/* -- title */
.lh-title {
  color: #ffffff;
}

/* --  subheadline */
.f-subheadline-l {
  display: none;
}

/* logo size */
@media screen and (min-width: 30em) {
  .mw5-ns {
      max-width: 10rem;
  }
}
  

/* Stars overlay on <main> with subtle twinkle */
main {
  position: relative; /* establish containing block for ::before */
}

main::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/images/stars.png);
  background-repeat: repeat;
  background-position: center top;
  background-size: 75%; /* adjust if you need larger/smaller stars */
  opacity: 0.1;
  animation: stars-twinkle 5s ease-in-out infinite alternate;
  pointer-events: none; /* ensure links and UI remain clickable */
  z-index: 0;
}

/* Keep actual content above the overlay */
main > * {
  position: relative;
  z-index: 1;
}

@keyframes stars-twinkle {
  0% { opacity: 0.1; }
  100% { opacity: 0.3; }
}