:root {

	/* Primary Color */
	--primary-color-h: 215;
	--primary-color-s: 80%;
	--primary-color-l: 95%;

	/* Body */
		/* Background */
		--body-bg: hsl(var(--primary-color-h), 25%, var(--primary-color-l));
		/* Color */
		--body-txt-color: hsl(var(--primary-color-h), 50%, 10%);
		/* Font Family */
		--body-font-family: 'Be Vietnam Pro', sans-serif;

	/* Links */
		/* Color */
		--link-color: hsl(var(--primary-color-h), 75%, 40%);
		--link-color-hover: hsl(var(--primary-color-h), 65%, 50%);

	/* Inputs */
		/* Background */
		--input-bg-s: 45%;
		--input-bg-l: 97%;
		--input-bg: hsl(var(--primary-color-h), var(--input-bg-s), var(--input-bg-l));
		/* Border */
		--input-border-color: hsl(var(--primary-color-h), 65%, 85%);
		/* Color */
		--input-txt-color: hsl(var(--primary-color-h), 35%, 30%);
		/* Accent */
		--input-accent-color: hsl(var(--primary-color-h), 70%, 75%);
		/* Shadow */
		--input-shadow-color: hsla(var(--primary-color-h), 65%, 40%, 0.1);
	
	/* Button */
		/* Background */
		--button-bg-s: 40%;
		--button-bg-l: 90%;
		--button-bg: hsl(var(--primary-color-h), var(--button-bg-s), var(--button-bg-l));
		--button-bg-hover-s: 50%;
		--button-bg-hover-l: 85%;
		--button-bg-hover: hsl(var(--primary-color-h), var(--button-bg-hover-s), var(--button-bg-hover-l));
		/* Border */
		--button-border-color: hsl(var(--primary-color-h), 20%, 75%);
		/* Shadow */
		--button-shadow: 1px -1px 0px 0px rgba(0,0,0,.1) inset, 0px 1px rgba(255,255,255,0.7) inset;
		/* Color */
		--button-txt-color: hsl(var(--primary-color-h), 25%, 45%);
		/* Accent */
		--button-accent-color: hsl(var(--primary-color-h), 30%, 85%);

	/* Header */
		/* Background */
		--header-bg-s: 35%;
		--header-bg-l: 90%;
		--header-bg: linear-gradient(to bottom, var(--body-bg) 10%, hsl(var(--primary-color-h), var(--header-bg-s), var(--header-bg-l)) 95%);

	/* Top Bar */
		/* Background */
		--top-bar-bg: var(--body-bg);
		/* Border */
		--top-bar-border-s: 50%;
		--top-bar-border-l: 80%;
		--top-bar-border-color: hsl(var(--primary-color-h), var(--top-bar-border-s), var(--top-bar-border-l));
		/* Shadow */
		--top-bar-shadow-color: hsla(var(--primary-color-h), var(--top-bar-border-s), var(--top-bar-border-l), 0.8);
		/* Color */
		--top-bar-txt-color: hsl(var(--primary-color-h), 10%, 20%);
	
	/* Nav */
		/* Background */
		--nav-bg-s: 50%;
		--nav-bg-l: 50%;
		--nav-bg: hsl(var(--primary-color-h), var(--nav-bg-s), var(--nav-bg-l));
		
	/* Nav Items */
		/* Color */
		--nav-item-txt-color: hsl(var(--primary-color-h), 25%, 80%);
		--nav-item-txt-color-hover: hsl(var(--primary-color-h), 35%, 85%);
		--nav-item-txt-color-active: hsl(var(--primary-color-h), 70%, 95%);

	/* Nav Dropdown */
		/* Background */
		--nav-dropdown-bg: hsl(var(--primary-color-h), 20%, 90%);

	/* Main Nav Drodown Items */
		/* Background */
		--nav-dropdown-item-bg: transparent;
		--nav-dropdown-item-bg-hover: hsl(var(--primary-color-h), 20%, 50%);
		/* Color */
		--nav-dropdown-item-txt-color: hsl(var(--primary-color-h), 15%, 50%);
		--nav-dropdown-item-txt-color-hover: hsl(var(--primary-color-h), 0%, 95%);

	/* Content Section */
		/* Background */
		--content-section-bg: hsl(var(--primary-color-h), 35%, 94%);
		/* Border */
		--content-section-border-color: hsl(var(--primary-color-h), 50%, 60%);

	/* Footer */
		/* Background */
		--footer-bg-s: 60%;
		--footer-bg-l: 90%;
		--footer-bg: hsl(var(--primary-color-h), var(--footer-bg-s), var(--footer-bg-l));
		/* Color */
		--footer-txt-color: hsl(var(--primary-color-h), 30%, 25%);
		--footer-link-color: hsl(var(--primary-color-h), 50%, 30%);

	/* Content Titles */
		/* H2 */
		--h2-content-color: hsl(var(--primary-color-h), 60%, 30%);
		/* H3 */
		--h3-content-color: hsl(var(--primary-color-h), 60%, 15%);
		/* Text Shadow */
		--content-title-shadow-color: white;

	/* Article */
		/* Background */
		--article-bg: hsl(var(--primary-color-h), 10%, 95%);
		/* Shadow */
		--article-shadow-color: 0px 1px 1px 0px rgba(0, 0, 0, 0.1) inset, 0px -1px 1px 0px rgba(0, 0, 0, 0.1) inset;

	/* Article Body */
		/* Border */
		--article-body-border-color: hsla(var(--primary-color-h), 30%, 40%, 0.1);

	/* Sidebar Blocks */
		/* Background */
		--sidebar-block-bg: hsl(var(--primary-color-h), 25%, 90%);

	/* Sidebar Links */
		/* Color */
		--sidebar-link-color: hsl(var(--primary-color-h), 60%, 35%);
		--sidebar-link-color-hover: hsl(var(--primary-color-h), 60%, 50%);

	/* Color Mode */
	--color-mode-icon-content: "\f185";
	--color-mode-icon-color: hsl(41, 90%, 65%);
}