html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Define CSS variables for your palette (optional but good practice) */
:root {
    --palette-dark-red: #780000;
    --palette-bright-red: #c1121f;
    --palette-cream: #fdf0d5;
    --palette-dark-blue: #003049;
    --palette-mid-blue: #669bbc;
}

/* General Body Background and Text */
body {
    background-color: var(--palette-cream); /* Light cream background */
    color: var(--palette-dark-blue); /* Dark blue text */
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--palette-dark-blue); /* Dark blue headings */
}

/* Navbar (if you have one) */
.navbar {
    background-color: var(--palette-dark-blue) !important; /* Dark blue navbar background */
}

    .navbar .navbar-brand,
    .navbar .nav-link {
        color: var(--palette-cream) !important; /* Cream text for navbar brand and links */
    }

        .navbar .nav-link:hover {
            color: var(--palette-mid-blue) !important; /* Mid blue on hover */
        }

/* Primary Buttons (btn-primary) */
.btn-primary {
    background-color: var(--palette-dark-red) !important; /* Dark red background */
    border-color: var(--palette-dark-red) !important; /* Dark red border */
    color: var(--palette-cream) !important; /* Cream text */
}

    .btn-primary:hover {
        background-color: var(--palette-bright-red) !important; /* Brighter red on hover */
        border-color: var(--palette-bright-red) !important;
    }

/* Secondary Buttons (btn-secondary) or Outline Buttons (btn-outline-secondary) */
/* Adjust for your search button if it's using btn-outline-secondary */
.btn-outline-secondary {
    color: var(--palette-mid-blue) !important; /* Mid blue text */
    border-color: var(--palette-mid-blue) !important; /* Mid blue border */
}

    .btn-outline-secondary:hover {
        background-color: var(--palette-mid-blue) !important; /* Mid blue background on hover */
        color: var(--palette-cream) !important; /* Cream text on hover */
    }

/* Info Buttons (btn-info) */
.btn-info {
    background-color: var(--palette-mid-blue) !important; /* Mid blue background */
    border-color: var(--palette-mid-blue) !important;
    color: var(--palette-cream) !important;
}

    .btn-info:hover {
        background-color: var(--palette-dark-blue) !important; /* Darker blue on hover */
        border-color: var(--palette-dark-blue) !important;
    }


/* Table Styles */
.table-dark { /* For the thead class="table-dark" */
    background-color: var(--palette-dark-blue) !important; /* Dark blue table header */
    color: var(--palette-cream) !important; /* Cream text */
}

.table-striped > tbody > tr:nth-of-type(odd) > * { /* Stripe color */
    background-color: rgba(var(--palette-mid-blue-rgb), 0.1) !important; /* Light stripe using mid blue with transparency */
}
/* Define RGB versions for translucent colors */
:root {
    --palette-dark-red-rgb: 120, 0, 0;
    --palette-bright-red-rgb: 193, 18, 31;
    --palette-cream-rgb: 253, 240, 213;
    --palette-dark-blue-rgb: 0, 48, 73;
    --palette-mid-blue-rgb: 102, 155, 188;
}


/* Links */
a {
    color: var(--palette-mid-blue); /* Mid blue links */
}

    a:hover {
        color: var(--palette-dark-blue); /* Dark blue on hover */
    }

/* Form controls (select, input) */
.form-control, .form-select {
    border-color: var(--palette-mid-blue);
    color: var(--palette-dark-blue);
    background-color: var(--palette-cream);
}

    .form-control:focus, .form-select:focus {
        border-color: var(--palette-bright-red);
        box-shadow: 0 0 0 0.25rem rgba(var(--palette-bright-red-rgb), 0.25);
    }