/* BASE COLOR*/
/* hsl(215,46%,54%) */
:root{
--example:hsl(100, 30%, 40%);
--h: 100 ;
--s: 0% ;
--l: 100% ;
}

/*CALCULATED COLORS*/

header, header > div                            { background: linear-gradient(0deg, hsl( var(--h), var(--s), var(--l)) 0%, hsl( calc(var(--h)), calc(var(--s) - 10%), calc(var(--l) - 15%)) 100%);}

nav, nav li										{ background-color: hsl( var(--h), var(--s), var(--l));}
nav li:hover, nav li label:hover				{ background-color: hsl( var(--h), var(--s), calc(var(--l) - 10%)) ;}
nav li a:active,nav li label:active 			{ background-color: hsl( var(--h), var(--s), calc(var(--l) - 15%)) ;}

nav li li										{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 5%));}
nav li li:hover, nav li li label:hover			{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 15%));}
nav li li a:active,nav li li label:active		{ background-color: hsl( calc(var(--h) - 20), calc(var(--s) + 15%), calc(var(--l) - 25%));}

nav li li li 									{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 10%));}
nav li li li:hover, nav li li li label:hover	{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 20%));}
nav li li li:active,nav li li li label:active	{ background-color: hsl( calc(var(--h) - 40), calc(var(--s) + 30%), calc(var(--l) - 30%));}


html                                            { background-color: #456E47 }
body                                            { background-color: hsl( var(--h), var(--s), var(--l));}



footer {background: linear-gradient(180deg, hsl( var(--h), var(--s), var(--l)) 0%, hsl( calc(var(--h)), calc(var(--s) - 10%), calc(var(--l) - 15%)) 100%)}

/*HARDCODED COLORS*/

nav, nav a 			{ color:		   #000000;}