/** Global or root variable**/
:root{
    --app-yellow: #F5EBE0;
    --app-gray: #B8B8B8;
    --app-tan: #D6CCC2;
    --app-pink: #C7A9B7;
    --app-lightblue: #C7DEDF;
    --app-blue:#76949F;
    --app-mauve: #939196;
    --app-navy: #465362;

}

.yellow{
    color: var(--app-yellow)

}
.bg-yellow{
    background-color: var(--app-yellow)!important;
}
.blue{
    color: var(--app-blue)

}
.bg-blue{
    background-color: var(--app-blue)!important;
}

.tan{
    color: var(--app-tan)

}
.bg-tan{
    background-color: var(--app-tan)!important;
}

.gray{
    color: var(--app-gray)

}
.bg-gray{
    background-color: var(--app-gray)!important;
}

.pink{
    color: var(--app-pink)

}
.bg-pink{
    background-color: var(--app-pink)!important;
}
.lightblue{
    color: var(--app-lightblue)

}
.bg-lightblue{
    background-color: var(--app-lightblue)!important;
}

.mauve{
    color: var(--app-mauve)

}
.bg-mauve{
    background-color: var(--app-mauve)!important;
}

.bg-navy{
    background-color: var(--app-navy)!important;
}

/**bootstrap overrides**/

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #C7DEDF;
}


.section{
    border: 20px;
    border-color: #C7DEDF;
    border-radius: 10;
}