:root{
    --active-color: #CFE2FF;
}
/* default bootstrap active with sharp blue and white text doesn't look good in my opinion */
.list-group-item {
    &.active{
        background-color: var(--active-color) !important;
        color: black;
        border: none !important;
    }
}

.nav-link{
    font-weight: normal;

    &.active{
        background-color: var(--active-color) !important;
    }
}

/* 1. Regular / Normal */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Light.woff2') format('woff2');
    font-weight: 400; /* or normal */
    font-style: normal;
    font-display: swap;
}

/* 2. Italic */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-RegularItalic.woff2') format('woff2');
    font-weight: 400; /* or normal */
    font-style: italic;
    font-display: swap;
}

/* 3. Bold */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Bold.woff2') format('woff2');
    font-weight: 700; /* or bold */
    font-style: normal;
    font-display: swap;
}

/* 4. Bold Italic */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BoldItalic.woff2') format('woff2');
    font-weight: 700; /* or bold */
    font-style: italic;
    font-display: swap;
}
/* 3. Bold */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-Bold.woff2') format('woff2');
    font-weight: 800; /* or bold */
    font-style: normal;
    font-display: swap;
}

/* 4. Bold Italic */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/San-Francisco-Pro-Fonts/SF-Pro-Display-BoldItalic.woff2') format('woff2');
    font-weight: 800; /* or bold */
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'SF Pro', sans-serif;
}