:root {
	--phperiodical-primary: #d2a7ef; 
	--phperiodical-primary-text: #f9ffe7;
	--phperiodical-background-main: #ffffff;
	--phperiodical-background-darker: #eeeeee;
	
	--phperiodical-secondary:#3d405b;
	--phperiodical-secondary-dark: #33202a;
	--phperiodical-secondary-text: #FFF;
	
	--phperiodical-text-dark: #111;
	--phperiodical-text: #555;
	--phperiodical-text-light: #777;
	
	--phperiodical-header-background: #000000;
	--phperiodical-header-lighter: #222;
	--phperiodical-header-text: #FFFFFF;
	--phperiodical-top-bar-text: #777777;
	
	--phperiodical-mobile-header-background: #FFFFFF;
	--phperiodical-mobile-header-text: #222222; 

}

@background: var(--phperiodical-background-main);
@background-darker: var(--phperiodical-background-darker);

@primary: var(--phperiodical-primary); 
@primary-text: var(--phperiodical-primary-text); //color of text where background is @primary

@secondary: var(--phperiodical-secondary);
@secondary-dark: var(--phperiodical-secondary-dark);
@secondary-text: var(--phperiodical-secondary-text);

@text-dark: var(--phperiodical-text-dark);
@text-content: var(--phperiodical-text);
@text-light: var(--phperiodical-text-light); 

@header-bg: var(--phperiodical-header-background);
@header-text: var(--phperiodical-header-text);
@header-lighter: var(--phperiodical-header-lighter);
@top-bar-text: var(--phperiodical-top-bar-text);

@header-mobile-bg: var(--phperiodical-mobile-header-background);
@header-mobile-text: var(--phperiodical-mobile-header-text);