:root {
    --text-background-color: rgba(255, 255, 255, 0.5);
    --text-primary-color: black;
    --btn-secondary-color: rgb(255, 255, 102);
    --text-secondary-color: var(--btn-secondary-color);
    --btn-secondary-hover-color: rgb(241, 241, 186);
    --btn-secondary-hover-bg-color: rgb(68, 172, 43);
    --btn-secondary-bg-color: rgb(43, 90, 15);
    --btn-primary-link-color: rgb(43, 90, 15);
    --btn-primary-link-hover-color: rgb(211 253 186);
    --nav-background-color:  rgb(43, 90, 15);
    --nav-link-active-color:  #feffd1;

    --btn-font-size: 1.2em;
    --font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    --content-text-size: 16px;
    --content-font-weight: bold;
}

.single-content-wrapper {
    background-color: var(--text-background-color);
    color: var(--text-primary-color);
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 10px;
}

html { scroll-padding-top: 116px; }

p, h1, h2, li, a, span, div {
    font-family: var(--font-family);
}

p, div {
    font-size: var(--content-text-size);
    font-weight: var(----content-font-weight);
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--btn-secondary-color);
    background: var(--btn-secondary-bg-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);
}

.dropdown-item.link-secondary:hover {
    background-color: var(--btn-secondary-hover-bg-color);
}

a.link-secondary {
    color: var(--btn-secondary-color) !important;
}
a.link-secondary:hover {
    color: var(--btn-secondary-hover-color) !important;
}

.btn-secondary {
    color: var(--btn-secondary-color);
    background: var(--btn-secondary-bg-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);
}

.btn-secondary:hover {
    color: var(--btn-secondary-color) !important;
    background-color: var(--btn-secondary-hover-bg-color);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--btn-secondary-bg-color);
}
a.link-primary, a {
    color: var(--btn-primary-link-color) !important;
    text-decoration-color: var(--btn-primary-link-color) !important;
}
a.link-primary:hover , a:hover {
    color: var(--btn-primary-link-hover-color) !important;
    text-decoration-color: var(--btn-primary-link-hover-color) !important;
}

div.content-wrapper {
    padding-top: .5rem !important;
    min-height: calc(100vh - 100px);
    margin-top: 116px;
    background-size: cover;
    /* background-image: url(/images/canyonpictures/decimated_Canyon_Spring_2.jpg); */
    /* background-image: url(/images/canyon_bg.jpg); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* background-position: center; */
    background-position-x: center;
}

/*  extra Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) { 
    div.content-wrapper {
        /* background-image: url(/images/bg/canyon_bg_xsm.jpg); */
        /* background-image: url(/images/bg/canyon_bg_xsm_2.jpg); */
        background-image: url(/images/bg/canyon_bg_xsm_3.jpg);
    }
 }

/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    div.content-wrapper {
        /* background-image: url(/images/bg/canyon_bg_sm.jpg); */
        /* background-image: url(/images/bg/canyon_bg_sm_2.jpg); */
        background-image: url(/images/bg/canyon_bg_sm_3.jpg);
    }
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    div.content-wrapper {
        /* background-image: url(/images/bg/canyon_bg_md.jpg); */
        /* background-image: url(/images/bg/canyon_bg_md_2.jpg); */
        background-image: url(/images/bg/canyon_bg_md_3.jpg);
    }
 }

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    div.content-wrapper {
        /* background-image: url(/images/bg/canyon_bg_lg.jpg); */
        /* background-image: url(/images/bg/canyon_bg_lg_2.jpg); */
        background-image: url(/images/bg/canyon_bg_lg_3.jpg);
    }
 }

 /* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    div.content-wrapper {
        /* background-image: url(/images/bg/canyon_bg_xl.jpg); */
        /* background-image: url(/images/bg/canyon_bg_xl_2.jpg); */
        background-image: url(/images/bg/canyon_bg_xl_3.jpg);
    }
}

 /* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    div.content-wrapper {
        background-image: url(/images/bg/canyon_bg_xxl.jpg);
    }
 }

header nav.navbar {
    background-color: var(--nav-background-color) !important;
    z-index: 1000;
    position: fixed;
    top: 0px;
    width: 100%;
}

a.nav-link.link-secondary {
    font-size: larger;
}

.navbar-toggler {
    color: var(--btn-secondary-color) !important;
    border: var(--bs-border-width) solid var(--btn-secondary-color);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 102, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

header nav.navbar .navbar-container h5 {
    color: var(--btn-secondary-color);

}

a.nav-link.link-secondary.active {
    color: var(--nav-link-active-color) !important;
}

.footer-wrapper.container.text-center.align-middle {
    padding: 8px;
}

.mainfooter {
    background-color: var(--nav-background-color);
}

div.secondary {
    color: var(--text-secondary-color);
}

/* below will color the title green bg, yellow text */
/* div.list-header {
    color: var(--btn-secondary-color);
    background-color: var(--nav-background-color) !important;
} */