:root {
    --default-color-text: #454545;
    --default-color-bg: #fff;
    --default-header-text: #fff;
    --default-header-bg: #09817c;
    --default-footer-text: #000;
    --default-footer-bg: #fff;
    --default-footer-a: #0e607c;
    --default-color-a: #0e607c;
    --default-sb-default-text: var(--default-header-bg);
    --default-sb-default-bg: var(--default-header-text);
    --default-sb-dark-text: ;
    --default-sb-dark-bg: ;
    --default-sb-contrast-text: ;
    --default-sb-contrast-bg: ;
    --default-a-decoration: none;
    --default-img-filter: ;
    --default-nav-hover-bg: #f5f5f5;
    --default-nav-img-filter: ;
    --default-hl-color: #b507ff;

    --contrast-color-text: #000;
    --contrast-color-bg: #fff;
    --contrast-header-text: #000;
    --contrast-header-bg: #eee;
    --contrast-footer-text: #000;
    --contrast-footer-bg: #fff;
    --contrast-footer-a: #000;
    --contrast-color-a: #000;
    --contrast-sb-default-text: ;
    --contrast-sb-default-bg: ;
    --contrast-sb-dark-text: ;
    --contrast-sb-dark-bg: ;
    --contrast-sb-contrast-text: var(--contrast-header-bg);
    --contrast-sb-contrast-bg: var(--contrast-header-text);
    --contrast-a-decoration: underline;
    --contrast-img-filter: grayscale(1);
    --contrast-nav-hover-bg: var(--contrast-header-bg);
    --contrast-nav-img-filter: ;
    --contrast-hl-color: #000;

    --dark-color-text: #ebebeb;
    --dark-color-bg: #000;
    --dark-header-text: #ebebeb;
    --dark-header-bg: #222;
    --dark-footer-text: #ebebeb;
    --dark-footer-bg: #000;
    --dark-footer-a: #00c7ff;
    --dark-color-a: #00c7ff;
    --dark-sb-default-text: ;
    --dark-sb-default-bg: ;
    --dark-sb-dark-text: var(--dark-header-bg);
    --dark-sb-dark-bg: var(--dark-header-text);
    --dark-sb-contrast-text: ;
    --dark-sb-contrast-bg: ;
    --dark-a-decoration: none;
    --dark-img-filter: ;
    --dark-nav-hover-bg: var(--dark-header-bg);
    --dark-nav-img-filter: invert(1);
    --dark-hl-color: #ff2574;

    --color-text: var(--default-color-text);
    --color-bg: var(--default-color-bg);
    --header-text: var(--default-header-text);
    --header-bg: var(--default-header-bg);
    --footer-text: var(--default-footer-text);
    --footer-bg: var(--default-footer-bg);
    --footer-a: var(--default-footer-a);
    --color-a: var(--default-color-a);
    --sb-default-text: var(--default-sb-default-text);
    --sb-default-bg: var(--default-sb-default-bg);
    --sb-dark-text: var(--default-sb-dark-text);
    --sb-dark-bg: var(--default-sb-dark-bg);
    --sb-contrast-text: var(--default-sb-contrast-text);
    --sb-contrast-bg: var(--default-sb-dark-bg);
    --a-decoration: var(--default-a-decoration);
    --img-filter: var(--default-img-filter);
    --nav-hover-bg: var(--default-nav-hover-bg);
    --nav-img-filter: var(--default-nav-img-filter);
    --hl-color: var(--default-hl-color);
}

.theme-default {
    --color-text: var(--default-color-text);
    --color-bg: var(--default-color-bg);
    --header-text: var(--default-header-text);
    --header-bg: var(--default-header-bg);
    --footer-text: var(--default-footer-text);
    --footer-bg: var(--default-footer-bg);
    --footer-a: var(--default-footer-a);
    --color-a: var(--default-color-a);
    --sb-default-text: var(--default-sb-default-text);
    --sb-default-bg: var(--default-sb-default-bg);
    --sb-dark-text: var(--default-sb-dark-text);
    --sb-dark-bg: var(--default-sb-dark-bg);
    --sb-contrast-text: var(--default-sb-contrast-text);
    --sb-contrast-bg: var(--default-sb-contrast-bg);
    --a-decoration: var(--default-a-decoration);
    --img-filter: var(--default-img-filter);
    --nav-hover-bg: var(--default-nav-hover-bg);
    --nav-img-filter: var(--default-nav-img-filter);
    --hl-color: var(--default-hl-color);
}

.theme-contrast {
    --color-text: var(--contrast-color-text);
    --color-bg: var(--contrast-color-bg);
    --header-text: var(--contrast-header-text);
    --header-bg: var(--contrast-header-bg);
    --footer-text: var(--contrast-footer-text);
    --footer-bg: var(--contrast-footer-bg);
    --footer-a: var(--contrast-footer-a);
    --color-a: var(--contrast-color-a);
    --sb-default-text: var(--contrast-sb-default-text);
    --sb-default-bg: var(--contrast-sb-default-bg);
    --sb-dark-text: var(--contrast-sb-dark-text);
    --sb-dark-bg: var(--contrast-sb-dark-bg);
    --sb-contrast-text: var(--contrast-sb-contrast-text);
    --sb-contrast-bg: var(--contrast-sb-contrast-bg);
    --a-decoration: var(--contrast-a-decoration);
    --img-filter: var(--contrast-img-filter);
    --nav-hover-bg: var(--contrast-nav-hover-bg);
    --nav-img-filter: var(--contrast-nav-img-filter);
    --hl-color: var(--contrast-hl-color);
}

.theme-dark {
    --color-text: var(--dark-color-text);
    --color-bg: var(--dark-color-bg);
    --header-text: var(--dark-header-text);
    --header-bg: var(--dark-header-bg);
    --footer-text: var(--dark-footer-text);
    --footer-bg: var(--dark-footer-bg);
    --footer-a: var(--dark-footer-a);
    --color-a: var(--dark-color-a);
    --sb-default-text: var(--dark-sb-default-text);
    --sb-default-bg: var(--dark-sb-default-bg);
    --sb-dark-text: var(--dark-sb-dark-text);
    --sb-dark-bg: var(--dark-sb-dark-bg);
    --sb-contrast-text: var(--dark-sb-contrast-text);
    --sb-contrast-bg: var(--dark-sb-contrast-bg);
    --a-decoration: var(--dark-a-decoration);
    --img-filter: var(--dark-img-filter);
    --nav-hover-bg: var(--dark-nav-hover-bg);
    --nav-img-filter: var(--dark-nav-img-filter);
    --hl-color: var(--dark-hl-color);
}

#theme_default_switch {
    background: var(--sb-default-bg);
    color: var(--sb-default-text);
}

#theme_dark_switch {
    background: var(--sb-dark-bg);
    color: var(--sb-dark-text);
}

#theme_contrast_switch {
    background: var(--sb-contrast-bg);
    color: var(--sb-contrast-text);
}

.bg-custom {
    /* background-color: #8fa8c1 !important; */
    /* background-color: #9b9fa3 !important; */
    background-color: #030e18 !important;
}

.navbar-nav a {
    font-size: 2em !important;
}

.nav-link {
    /* color: #201E50 !important; */
    color: whitesmoke !important;
}

.custom-toggler {
    fill: whitesmoke !important;
    color: whitesmoke !important;
    stroke: whitesmoke !important;
}

body {
    background: var(--color-bg);
    line-height: 1.6;
    font-size: 18px;
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 10rem !important;
}

body .navbar-nav {
    margin-bottom: auto !important;
}