:root {
    --brand-color: #fe1111;
    --brand-color-darken: #d50d0d;
}


/* Offsets for fixed headers 
   NOTE update locally for additional headers */
html {
    scroll-padding-top: 120px;
}

body {
    margin-top: 120px;
    min-height: calc(100vh - 120px);
}

/* id for additional on-page navigation */
#page-nav {
    padding-top: 110px;
    margin-top: -120px;
    overflow-x: auto;
}



.color-brand {
    color: var(--brand-color);
}

.bg-color-brand {
    background-color: var(--brand-color);
}



.main-button {
    --bs-btn-color: white; /*Doesn't work?*/
    color: white;
    --bs-btn-bg: var(--brand-color);
    --bs-btn-border-color: var(--brand-color);

    --bs-btn-hover-color: var(--brand-color-darken);
    --bs-btn-hover-bg: white;
    --bs-btn-hover-border-color: var(--brand-color-darken);
}

nav .dropdown-menu {
    /*--bs-dropdown-link-active-bg: var(--brand-color-darken);*/
    --bs-dropdown-link-active-color: var(--bs-dropdown-link-hover-color);
    --bs-dropdown-link-active-bg: var(--bs-dropdown-link-hover-bg);
}

body .nav { /*Additional nav in page body*/
    --bs-nav-link-color: var(--brand-color);
    --bs-nav-link-hover-color: var(--brand-color-darken);
    --bs-nav-tabs-link-active-color: var(--brand-color-darken);

    flex-wrap: nowrap;
    overflow-x: visible;
    overflow-y: clip;
}

.popout {
    transition: transform 0.2s;
}

.popout:hover {
    transform: scale(1.05);
}

div.card img {
    object-fit: cover;
}


/*debug viz*/
/** { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }*/