:root {
    --small: 90%;
    --p-font-size: 0.875rem;
    --h1-font-size: 2rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --right-menu-font-size: 12px;
    --off-white: rgba(225, 225, 225,1);
}

.dropdown-divider {
    border-top: 1px solid var(--off-white);
}

@media (prefers-color-scheme: light) {
    :root {
        --nav-bg: rgba(42,42,42,1); /*#2a2a2a;*/
        --nav-color: #FFFFFF;
        --dropdown-color: #FFFFFF;
        --nav-font-family: 'Lato', sans-serif;
        --outer-container-color: #000000;
        --outer-container-bg: rgba(202,221,252,1); /*#caddfc;*/
        --main-bg: rgba(180,203,240,1); /*#b4cbf0;*/
    }
    #outer-container {
        color: var(--outer-container-color);
        background: linear-gradient(180deg, var(--nav-color) -10%, var(--outer-container-bg) 50%, var(--main-bg) 100%);
    }
    .panel-theme {
        background-color: var(--nav-color);
        color: var(--nav-bg);
    }

}
@media (prefers-color-scheme: dark) {
    :root {
        --nav-bg: rgba(55,55,55,1);
        --nav-color: var(--off-white);
        --dropdown-color: var(--off-white);
        --nav-font-family: 'Lato', sans-serif;
        --outer-container-color: rgba(225, 225, 225,1);
        --outer-container-bg: rgba(55,55,55,1);
        --main-bg: rgba(0,0,0,1);
        --bs-link-color: #76a3e7;
    }
    #outer-container {
        color: var(--outer-container-color);
        background: linear-gradient(180deg, var(--outer-container-bg), var(--main-bg) 33%);
    }
    .theme-navbar .navbar-toggler-icon {
        --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
    }
    .panel-theme {
        background-color: var(--nav-bg);
        color: var(--nav-color);
    }
    .panel-theme a {

    }
}

* {
    font-family: var(--nav-font-family);
}

.main-area {
    background-color: var(--main-bg);
}

/* Drop down */

.nav-link:focus, .nav-link:hover {
    color: var(--bs-link-color);
}

.navbar-nav .dropdown-menu {
    background: var(--nav-bg);
    color: var(--dropdown-color);
}

.navbar {
    background-color: var(--nav-bg);
}
.navbar a {
    color: var(--nav-color);
}
.navbar-bg {
    background-color: var(--nav-bg);
}
footer {
    background-color: var(--nav-bg);
    color: var(--nav-color);
}

.dropdown-menu a {
    color: var(--dropdown-color);
}
.dropdown-item:focus, .dropdown-item:hover {
/*    color: var(--nav-color);*/
    text-decoration: none;
/*    background-color: var(--nav-bg);*/
}
.dropdown-item {
    font-size: 14px;
}

h1 {
    font-size: var(--h1-font-size);
}
h2 {
    font-size: var(--h2-font-size);
}
h3 {
    font-size: var(--h3-font-size);
}

p {
    font-size: var(--p-font-size);
}

li {
    font-size: var(--p-font-size);
}

#index-container h2 {
    text-align: center;
}
#right-menu {
    padding: 0;
}
#right-menu p, #right-menu li, #right-menu th, #right-menu td {
    font-size: var(--right-menu-font-size);
}

.active-category {
    color: var(--bs-link-hover-color);
}

small {
    font-size: var(--small);
}

#herounit .content .c1 {
    margin: auto;
    position: relative;
    z-index: 1;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1200px;
    }
}

.cursor-pointer {
    cursor: pointer
}

.cursor-not-allowed {
    cursor: not-allowed;
}

/* side menu */
#sidebar ul li.active>a, a[aria-expanded=true] {
    background: none;
}

/* Submenu*/
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

.continue-reading {
    position:absolute;
    right:50px;
    bottom:0;
}