html,
body {

    font-family: "Inter", sans-serif;

    --gfRed: #900;

    --extLink: url('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');

    h5 {
        margin-bottom: 0;
        font-weight: 700;
        font-size: 18px;
    }

    h6 {
        color: #888;
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 1rem;
    }

    h6.skill-list {
        margin-bottom: 0;
        color: var(--gfRed);
    }



    .btn-light {
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--gfRed);
        --bs-btn-bg: white;
        --bs-btn-border-color: white;
        --bs-btn-hover-color: var(--gfRed);
        --bs-btn-hover-bg: #ddd;
        --bs-btn-hover-border-color: #ddd;
        --bs-btn-focus-shadow-rgb: none;
        --bs-btn-active-color: var(--gfRed);
        --bs-btn-active-bg: #bbb;
        --bs-btn-active-border-color: #bbb;
    }

    .btn-primary {
        --bs-btn-font-weight: 600;
        --bs-btn-color: white;
        --bs-btn-bg: var(--gfRed);
        --bs-btn-border-color: var(--gfRed);
        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: #810202;
        --bs-btn-hover-border-color: #810202;
        --bs-btn-focus-shadow-rgb: none;
        --bs-btn-active-color: white;
        --bs-btn-active-bg: #690303;
        --bs-btn-active-border-color: #690303;
    }


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

    .text-red {
        color: var(--gfRed);
    }

    .container-fluid {
        max-width: 1286px;
    }

    .chevron-list {
        list-style: none;
        padding-left: 0;
    }

    .chevron-list>li {
        margin-bottom: 0.5rem;
        position: relative;
        padding-left: 1.5em;
        /* space for chevron */
    }

    .chevron-list.compact>li {
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .chevron-list>li::before {
        position: absolute;
        left: 0;
        top: 1px;
        content: "›";
        color: var(--gfRed);
        font-weight: bold;
        display: inline-block;
        width: 1em;
        margin-right: 0.5em;
        font-size: 24px;
        line-height: 18px;
    }

    .chevron-list.text-white li::before {
        color: white;
    }


    .accordion-button {
        color: var(--gfRed);
        font-weight: 600;
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--gfRed);
        color: white;
    }

    .accordion-button:focus {
        box-shadow: none;
    }

    .accordion-button.collapsed::after {
        background-color: var(--gfRed);
        -webkit-mask: var(--bs-accordion-btn-icon) no-repeat center / contain;
        mask: var(--bs-accordion-btn-icon);
        background-image: none;
    }

    .accordion-button:not(.collapsed)::after {
        background-color: white;
        -webkit-mask: var(--bs-accordion-btn-icon) no-repeat center / contain;
        mask: var(--bs-accordion-btn-icon);
        background-image: none;
    }

    .company-link {
        color: var(--gfRed);
        text-decoration: none;
        cursor: pointer;
    }

    .company-link:hover {
        text-decoration: underline;
    }

    .company-link::before {
        content: "|";
        color: var(--gfRed);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        display: inline-block;
        position: relative;
        top: -2px;
    }

    .company-link::after {
        content: "\f1c5";
        /* check the correct unicode for your icon */
        font-family: "bootstrap-icons";
        display: inline-block;
        margin-left: 0.5rem;
        color: #999;
        font-size: .9rem;
    }

    .sub-list {
        font-size: .9rem;
        ;
    }


    #brand-main {
        max-height: 14em;
    }

    #contact {
        font-size: 1.2rem;
    }

    #contact li i {
        margin-right: 0.5rem;
    }


    #floating-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #eee;
        padding: 0.75rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
        display: none;
        border-top:1px solid #ccc;
        /* hidden by default */
        z-index: 1050;
        /* above other content */

        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }


}

@media (max-width: 767px) {
    body {
        padding-bottom: 70px;
    }
}

@media (min-width: 768px) {
    .rounded-end-md-3 {
        border-top-right-radius: 1rem;
        /* same as .rounded-3 */
        border-bottom-right-radius: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
  body {
    --gfRed: #cb0505;

    --bs-body-bg: #222;
    --bs-body-color: #f8f9fa;
    --bs-primary: #0d6efd;

    .accordion {
        --bs-accordion-border-color: #888;
    }

    #floating-bar {
        background: #222;
        box-shadow: 0 -2px 8px rgba(200,200,200, 0.25);
        border-top: 1px solid #666666
    }
  }
}