:root {
    --main-color: #ffdd57; /* Light yellow */
    --lighter-color: #ffe484; /* Even lighter yellow */
    --darker-color: #e6b800; /* Darker yellow */
    --darkest-color: #cc9900; /* Darker yellow */
    --even-more-dark-color: #996600; /* Deepest yellow */
    --nav-color: rgba(255, 221, 87, 0.75); /* Semi-transparent yellow */
    --brand-color: rgba(153, 102, 0, 1); /* Brownish yellow for branding */
    --nav-text-color: rgba(255, 255, 255, 0.5); /* Keep white */
}

body {
    font-family: 'Space Grotesk', sans-serif;
}

a.navbar-brand {
    color: var(--brand-color) !important;
}


.btn-primary, .btn-outline-primary {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}


.btn-primary:hover, .btn.show, :not(.btn-check)+.btn:active, .btn-outline-primary:hover {
    background-color: var(--darker-color) !important;
    border-color: var(--darker-color) !important;
}

.progress-bar {
    background-color: var(--lighter-color);
    border-color: var(--lighter-color);
}

.progress-bar-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.bg-dark {
    background-color: var(--nav-color) !important;
}

.table a:not(.btn), h1 a:not(.btn) {
    color: var(--darker-color) !important;
}

h1 a {
    text-decoration: solid;
}

.nav-link {
    color: var(--darkest-color) !important;
}

a.nav-link:hover,
a.nav-link:focus {
    color: var(--even-more-dark-color) !important;
}

/* Custom styles for active buttons to appear white */
.btn-group .btn-check:checked + .btn {
    background-color: white;
    color: #000; /* Adjust text color as needed */
    border-color: #6c757d; /* Match Bootstrap's secondary border color */
}

/* Ensure inactive buttons have the secondary styling */
.btn-group .btn {
    background-color: #6c757d; /* Bootstrap's secondary color */
    color: white;
    border-color: #6c757d;
}

/* Optional: Add hover effects for better UX */
.btn-group .btn:hover {
    background-color: #5a6268; /* Darken the secondary color on hover */
    border-color: #545b62;
}