:root {
    --font-roboto: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-roboto-condensed: 'Roboto Condensed', system-ui, sans-serif;
    --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-lato: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-nunito: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-barlow: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-anton: 'Anton', system-ui, sans-serif;
    --font-dosis: 'Dosis', system-ui, sans-serif;
    --font-ibm: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --font-base: var(--font-ibm);

    --hfrg-text: #1d1d1d;
    --hfrg-bg: #dad7d7;
    --hfrg-card: rgba(255, 255, 255, 0.199);
    --hfrg-border: rgba(255, 255, 255, .10);
}

html,
body {
    background: var(--hfrg-bg);
    color: var(--hfrg-text);
    font-family: var(--font-base);
}

.text-body-secondary {
    color: rgba(12, 12, 12, 0.863) !important;
}

.card,
.navbar,
footer {
    background: var(--hfrg-card) !important;
    border-color: var(--hfrg-border) !important;
}

.navbar .nav-link {
    color: rgba(131, 130, 130, 0.877);
}

.navbar .nav-link.active {
    color: var(--hfrg-text);
    font-weight: 600;
}

a,
a:hover,
a:focus {
    color: var(--hfrg-text);
}