:root {
	/* 
		For "advanced" users, changing the colors via the CSS variables 
		is the best and easier way to custimize colors and styles.
	*/

	/* Body */
		/* Background */
		--body-bg: hsl(var(--primary-color-hue), 100%, 98%);
		/* Font */
		--body-font-size: 95%;
		--body-font-family: 'Nunito', 'Segoe UI', 'Helvetica', 'Arial';
		/* Color */
		--body-txt-color: hsl(0, 0%, 0%);

	/* Inputs */
		/* Background */
		--input-bg: hsl(0, 0%, 100%);
		--input-bg-disabled: hsl(0, 0%, 85%);
		/* Border */
		--input-border-width: 1px;
		--input-border-style: solid;
		--input-border-color: var(--secondary-color);
		--input-border-radius: 3px;
		/* Color */
		--input-txt-color: hsl(0, 0%, 0%);
		--input-accent-color: hsl(var(--primary-color-hue), 50%, 75%);

	/* Primary color */
		/* Hue */
		--primary-color-hue: 200;
		/* Saturation */
		--primary-color-sat: 50%;
		/* Lightness */
		--primary-color-lum: 75%;
		/* Color (Can replace with HEX, RGB) */
		--primary-color: hsl(var(--primary-color-hue), var(--primary-color-sat), var(--primary-color-lum));
		/* Color Accent */
		--primary-color-acc: hsl(var(--primary-color-hue), var(--primary-color-sat), 30%);

	/* Secondary color */
		/* Hue */
		--secondary-color-hue: var(--primary-color-hue);
		/* Saturation */
		--secondary-color-sat: 30%;
		/* Lightness */
		--secondary-color-lum: 65%;
		/* Color (Can replace with HEX, RGB) */
		--secondary-color: hsl(var(--secondary-color-hue), var(--secondary-color-sat), var(--secondary-color-lum));
		/* Color Accent */
		--secondary-color-acc: hsl(var(--secondary-color-hue), var(--secondary-color-sat), 35%);

	/* Links */
		/* Color */
		--body-link-color: var(--primary-color-acc);
		--body-link-color-hover: var(--secondary-color-acc);

	/* Button */
		/* Height */
		--button-height: 30px;
		/* Background */
		--button-bg: var(--secondary-color);
		--button-bg-hover: var(--primary-color);
		/* Border */
		--button-border-width: 1px;
		--button-border-style: solid;
		--button-border-color: var(--secondary-color);
		--button-border-radius: 3px;
		/* Color */
		--button-txt-color: hsl(0, 0%, 95%);
		--button-txt-color-hover: hsl(0, 0%, 20%);

	/* New Button */
		/* Background */
		--newbutton-bg: var(--primary-color);
		/* Color */
		--newbutton-txt-color: hsl(0, 0%, 100%);

	/* Main Content */
		/* Background */
		--main-content-bg: hsl(0, 0%, 100%);
		/* Border */
		--main-content-border-width: 0;
		--main-content-border-style: solid;
		--main-content-border-color: hsl(var(--primary-color-hue), 25%, 50%);
		/* Shadow */
		--main-content-shadow-box: 0px 2px 4px -1px rgba(0, 76, 117, 0.1);

	/* Content Border */
		/* Border */
		--content-border-color: hsl(var(--primary-color-hue), 25%, 85%);

	/* Boards Title */
		/* Color */
		--main-boards-title: hsl(var(--primary-color-hue), var(--primary-color-sat), 25%);

	/* Catbg */
		/* Background */
		--catbg-bg: var(--primary-color);
		/* Font */
		--catbg-font-size: 1em;
		/* Height */
		--catbg-height: 40px;
		--catbg-grid-height: 35px;
		/* Color */
		--catbg-txt-color-hue: var(--primary-color-hue);
		--catbg-txt-color-sat: 15%;
		--catbg-txt-color: hsl(var(--catbg-txt-color-hue), var(--catbg-txt-color-sat), 25%);
		--catbg-txt-color-hover: hsl(var(--catbg-txt-color-hue), var(--catbg-txt-color-sat), 30%);
		/* Border */
		--catbg-border-width: 0 0 2px 0;
		--catbg-border-style: solid;
		--catbg-border-radius: 3px;
		--catbg-border-color: var(--primary-color-acc);
		/* Shadow */
		--catbg-txt-shadow: 1px 1px 1px hsl(var(--catbg-txt-color-hue) var(--catbg-txt-color-sat) 100% / 0.2);
		--catbg-box-shadow: none;

	/* Titlebg */
		/* Background */
		--titlebg-bg: var(--secondary-color);
		/* Font */
		--titlebg-font-size: 1em;
		/* Height */
		--titlebg-height: 40px;
		--titlebg-grid-height: 35px;
		/* Color */
		--titlebg-txt-color-hue: var(--secondary-color-hue);
		--titlebg-txt-color-sat: 25%;
		--titlebg-txt-color: hsl(var(--titlebg-txt-color-hue), var(--titlebg-txt-color-sat), 25%);
		--titlebg-txt-color-hover: hsl(var(--titlebg-txt-color-hue), var(--titlebg-txt-color-sat), 35%);
		/* Border */
		--titlebg-border-width: 0 0 2px 0;
		--titlebg-border-style: solid;
		--titlebg-border-radius: 3px;
		--titlebg-border-color: var(--secondary-color-acc);
		/* Shadow */
		--titlebg-txt-shadow: 1px 1px 1px hsl(var(--titlebg-txt-color-hue) var(--titlebg-txt-color-sat) 100% / 0.2);
		--titlebg-box-shadow: none;

	/* Windowbg */
		/* Windowbg1*/
		--windowbg-hue: var(--primary-color-hue);
		--windowbg-sat: 40%;
		--windowbg-lum: 95%;
		/* Windowbg2 */
		--windowbg2-hue: var(--secondary-color-hue);
		--windowbg2-sat: var(--windowbg-sat);
		--windowbg2-lum: 95%;
		/* Background */
		--windowbg-bg: hsl(var(--windowbg-hue), var(--windowbg-sat), var(--windowbg-lum));
		--windowbg2-bg: hsl(var(--windowbg2-hue), var(--windowbg2-sat), var(--windowbg2-lum));
		/* Color */
		--windowbg-txt-color: var(--body-txt-color);
		/* Border */
		--windowbg-border-radius: 2px;

	/* Roundframe */
	--roundframe-hue: var(--secondary-color-hue);
	--roundframe-sat: 30%;
	--roundframe-lum: 95%;
		/* Background */
		--roundframe-bg: hsl(var(--roundframe-hue), var(--roundframe-sat), var(--roundframe-lum));
		/* Border */
		--roundframe-border-width: 1px;
		--roundframe-border-style: solid;
		--roundframe-border-color: hsl(var(--roundframe-hue), 25%, 90%);
		--roundframe-border-radius: 2px;

	/* Header */
		/* Background */
		--header-bg: hsl(var(--primary-color-hue), 50%, 92%);

	/* Footer */
		/* Background */
		--footer-bg: hsl(var(--primary-color-hue), 50%, 92%);
		/* Color */
		--footer-txt-color: hsl(0, 0%, 0%);
		/* Links */
		--footer-links-color: var(--body-link-color);

	/* Main Nav */
		/* Background */
		--nav-bg: var(--primary-color);

	/* Main Nav Items */
		/* Background */
		--nav--item-bg: transparent;
		--nav--item-bg-hover: transparent;
		--nav--item-bg-active: var(--secondary-color);
		/* Color */
		--nav-item-txt-color: hsl(0, 0%, 25%);
		--nav-item-txt-color-hover: hsl(0, 0%, 0%);
		--nav-item-txt-color-active: hsl(0, 0%, 100%);
		/* Border */
		--nav-item-border-radius: 3px;
		/* Font */
		--nav-item-font-weight: 700;
		--nav-item-font-size: 0.9rem;

	/* Main Nav Drodown */
		/* Background */
		--nav--dropdown-bg: var(--windowbg-bg);
		/* Border */
		--nav-dropdown-border-width: 1px;
		--nav-dropdown-border-style: solid;
		--nav-dropdown-border-color: var(--secondary-color);
		--nav-dropdown-border-radius: 3px;

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

	/* Button List */
		/* Background */
		--buttonlist-bg: var(--windowbg-bg);
		--buttonlist-bg-hover: var(--roundframe-bg);
		--buttonlist-bg-active: var(--primary-color);
		/* Color */
		--buttonlist-txt-color: hsl(0, 0%, 10%);
		--buttonlist-txt-color-hover: hsl(0, 0%, 40%);
		--buttonlist-txt-color-active: hsl(0, 0%, 100%);

	/* Subnav Dropdown */
		/* Border */
		--subnav-dropdown-border-width: 1px;
		--subnav-dropdown-border-color: var(--primary-color);
		--subnav-dropdown-border-style: solid;
		--subnav-dropdown-border-radius: 3px;

	/* Profile Cover */
		/* Top Height */
		--profile-cover-image-height: 150px;
		/* Bottom Height */
		--profile-cover-details-height: 75px;

	/* Poster */
		/* Background */
		--poster-bg: hsl(var(--primary-color-hue), 30%, 90%);

	/* Status Colors */
		/* Sticky */
		--status-sticky-bg: hsl(22, 35%, 86%);
		--status-sticky-txt-color: var(--primary-color);
		/* Locked */
		--status-locked-bg: hsl(206, 19%, 86%);
		--status-locked-txt-color: var(--secondary-color-accent);
		/* Approve */
		--status-approve-bg: hsl(21, 66%, 69%);
		--status-approve-txt-color: hsl(8, 46%, 57%);
		/* Approve Topic */
		--status-approvet-bg: hsl(0, 100%, 96%);
}