/* Headings and text */
h1, h2, h3, h4, h5, h6, span, td, li {
    font-family: Outfit;
}
/* Font Awesome */
.fa {
    width: 1.8em;
}
.btn .fa {
    width: auto;
}
.btn:not(.btn-icon) .fa {
    margin-right: 0.7em;
}
/* Light theme */
@media not (prefers-color-scheme: dark) {
    /* Custom class -- always use in a pair with light-mode-only */
    .dark-mode-only {
        display: none;
    }
    /* Custom class for accent button -- coloured from settings in database via _setting_lib.php */
    .btn-accent {
        background-color: var(--accent-light);
        color: var(--accent-light-text);
    }
    /* Variant of btn-accent class */
    .btn-accent:hover, .btn-accent:focus, .btn-plan:hover, .btn-plan:focus {
        background-color: rgb(from var(--accent-light) calc(r - 30) calc(g - 30) calc(b - 30)) !important;
        color: var(--accent-light-text);
    }
    /* Custom class for accent text -- coloured from settings in database via _setting_lib.php */
    .text-accent {
        color: var(--accent-light);
    }
    /* Custom class for variant button */
    .btn-variant {
        background-color: #c3c9d7;
        color: black;
    }
    /* Variant of btn-variant class */
    .btn-variant:hover, .btn-variant:focus {
        background-color: rgb(from #c3c9d7 calc(r - 30) calc(g - 30) calc(b - 30));
        color: black;
    }
    /* Custom class for variant divs */
    .bg-variant {
        background-color: #c3c9d7;
        color: black;
    }
    /* Custom class for banner button -- coloured from settings in database via _setting_lib.php */
    .btn-banner {
        background-color: var(--banner-light);
        color: var(--banner-light-text);
    }
    /* Custom class for banner divs */
    .bg-banner,
    .bg-banner a:not(.nav-link) {
        background-color: var(--banner-light);
        color: var(--banner-light-text);
    }
    /* Custom class for banner borders */
    .border-banner {
        border-color: var(--banner-light) !important;
    }
    /* Custom colour for menu text */
    .nav-link, .dropdown-item, .navbar-toggler {
        color: var(--banner-light-text-variant) !important;
    }
    /* Custom colour for focussed menu text */
    .nav-link:hover, .nav-link:focus, .dropdown-item:hover, .dropdown-item:focus, .active {
        color: var(--banner-light-text) !important;
    }
    /* Fill bottom of page with banner colour */
    footer:not(.no_flll) {
        box-shadow: 0 50vh 0 50vh var(--banner-light);
    }
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
    /* Custom class -- always use in a pair with dark-mode-only */
    .light-mode-only {
        display: none;
    }
    /* Custom class for accent button -- coloured from settings in database via _setting_lib.php */
    .btn-accent {
        background-color: var(--accent-dark);
        color: var(--accent-dark-text);
    }
    /* Variant of btn-accent class */
    .btn-accent:hover, .btn-accent:focus, .btn-plan:hover, .btn-plan:focus {
        background-color: rgb(from var(--accent-dark) calc(r - 30) calc(g - 30) calc(b - 30)) !important;
        color: var(--accent-dark-text);
    }
    /* Custom class for accent text -- coloured from settings in database via _setting_lib.php */
    .text-accent {
        color: var(--accent-dark);
    }
    /* Custom class for variant button */
    .btn-variant {
        background-color: #333339;
        color: white;
    }
    /* Variant of btn-variant class */
    .btn-variant:hover, .btn-variant:focus {
        background-color: rgb(from #333339 calc(r + 30) calc(g + 30) calc(b + 30));
        color: white;
    }
    /* Custom class for variant divs */
    .bg-variant {
        background-color: #333339;
        color: white;
    }
    /* Custom class for banner button -- coloured from settings in database via _setting_lib.php */
    .btn-banner {
        background-color: var(--banner-dark);
        color: var(--banner-dark-text);
    }
    /* Custom class for banner divs */
    .bg-banner,
    .bg-banner a:not(.nav-link) {
        background-color: var(--banner-dark);
        color: var(--banner-dark-text);
    }
    /* Custom class for banner borders */
    .border-banner {
        border-color: var(--banner-dark) !important;
    }
    /* Custom colour for menu text */
    .nav-link, .dropdown-item, .navbar-toggler {
        color: var(--banner-dark-text-variant) !important;
    }
    /* Custom colour for focussed menu text */
    .nav-link:hover, .nav-link:focus, .dropdown-item:hover, .dropdown-item:focus, .active {
        color: var(--banner-dark-text) !important;
    }
    /* Fill bottom of page with banner colour */
    footer:not(.no_flll) {
        box-shadow: 0 50vh 0 50vh var(--banner-dark);
    }
}

.btn-plan {
    color: black;
}
.image_button:focus {
    outline: none;
}