/* >> color_palette.css */

:root {
    --orange: #e51;
    --accent_color: #e51;
    --accent_color_up: #f60;
    --accent_color_2: #36c;
    --accent_color_2_up: #6cf;
    --black: #222;
    --white: #eee;

    --main_color: var(--black);
    --main_bg: #eee;
    --alt_main_color: var(--white);
    --alt_main_bg: var(--black);
    --link_color: #36c;
    --link_color_hover: #3c6;
    
    --nav-link_color: #58e;
    --nav-link_color_hover: #3c6;

    --nav_color: #eee;
    --nav_color_hover: #fff;
    --nav_bg_light: var(--black);
    --nav_bg_dark: var(--white);
    --nav_btn_text_hover: #fff;

    --pointer_color: #36c;
    --pointer_bg: rgba(125, 125, 125, 0.25);
    --pointer_bg_up: rgba(225, 225, 225, 0.25);

    --nav_btn_bg: radial-gradient(circle, #999999, #666666, #4f4f4f, #393939, #252525);
    --nav_btn_bg_hover: radial-gradient(circle, #888888, #676767, #494949, #2c2c2c, #111111);
    /* --img_border: radial-gradient(circle, #ff0000, #0000ff); */
    --img_border-color: #666666;
}

body {
    color: var(--main_color);
    background-color: var(--main_bg);
    opacity: 0;
    transition: all 2000ms ease-in-out;
}

body.lightmode {
    color: var(--main_color);
    --link_color: #36c;
    --link_color_hover: #3c6;
    --nav-link_color: #58e;
    --nav-link_color_hover: #3c6;
    background-color: var(--main_bg);
}

body.darkmode {
    color: var(--alt_main_color);
    --link_color: #36c;
    --link_color_hover: #3c6;
    --nav-link_color: #58e;
    --nav-link_color_hover: #3c6;
    background-color: var(--alt_main_bg);
}

nav a:any-link,
a:any-link {
    color: var(--nav-link_color);
}

nav a:any-link:hover,
a:any-link:hover {
    color: var(--nav-link_color_hover);
}

footer,
header {
    background-color: var(--nav_bg_light);
}

.vertical_nav_buttons,
body.lightmode footer,
body.lightmode .vertical_nav_buttons {
    color: var(--alt_main_color);
    background-color: var(--nav_bg_light);
}

body.darkmode footer,
body.darkmode .vertical_nav_buttons {
    color: var(--main_color);
    background-color: var(--nav_bg_dark);
}

body.lightmode header #darktolight,
body.lightmode #darktolight {
    display: none;
}

body.darkmode header #lighttodark,
body.darkmode #lighttodark {
    display: none;
}


/* ====== Mode set by client preference: Light ======

@media (prefers-color-scheme: light) {
    body {
        color: var(--black);
        background-color: var(--white);
    }

    header {
        background-color: var(--nav_bg_light);
    }

    body.darkmode {
        color: var(--white);
        background-color: var(--black);
    }
}
 */


/* ====== Mode set by client preference: Dark ====== 

@media (prefers-color-scheme: dark) {
    body {
        color: var(--white);
        background-color: var(--black);
    }
    header {
        background-color: var(--nav_bg_dark);
    }
    body.lightmode {
        color: var(--black);
        background-color: var(--white);
    }
}
*/