:root {
    --font-body: 'Inter', "Helvetica Neue", Arial, sans-serif;
    --rgb-blue: 66, 152, 180;
    --rgb-purple: 136, 97, 154;
    --rgb-purple-darker-12: 54, 38, 61;
    --rgb-purple-lighter-02: 148, 113, 164;
    --rgb-green: 51, 164, 116;
    --rgb-green-lighter-05: 132, 200, 171;
    --rgb-yellow: 228, 174, 58;
    --rgb-yellow-darker-03: 194, 148, 49;
    --rgb-red: 242, 94, 98;
    --rgb-red-lighter-05: 247, 158, 160;
    --rgb-darkblue: 46, 106, 125;
    --rgb-darkgray: 104, 112, 127;
    --rgb-white: 255, 255, 255;
    --rgb-lightgray: 204, 204, 204;
    --rgb-midgray: 187, 191, 198;
    --rgb-gray-07: 171, 175, 184;
    --rgb-gray-10: 120, 127, 141;
    --rgb-gray-09: 137, 144, 155;
    --rgb-ds-link: 123, 183, 202;
}

.counter-blue {
    color: rgb(var(--rgb-blue));
}

.counter-yellow {
    color: rgb(var(--rgb-yellow));
}

.counter-green {
    color: rgb(var(--rgb-green));
}

.counter-purple {
    color: rgb(var(--rgb-purple));
}

body {
    font-family: 'Inter', "Helvetica Neue", Arial, sans-serif;
    /*'Red Hat Display', sans-serif;*/
}

header.purple {
    background-color: #88619a;
}

header .background {
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
}

.c1 {
    fill: #fff;
}

.c2 {
    fill: var(--bs-dark);
}

.navbar-brand {
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #88619a;
}

.btn-primary {
    background-color: #88619a;
    border-color: #88619a;
}

.btn-primary:hover {
    background-color: #88619a;
    border-color: #88619a;
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(136, 97, 154, 0.5);
}

.btn-primary:active {
    background-color: #88619a;
    border-color: #88619a;
}

.btn-primary:active:focus {
    box-shadow: 0 0 0 0.2rem rgba(136, 97, 154, 0.5);
}

.text-purple {
    color: #88619a;
}