:root {
    --fg-headings-color: var(--fg-dark);
    --fg-body-color: #232a2b;
    --fg-bg: var(--fg-gray-100);
    --text-on-blue: #F8F8F6;

    /* Warm Yellow Options */
    --accent-warm-yellow: #FCD34D;
    --accent-golden-yellow: #F59E0B;
}

main section h1 {
    font-weight: 700;
}

/* The scroll appears to work fine without this, at least on the home page */
.page-nav {
    scroll-margin-top: 30px;
}

/*
Responsive nav: make transparent so it's obvious when scrolling in-page from the hamburger nav
what is going on under the nav bar.  The nav doesn't drop away for an in-page scroll, so the content
scrolls up underneath it.

Examples at: https://github.com/level12/leancto.dev/discussions/15

This combination of style is only observed on the responsive nav.
*/
nav.navbar-dark.bg-dark.shadow-transition {
    background-color: rgba(10, 38, 64, 0.60) !important;
    backdrop-filter: blur(3px);
}

/* If you are using this class, you may need to think about your styles a bit harder.  :oP */
.text-on-blue {
    color: var(--text-on-blue);
}

.text-gray {
    color: color-mix(in srgb, var(--fg-text-muted) 70%, white);
}

.text-orange {
    color: var(--fg-orange);
}

.footnote-ref {
    font-family: var(--fg-font-monospace);
    font-size: 65%;
    vertical-align: super;
}

section.bg-dark, .container.bg-dark, div.bg-dark {
    --fg-body-color: var(--text-on-blue);
    --fg-headings-color: var(--text-on-blue);
    color: var(--text-on-blue);
}

.alert {
    border-radius: 0.25rem;
}


.grow-in.htmx-added {
  transform: scale(0.8);
  opacity: 0;
}

.grow-in {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}


#contact-sect .container {
  background-image: url(https://media.leancto.dev/img/promo-bg.png);
  background-position: top right;
  background-repeat: no-repeat;
}