:root {
	/* Primary color */
		/* Hue */
		--primary-color-hue: 240;

	/* Body */
		/* Background */
		--body-bg: var(--content-section-bg); 
		/* Color */
		--body-txt-color: hsl(0, 0%, 15%);
		/* Color Strong */
		--body-txt-color-strong: hsl(0, 0%, 35%);
		/* Font Family */
		--body-font-family: 'Lato', 'Segoe UI', 'Helvetica', 'Arial';

	/* Links */
		/* Color */
		--body-link-color: hsl(var(--primary-color-hue), 33%, 30%);

	/* Mode Toggle */
		/* Icon */
		--mode-icon-content: "\f185";
		/* Color */
		--mode-icon-color: hsl(40, 85%, 60%);

	/* Inputs */
		/* Background */
		--input-bg: hsl(0, 0%, 100%);
		--input-bg-disabled: hsl(0, 0%, 85%);
		/* Border */
		--input-border-color: hsl(0, 0%, 80%);
		/* Shadow */
		--input-shadow-color: rgba(180, 180, 180, 0.3);
		/* Color */
		--input-txt-color: hsl(0, 0%, 0%);
		--input-accent-color: var(--nav-item-txt-color-active);

	/* Button */
		/* Background */
		--button-bg: var(--nav-item-txt-color-active);
		--button-bg-hover: var(--button-bg);
		/* Color */
		--button-txt-color: hsl(0, 0%, 96%);
		--button-txt-color-hover: hsl(0, 0%, 90%);
		/* Border */
		--button-border-color: transparent;
		--button-border-color-hover: transparent;
		/* Shadow */
		--button-shadow: none;
		--button-shadow-hover: none;
		/* Text Shadow */
		--button-txt-shadow: none;

	/* New Button */
		/* Background */
		--newbutton-bg: hsl(var(--primary-color-hue), 35%, 60%);
		/* Color */
		--newbutton-txt-color: hsl(var(--primary-color-hue), 30%, 95%);

	/* Catbg */
		/* Background */
		--catbg-bg: transparent;
		--catbg-bg-hover: transparent;
		/* Color */
		--catbg-txt-color: var(--nav-item-txt-color-active);

	/* Titlebg */
		/* Background */
		--titlebg-bg: var(--windowbg-bg);
		--titlebg-bg-right: var(--windowbg-bg);
		--titlebg-bg-left: var(--windowbg-bg);
		/* Color */
		--titlebg-txt-color: hsl(var(--primary-color-hue), 10%, 20%);

	/* Windowbg */
		/* Background */
		--windowbg-bg: hsl(var(--primary-color-hue), 15%, 100%);
		--windowbg2-bg: hsl(var(--primary-color-hue), 20%, 98%);
		--windowbg-bg-target: hsl(var(--primary-color-hue), 25%, 90%);
		--windowbg-bg-hover: hsl(var(--primary-color-hue), 25%, 92%);
		/* Border */
		--windowbg-border-color: rgba(0, 0, 0, 0.2);
		/* Shadow */
		--windowbg-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
		--windowbg-shadow2: 0 2px 4px rgba(0, 0, 0, 0.2);

	/* Roundframe */
		/* Background */
		--roundframe-bg: hsl(var(--primary-color-hue), 15%, 100%);
		/* Shadow */
		--roundframe-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		/* Border */
		--roundframe-border-color: hsl(var(--primary-color-hue), 35%, 95%);

	/* Topbar */
		/* Background */
		--topbar-bg: hsl(var(--primary-color-hue), 6%, 98%);
		/* Border */
		--topbar-border-color: hsl(var(--primary-color-hue), 9%, 94%);

	/* Header */
		/* Background */
		--header-bg: hsl(var(--primary-color-hue), 30%, 65%);
		/* Border */
		--header-border-color: hsl(var(--primary-color-hue), 45%, 80%);

	/* Logo */
		/* Background */
		--logo-bg-hover: hsl(0, 0%, 30%);

	/* Footer */
		/* Background */
		--footer-bg: hsl(var(--primary-color-hue), 0%, 100%);
		/* Color */
		--footer-txt-color: hsl(var(--primary-color-hue), 10%, 55%);
		--footer-link-color: var(--nav-item-txt-color-active);
		--footer-custom-link-color: hsl(var(--primary-color-hue), 10%, 50%);
		--footer-custom-link-color-hover: hsl(var(--primary-color-hue), 10%, 70%);
		/* Border */
		--footer-border-color: hsl(var(--primary-color-hue), 15%, 85%);

	/* Nav */
		/* Background */
		--nav-bg: var(--topbar-bg);
		/* Shadow */
		--nav-shadow-color: rgba(0, 0, 0, 0.1);
		/* Border */
		--nav-border-color: hsl(var(--primary-color-hue), 6%, 86%);
		/* Color */
		--nav-txt-color: hsl(var(--primary-color-hue), 30%, 25%);

	/* Main Nav Items */
		/* Background */
		--nav-item-bg: transparent;
		--nav-item-bg-hover: transparent;
		--nav-item-bg-active: transparent;
		/* Color */
		--nav-item-txt-color: hsl(var(--primary-color-hue), 11%, 55%);
		--nav-item-txt-color-hover: hsl(var(--primary-color-hue), 12%, 40%);
		--nav-item-txt-color-active: hsl(var(--primary-color-hue), 100%, 73%);

	/* Main Nav Drodown */
		/* Background */
		--nav-dropdown-bg: hsl(var(--primary-color-hue), 100%, 99%);
		/* Shadow */
		--nav-dropdown-shadow: 0px 2px 10px -6px rgba(0, 0, 0, 0.3);
		/* Border */
		--nav-dropdown-border-color: hsl(var(--primary-color-hue), 35%, 85%);

	/* Main Nav Drodown Items */
		/* Background */
		--nav-dropdown-item-bg: transparent;
		--nav-dropdown-item-bg-hover: hsl(var(--primary-color-hue), 100%, 97%);
		--nav-dropdown-item-bg-active: hsl(var(--primary-color-hue), 50%, 88%);
		/* Color */
		--nav-dropdown-item-txt-color: hsl(var(--primary-color-hue), 30%, 45%);
		--nav-dropdown-item-txt-color-hover: hsl(var(--primary-color-hue), 5%, 32%);
		--nav-dropdown-item-txt-color-active: var(--nav-item-txt-color-active);

	/* Button List */
		/* Background */
		--buttonlist-bg: hsl(var(--primary-color-hue), 25%, 25%);
		--buttonlist-bg-hover: var(--button-bg-hover);
		--buttonlist-bg-active: var(--button-bg-hover);
		/* Shadow */
		--buttonlist-shadow: none;
		/* Border */
		--buttonlist-border-color: hsl(var(--primary-color-hue), 15%, 85%);
		--buttonlist-border-color-hover: hsl(var(--primary-color-hue), 15%, 80%);
		--buttonlist-border-color-active: hsl(var(--primary-color-hue), 15%, 75%);
		/* Color */
		--buttonlist-txt-color: var(--button-txt-color);
		--buttonlist-txt-color-hover: var(--button-txt-color-hover);
		--buttonlist-txt-color-active: hsl(0, 0%, 99%);
		/* Text Shadow */
		--buttonlist-txt-shadow: none;

	/* Pill Nav */
		/* Background */
		--pillnav-bg: transparent;
		--pillnav-bg-hover: var(--pillnav-bg);
		--pillnav-bg-active: var(--button-bg);
		/* Color */
		--pillnav-txt-color: var(--nav-dropdown-item-txt-color);
		--pillnav-txt-color-hover: var(--pillnav-txt-color);
		--pillnav-txt-color-active: hsl(0, 0%, 90%);

	/* 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), 6%, 31%);
		--poster-bg-hover: hsl(var(--primary-color-hue), 6%, 25%);
		--poster-bg-active: hsl(var(--primary-color-hue), 0%, 96%);
		/* Gradient */
		/* --poster-bg-gradient-start: var(--nav-dropdown-item-txt-color-active); */
		/* --poster-bg-gradient-end: hsl(var(--primary-color-hue), 12%, 90%); */
		/* Width */
		--poster-width: 220px;
		/* Color */
		--poster-txt-color: hsl(var(--primary-color-hue), 5%, 85%);
		--poster-link-color: hsl(var(--primary-color-hue), 5%, 98%);

	/* Status Colors */
		/* Sticky */
		--status-sticky-bg: hsl(var(--primary-color-hue), 30%, 90%);
		/* Locked */
		--status-locked-bg: hsl(var(--primary-color-hue), 15%, 75%);
		/* Approve */
		--status-approve-bg: hsl(5, 45%, 85%);
		/* Approve Topic */
		--status-approvet-bg: hsl(0, 55%, 90%);
	
	/* Tables and Lists */
		/* Border */
		--table-border-color: hsl(var(--primary-color-hue), 25%, 90%);

	/* Content Section */
		/* Background */
		--content-section-bg: transparent;

	/* Other Sections */
		/* Background */
		--uppersection-bg: hsl(var(--primary-color-hue), 24%, 89%);
		--forumsections-bg: hsl(var(--primary-color-hue), 6%, 85%);

	/* Forum News */
		/* Background */
		--forumnews-bg: hsl(var(--primary-color-hue), 40%, 98%);
		/* Inactive Background */
		--forumnews-bg-inactive: hsl(var(--primary-color-hue), 20%, 85%);

	/* Board Moderators */
		/* Background */
		--boardmoderators-bg: hsl(var(--primary-color-hue), 24%, 98%);
	
	/* Board Description */
		/* Background */
		--boarddescription-bg: hsl(var(--primary-color-hue), 45%, 98%);

	/* Board Dividers */
		/* Border */
		--boarddividers-border: hsl(var(--primary-color-hue), 25%, 85%);

	/* Sub Boards */
		/* Background */
		--subboards-bg: hsl(var(--primary-color-hue), 25%, 98%);
	
	/* Sub Boards Item */
		/* Background */
		--subboards-item-bg: hsl(var(--primary-color-hue), 15%, 96%);

	/* Tab Items */
		/* Background */
		--themetab-item-bg: transparent;
		/* Color */
		--themetab-item-txt-color: hsl(0, 0%, 35%);

	/* Popup Container */
		/* Background */
		--popup-container-bg: rgba(0, 0, 0, 0.7);

	/* Linktree */
		/* Background */
		--linktree-bg: hsl(var(--primary-color-hue), 6%, 31%);
		/* Color */
		--linktree-txt-color: hsl(var(--primary-color-hue), 15%, 85%);
		/* Before */
		--linktree-li-before-border-color: rgba(0, 0, 0, 0.1);

	/* ScEditor Group */
		/* Background */
		--sceditor-group-bg: hsl(var(--primary-color-hue), 25%, 95%);
		--sceditor-group-bg-active: hsl(var(--primary-color-hue), 25%, 98%);
		/* Border */
		--sceditor-group-border-color: hsl(var(--primary-color-hue), 25%, 67%);

	/* NoticeBox */
		/* Background */
		--noticebox-bg: hsl(50, 100%, 90%);
		/* Border */
		--noticebox-border-color: hsl(48, 95%, 50%);
		/* Color */
		--noticebox-txt-color: hsl(0, 0%, 15%);

	/* ErrorBox */
		/* Background */
		--errorbox-bg: hsl(0, 100%, 90%);
		/* Border */
		--errorbox-border-color: hsl(0, 95%, 50%);
		/* Color */
		--errorbox-txt-color: var(--noticebox-txt-color);

	/* InfoBox */
		/* Background */
		--infobox-bg: hsl(120, 100%, 90%);
		/* Border */
		--infobox-border-color: hsl(120, 95%, 50%);
		/* Color */
		--infobox-txt-color: var(--noticebox-txt-color);

	/* Amt */
		/* Background */
		--amt-bg: var(--nav-item-txt-color-active);

	/* Board Icons */
		/* Color */
		--boardicons-txt-color: hsl(var(--primary-color-hue), 15%, 35%);

	/* Avatar */
		/* Border */
		--avatar-border-radius: 50%;

	/* Quote */
		/* Border */
		--quote-border-color: hsl(var(--primary-color-hue), 35%, 65%);
		/* Background */
		--quote-bg: hsl(var(--primary-color-hue), 65%, 95%);
		--qutoe-alternate-bg: hsl(var(--primary-color-hue), 69%, 97%);
		/* Color */
		--quote-txt-color: hsl(var(--primary-color-hue), 25%, 25%);

	/* Code */
		/* Border */
		--code-border-color: hsl(var(--primary-color-hue), 40%, 50%);
		/* Background */
		--code-bg: hsl(var(--primary-color-hue), 48%, 92%);

	/* Alerts */
		/* Background */
		--alert-bg: hsl(var(--primary-color-hue), 12%, 98%);
		--alert-bg-hover: hsl(var(--primary-color-hue), 15%, 95%);
		/* Border */
		--alert-border-color: hsl(var(--primary-color-hue), 50%, 85%);

	/* Search */
		/* Background */
		--search-bg: hsl(var(--primary-color-hue), 9%, 18%);
		/* Border */
		--search-border-color: hsl(var(--primary-color-hue), 9%, 20%);
		/* Color */
		--search-txt-color: hsl(var(--primary-color-hue), 2%, 49%);

	/* Profile dropdown */
		/* Background */
		--profile-dropdown-bg: hsl(var(--primary-color-hue), 6%, 19%);
		--profile-dropdown-bg-hover: hsl(var(--primary-color-hue), 6%, 14%);
		/* Color */
		--profile-dropdown-txt-color: hsl(var(--primary-color-hue), 5%, 90%);
		/* Border */
		--profile-dropdown-border: var(--nav-border-color);

	/* Attachments */
		/* Background */
		--attachments-bg: hsl(var(--primary-color-hue), 26%, 92%);
}