/*THEMING FOR PZ's PORTFOLIO*/


/*Raw values*/
:root {

    --white:#FFFFFF; /*backgrounds*/
    --white5:#FFFFFF05;
    --white20:#FFFFFF20;
    --white50:#FFFFFF50;
    --white80: #FFFFFF80;

    --bone:#f4f4f1; /*page background*/
    --eigelb:#FFC800;
    --orange:#E3764A; /*hs*/
    --blueberry:#2E2C4D;
    --grape:#3B243E;
    --grape50:#3B243E50;

    --black:#111111;
    --black50:#11111150;
    --black70:#11111170;

    --berry-gradient:linear-gradient(180deg, #304484, #3B243E); /*grape and blueberry*/
    --cream-gradient:linear-gradient(176deg, #e6dbce, #f4f4f1); /*bone and random*/
 	--pulse-gradient: linear-gradient(180deg, #1a4440, #476966);
    --rg-gradient: linear-gradient(180deg, #007478, #01504e);
    --gradient-animation:AnimationName 8s ease infinite;
    --gradient-size:400% 400%;
    
    --rg-primary:#00A39E;
    --rg-primary-dark:#005f63;
    --rg-primary-light:#DDF0EE;
    --rg-secondary:#0080FF;
    --rg-light-grey:#F4F4F4;
 
    --ecol-primary:#1A4440;
    --ecol-primary-light:#47696650;
    --ecol-primary-dark:#0E2220;
    --ecol-fog: #F4F9FA;
    --ecol-secondary: #0B7F99;
 
    --eph-primary: #4A69A6;
    --eph-primary-dark: #2A4B8C;
    --eph-bg: #F4F4F4;
 
    --eln-primary:#2FA4BE;
    --eln-primary-dark:#067B95;
    --eln-secondary:#002B56;
    --eln-secondary-dark:#00002D;
    --eln-bg:#FAFAFB;
 
    --lims-primary: #5B9A19;
    --lims-primary-light: #89BC50;
    --lims-secondary:#002B56;
    --lims-secondary-dark:#00002D;
    --lims-bg:#FAFAFB;

}    


/*Themes*/

    /* ----- PZ Dark ----- */
 	
     	.theme-pzdark {
     		--dark-gradient: var(--berry-gradient);
     		--light-gradient: var(--cream-gradient);

     		--main-font-color: var(--bone);
            --contrast-font-color: var(--grape);
            --underline-color: var(--bone);
            --nav-links-color:var(--bone);
            --footer-font-color: var(--bone);

            --accent-color: var(--orange);
            --light-color: var(--bone);
            --dark-color: var(--grape);

            --border-color: var(--white20);
            --border-image: var(--bone);
            --border-thumb: var(--bone);
            --box-shadow-color: var(--grape50);
            --border-color-intense: var(--white50);
            --card-bg-color: var(--white20);
            --chip-bg-color:;
            --chip-active--color:;
            --detail-header-font-color: var(--bone);
            --feature-block-bg-color: var(--white20);
            --speech-bubble-bg-color: var(--white20);

            position:relative;
            background: var(--dark-gradient);
            background-size: var(--gradient-size);
            animation: var(--gradient-animation);
        }

    /* ----- Pulse ----- */
    
        .theme-pulse {
            --dark-gradient: var(--pulse-gradient);

            --main-font-color: var(--ecol-primary-dark);
            --contrast-font-color: var(--ecol-fog);
            --underline-color: var(--ecol-primary-dark);
            --nav-links-color:var(--ecol-fog);
            --nav-links-scrolled-color: var(--ecol-secondary);
            --footer-font-color: var(--ecol-fog);

            --accent-color: var(--ecol-secondary);
            --light-color: var(--ecol-fog);
            --dark-color: var(--ecol-secondary);

            --border-color: var(--ecol-primary-light);
            --border-image: var(--ecol-primary-light);
            --border-thumb: var(--ecol-primary);
            --box-shadow-color: var(--ecol-primary);
            --card-bg-color: var(--white20);
            --chip-bg-color:var(--white20);
            --chip-font-color:var(--ecol-fog);
            --chip-emphasis-bg-color:var(--ecol-primary-light);
            --chip-emphasis-font-color:var(--ecol-primary-dark);
            --detail-header-font-color: var(--ecol-fog);
            --detail-content-bg-color:#efefef;
            --feature-block-bg-color: var(--ecol-fog);
            --speech-bubble-bg-color: var(--white20);


            position:relative;
            background: var(--dark-gradient);
            background-size: var(--gradient-size);
            animation: var(--gradient-animation);
        }  

    /* ----- RG ----- */
    
        .theme-rgmobile {
            --dark-gradient: var(--rg-gradient);

            --main-font-color: var(--rg-primary-dark);
            --contrast-font-color: var(--ecol-fog);
            --underline-color: var(--ecol-primary-dark);
            --nav-links-color:var(--white);
            --nav-links-scrolled-color: var(--white);
            --footer-font-color: var(--white);

            --accent-color: var(--rg-primary);
            --light-color: var(--rg-primary-light);
            --dark-color: var(--rg-primary-dark);

            --border-color: var(--rg-primary);
            --border-image: var(--rg-primary-light);
            --border-thumb: var(--rg-primary);
            --box-shadow-color: var(--rg-primary-dark);
            --card-bg-color: var(--white20);
            --chip-bg-color:var(--white20);
            --chip-font-color:var(--white);
            --chip-emphasis-bg-color:var(--rg-primary-light);
            --chip-emphasis-font-color:var(--rg-primary-dark);
            --detail-header-font-color: var(--white);
            --detail-content-bg-color:var(--rg-light-grey);
            --feature-block-bg-color: var(--rg-primary);


            position:relative;
            background: var(--dark-gradient);
            background-size: var(--gradient-size);
            animation: var(--gradient-animation);
        }