:root {
    --primary-100: #d4eaf7;
    --primary-200: #b6ccd8;
    --primary-300: #3b3c3d;
    --accent-100: #71c4ef;
    --accent-200: #00668c;
    --text-100: #1d1c1c;
    --text-200: #313d44;
    --bg-100: #fffefb;
    --bg-200: #f5f4f1;
    --bg-300: #cccbc8;
}

body {
    background-color: var(--bg-200) !important;
    color: var(--text-100) !important;
}

/* navbar */
.navbar {
    background-color: var(--bg-300) !important;
    box-shadow: var(--text-100);
}

.nav-link:hover {
    background-color: var(--primary-200) !important;
}

.nav-dislaimer {
    background-color: var(--accent-100) !important;
}

.dropdown-menu {
    background-color: var(--bg-200) !important;
}

.mega-menu {
    position: static;
}

.mega-menu .dropdown-menu {
    background-color: var(--bg-300) !important;
    border: none;
    width: 100%;
}

/* buttons */
.btn-outline-dark-1 {
    border: 2px solid var(--text-100);
    background-color: var(--bg-200);
}

.btn-outline-dark-1:hover {
    border: 2px solid var(--text-100);
    background-color: var(--text-100);
    color: var(--bg-100);
}

.button {
    background-color: var(--accent-100) !important;
    color: white !important;
}

.button:hover {
    background-color: var(--accent-200) !important;
}

/* card */
.card {
    background-color: var(--bg-300) !important;
    border: 1px solid var(--primary-300) !important;
}

/* table */
.table {
    background-color: var(--bg-300) !important;
}