:root {
    --pri-1: rgb(0, 83, 158);
    --pri-1-light: hsl(208deg 100% calc(31%*1.15));
    --pri-1-dark: hsl(208deg 100% calc(31%*0.85));
    --pri-2: rgb(255, 203, 5);
    --pri-2-light: hsl(48, 100%, calc(51% * 1.15));
    --pri-2-dark: hsl(48, 100%, calc(51% * 0.85));
    --acc-1: rgb(0, 178, 227);
}

#wordmark {
    font-weight: 900;
    font-size: 1.5rem;
    color: white;
}

#navbarToggler {
    justify-content: end;
}

header {
    background-color: var(--pri-1);
    padding: 0 1rem;
}

.navbar {
    padding: 0;
}

.navbar .navbar-brand {
    padding: 0;
}

.navbar .navbar-toggler {
    background-color: var(--pri-2);
}

main {
    border-top: 2px solid var(--acc-1);
    padding: 0.75rem 1rem 0 1rem;
}


footer {
    padding: 1.5rem 1rem;
    background-color: var(--pri-2);
    text-align: right;
}

.navbar .nav-link {
    padding-left: 0.5rem;
    color: white;
}

.navbar .nav-link.urgent {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.navbar .nav-link.active {
    font-weight: bold;
    color: white;
}

.navbar .nav-link.active.urgent {
    font-weight: bold;
    color: var(--bs-danger-text-emphasis);
}

btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary.show, .btn-primary:first-child:active, :not(.btn-check)+.btn-primary:active,.btn-primary:hover {
    background-color: var(--pri-1-dark);
    border-color: var(--pri-1-dark);
}

btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.show, .btn-outline-primary:first-child:active, :not(.btn-check)+.btn-outline-primary:active,.btn-outline-primary:hover {
    background-color: var(--pri-1-dark);
    border-color: var(--pri-1-dark);
}

.btn-primary:disabled {
    color: var(--pri-1-light);
    border-color: var(--pri-1-light);
}

.btn-primary {
    border-color: var(--pri-1);
    background-color: var(--pri-1);
}

.btn-outline-primary {
    color: var(--pri-1);
    border-color: var(--pri-1);
}

.active>.page-link {
    background-color: var(--pri-1);
    border-color: var(--pri-1);
}

@media (min-width: 768px) {
    .navbar-tabs {
        border-bottom: none;
        align-items: flex-end;
    }

    .navbar-tabs .nav-link {
        border-top: black 2px solid;
        border-right: black 2px solid;

        color: black;
        background-color: var(--pri-2);
    }

    .navbar .nav-link.urgent {
        color: var(--bs-danger-text-emphasis);
        border-top: var(--bs-danger-text-emphasis) 2px solid;
        border-left: var(--bs-danger-text-emphasis) 2px solid;
    }

    .navbar-tabs .nav-link.before-active {
        border-right: none;
    }

    .navbar-tabs .nav-link.active {
        color: black;
        background-color: var(--pri-2);

        border: 2px solid var(--acc-1);
        border-bottom: none;
    }

    .navbar .nav-link.active.urgent {
        color: var(--bs-danger-text-emphasis);
        background-color: var(--bs-danger-bg-subtle);
    }

    .navbar-tabs .nav-link:hover {
        background-color: var(--pri-2-light);
    }

    .navbar-tabs .nav-link.urgent:hover {
//        background-color: hsl(355, 70%, 91%);
        background-color: hsl(355, 70%, 93%);
    }

    .nav-item:first-of-type .nav-link {
        border-top-left-radius: 0.375rem;
    }

    .nav-item:last-of-type .nav-link {
        border-top-right-radius: 0.375rem;
    }

    .boxed {
        border: 2px var(--pri-1) solid;
        border-top-color: var(--pri-1-light);
        border-left-color: var(--pri-1-light);
        box-shadow: 4px 5px 3px 1px rgb(0 0 0 / 20%);
    }
}