/* Headings */
h1 {
    font-family: JuliusSans;
    color: var(--middle-color);
    font-weight: bold;
}
h2 {
    font-family: BerlinSans;
    color: var(--light-color);
}
h3 {
    font-family: BerlinSans;
}
h4 {
    font-family: JuliusSans;
    color: var(--gradient-color);
    font-weight: bold;
}
h5 {
    font-family: JuliusSans;
    font-weight: bold;
}
h6 {
    background-color: var(--light-color);
    width: fit-content;
    padding: 0.7em;
    border-radius: 0.7em;
    font-family: Outfit;
}
/* Custom class for accent button -- coloured from settings in database via _setting_lib.php */
.btn-accent {
    background-color: var(--accent-color);
    color: white;
}
/* Variant of btn-accent class */
.btn-accent:hover, .btn-accent:focus, .btn-plan:hover, .btn-plan:focus {
    background-color: rgb(from var(--accent-color) calc(r - 30) calc(g - 30) calc(b - 30)) !important;
    color: white;
}
/* Custom class for accent divs */
.bg-accent {
    background-color: var(--accent-color);
    color: white;
}
/* Custom class for accent text */
.text-accent {
    color: var(--accent-color);
}
/* Custom class for banner divs */
.bg-banner {
    background-color: var(--dark-color);
    color: white;
}
.bg-banner a:not(.nav-link) {
    color: white;
}
/* Custom class for banner borders */
.border-banner {
    border-color: var(--dark-color) !important;
}
/* Custom class for light divs */
.bg-lights {
    background-color: var(--light-color);
}
/* Custom colour for menu text */
.nav-link {
    font-family: JuliusSans;
    font-weight: bold;
    color: white;
}
/* Custom colour for focussed menu text */
.nav-link:hover, .nav-link:focus {
    color: white;
    text-decoration: underline !important;
    text-decoration-color: var(--accent-color) !important;
    text-decoration-thickness: 0.1em !important;
    text-underline-offset: 0.7em;
}
/* Fill bottom of page with banner colour */
footer {
    box-shadow: 0 50vh 0 50vh var(--dark-color);
}
/* Colour for form hints */
.text-muted {
    color: #888888 !important;
}
::placeholder {
    color: #888888 !important;
}
/* Layout for large screens */
@media (min-width: 992px) {
    .light-tile {
        height: 160px;
    }
}