:root {

	/*.skip_to_links*/
	--fw-skip_to_links: 800;

	/*.page_top*/
	--background-page_top: hsla(0, 98%, 8%, 1);
	--margin-left-page_top: 5px;
	--margin-right-page_top: 5px;
	--margin-page_top: 0;

	/*.main_page_title*/
	--fs-main_page_title: 3.5rem;
	--color-main_page_title: hsla(37, 100%, 50%, 1);

	/*.cowboy_up*/
	--background-cowboy_up: hsla(0, 98%, 8%, 1);
	--padding-cowboy_up: 5px;
	--color-cowboy_up: hsla(43, 100%, 62%, 1);
	--border-radius-cowboy_up: 4px;

	/*.cowboy_up_chant*/
	--fs-cowboy_up_chant: 1.2rem;
	--font-width-cowboy_up_chant: 70ch;
	--color-cowboy_up_chant: hsla(37, 100%, 50%, 1);

	/*.cowboy_up_purpose*/
	--fs-cowboy_up_purpose: 1rem;
	--color-cowboy_up_purpose: hsla(43, 100%, 62%, 1);

	/*.document_class*/
	--fs-document_class: 1.5rem;
	--border-radius-document_class: 4px;
	--color-document_class: hsla(43, 100%, 62%, 1);

	--fs-link_descriptions: 1.0rem;
	--fs-content: 1.2rem;

	/*.blockquote-normal*/
	--fs-blockquote-normal: 1.0rem;
	--color-blockquote-normal: hsla(100, 100%, 100%, 1);

	--fs-subsection_title: 1.2rem;
	--fs-subsection_normal_links: 1.0rem;

	/*.preamble*/
	--background-preamble: hsla(0, 98%, 8%, 1);
	--padding-left-preamble: 8px;
	--padding-right-preamble: 8px;
	--fs-preamble: 1.5rem;
	--text-align-preamble: left;
	--line-height-preamble: 1.8rem;
	--letter-spacing-preamble: 0.02rem;
	--color-preamble: hsla(37, 100%, 50%, 1);

	/*.postamble*/
	--background-postamble: hsla(0, 98%, 8%, 1);
	--padding-left-postamble: 8px;
	--padding-right-postamble: 8px;
	--fs-postamble: 1.4rem;
	--color-postamble: hsla(100, 100%, 100%, 1);

	/*.background-centered_heading*/
	--background-centered_heading: hsla(0, 98%, 8%, 1);
	--fs-centered_heading: 1.4rem;

	/*.sections*/
	--background-sections: hsla(0, 98%, 8%, 1);
	--padding-sections: 0 0 5px 0;
	--width-sections: 100%;
	--color-sections: hsla(43, 100%, 62%, 1);
	--border-radius-sections: 4px;

	/*.nav_sections	*/
	--background-nav_sections: hsla(0, 0%, 0%, 0);
	--padding-nav_sections: 0 0 5px 0;
	--width-nav_sections: 100%;
	--color-nav_sections: hsla(43, 100%, 62%, 1);
	--border-radius-nav_sections: 4px;

	/*.nav_principal_list*/
	--background-nav_principal_list: hsla(0, 0%, 0%, 1);
	--padding-nav_principal_list: 4px;
	--fs-nav_principal_list: 1.2rem;

	/*.nav_blocks*/
	--background-color-nav_blocks: hsla(0, 0%, 0%, 1);
	--width-nav_blocks: 100%;
	--padding-left-nav_blocks: 5px;
	--border-radius-nav_blocks: 4px;

	/*.nav_links*/
	--line-height-nav_links: 1.1em;
	--fw-bold-nav_links: 800;
	--color-nav_links: hsla(37, 100%, 50%, 1);
	--color-nav_links-hover: hsla(59, 100%, 73%, 1);

	/*.normal_links*/
	--fs-normal_links: 1.2rem;
	--line-height-normal_links: 1.1em;
	--fw-bold-normal_links: 800;
	--color-normal_links: hsla(37, 100%, 50%, 1);

	/*.normal_links:hover*/
	--background-normal_links-hover: hsla(304, 75%, 67%, 1);
	--color-normal_links-hover: hsla(0, 0%, 0%, 1);

	/*.sectioning*/
	--fw-bold-sectioning: 800;

	/*.subsection_normal_links*/
	--fw-bold-subsection_normal_links: 800;
	--line-height-subsection_normal_links:  1.1em;
	--color-subsection_normal_links: hsla(37, 100%, 50%, 1);

	/*.document_links*/
	--fw-bold-document_links: 800;

	--fw-800: 800;



	/*GENERAL COLOR PALETTE*/
	--light-color: hsla(43, 100%, 62%, 1);
	--lightest-palette-color: hsla(37, 100%, 50%, 1);
	--second-lightest-palette-color: hsla(34, 100%, 41%, 1);
	--middle-palette-color: hsla(30, 100%, 32%, 1);
	--second-darkest-palette-color: hsla(23, 100%, 24%, 1);
	--darkest-palette-color: hsla(6, 100%, 17%, 1);

	/*
	 * #ff9d00  hsla(37, 100%, 50%, 1) 
	 * #d07700  hsla(34, 100%, 41%, 1)
	 * #a35200  hsla(30, 100%, 32%, 1)
	 * #792f00  hsla(23, 100%, 24%, 1)
	 * #550900  hsla(6, 100%, 17%, 1)
	 */


}


.skip_to_links {
	position: absolute;
	top: 0px;
	padding: 0.5rem 1.5rem;
	line-height: 1.8rem;
	font-size: 1.0rem;
	font-weight: var(--fw-skip_to_links);
	transform: translateY(-80%);
	transition: transform 325ms ease-in;
}

.skip_to_links a {
	background: black;
	padding: 3px;
	margin: 0.5rem 0.5rem;
	color: hsla(36, 100%, 90%, 1);
	text-decoration: none;
	border-radius: 0 0 0.25rem 0.25rem;
	transition: transform 325ms ease-in;
}

.skip_to_links a:hover, .skip_to_links a:focus, .skip_to_links a:active {
	transform: translateY(100%);
	transition: transform 325ms ease-in;
}

.site_navigation a, .offsite_navigation a, .sections_start a, .topic_navigation a {
	color: hsla(36, 100%, 90%, 1);
}

.push_left {
	margin-right: 100px;
}

.push_right {
	margin-left: 100px;
}


.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 30px;
	grid-template-areas:
	"page_top page_top page_top"
	"cowboy_up cowboy_up cowboy_up"
	"sidebar_nav declarations declarations"
	"sidebar_nav constitutions constitutions"
	"sidebar_nav annexations annexations"
	"sidebar_nav historical_laws historical_laws"
	"sidebar_nav historical_economies historical_economies";

}

.container_simple {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 30px;
	grid-template-areas:
	"page_top page_top page_top"
	"cowboy_up cowboy_up cowboy_up"
	"sidebar_nav page_section_topic page_section_topic";

}

.page_top {
	grid-area: page_top;
	background: var(--background-page_top);
	margin-top: -5px; 
	padding-top: 5px;
	/*margin: var(--margin-page_top);*/
	color: hsla(17, 100%, 58%, 1);
}



/*START MEDIA QUERY*/

@media only screen and (max-width: 600px) {

	.skip_to_links {
		padding: 0.2rem 0.6rem;
		width: max-content;
		line-height: 1.0rem;
		font-size: 0.8rem;
	}

	.container {
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 30px;
		grid-template-areas:
		"page_top"
		"cowboy_up"
		"declarations"
		"constitutions"
		"annexations"
		"historical_laws"
		"historical_economies"
		"sidebar_nav";
	}

	.container_simple {
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 30px;
		grid-template-areas:
		"page_top"
		"cowboy_up"
		"page_section_topic"
		"sidebar_nav";
	}

}

/*END MEDIA QUERY*/

/*START MEDIA QUERY*/

@media only screen and (max-width: 1000px) {
	.push_left {
		display: none;
	}

	.push_right {
		display: none;
	}
}

/*END MEDIA QUERY*/

/*
 *@supports (::webkit-scrollbar) {
 *  ::webkit-scrollbar {	width: 1em;
 *    height: 1em;
 *  }
 *}
 *
 *@supports (::webkit-scrollbar-track) {
 *  ::webkit-scrollbar-track {
 *    background: blue;
 *  }
 *}
 *
 *@supports (::webkit-scrollbar-thumb) {
 *  ::webkit-scrollbar-thumb {
 *    background: red;
 *  }
 *}
 *
 */

	@supports (scrollbar-color: blue red) {
		* {
			scrollbar-color: red blue;
		}
	}



	.title_logo {
		text-align: center;
	}

	.main_page_title {
		padding-bottom: 4px;
		font-size: var(--fs-main_page_title);
		text-align: center;
		color: var(--color-main_page_title);
	}

	.cowboy_up_chant {
		margin-left: auto;
		margin-right: auto;
		padding-left: 8px;
		padding-right: 8px;
		max-width: 80ch;
		font-size: var(--fs-cowboy_up_chant);
		text-align: center;
		line-height: 1.5rem;
		letter-spacing: 0.02rem;
		color: var(--color-cowboy_up_chant);
	}

	.cowboy_up_purpose {
		margin-left: auto;
		margin-right: auto;
		padding-left: 8px;
		padding-right: 8px;
		max-width: 80ch;
		font-size: var(--fs-cowboy_up_purpose);
		line-height: 1.5rem;
		letter-spacing: 0.02rem;
		font-weight: 600;
		color: var(--color-cowboy_up_purpose);
	}

	.cowboy_up {
		grid-area: cowboy_up;
		background: var(--background-cowboy_up);
		margin-top: -30px;
		padding: var(--padding-cowboy_up);
		color: var(--color-cowboy_up);
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: var(--border-radius-cowboy_up);
		border-bottom-right-radius: var(--border-radius-cowboy_up);
	}

	.page_section_topic {
		grid-area: page_section_topic;
	}

	.declarations {
		grid-area: declarations;
	}

	.constitutions {
		grid-area: constitutions;
	}

	.annexations {
		grid-area: annexations;
	}

	.historical_laws {
		grid-area: historical_laws;
	}

	.historical_economies {
		grid-area: historical_economies;
	}

	.sidebar_nav {
		grid-area: sidebar_nav;
		background-color: hsla(0, 0%, 0%, 0);
	}

	.nav_blocks {
		background-color: var(--background-color-nav_blocks);
		width: var(--width-nav_blocks);
		padding-left: var(--padding-left-nav_blocks);
		border-radius: var(--border-radius-nav_blocks);
	}

	.nav_principal_list {
		background: var(--background-nav_principal_list);
		padding: var(--padding-nav_principal_list);
		list-style-type: none;
		font-size: var(--fs-nav_principal_list);
	}

	.nav_list_item {
		margin-bottom: 13px;
	}

	.nav_links {
		line-height: var(--line-height-nav_links);
		font-weight: var(--fw-bold-nav_links);
		text-decoration: none;
		color: var(--color-nav_links);
	}

	.nav_links:hover {
		color: var(--color-nav_links-hover);
	}

	.content {
		background: hsla(0, 98%, 8%, 1);
		padding-left: 8px;
		padding-right: 8px;
		font-size: var(--fs-content);
		line-height: 1.5rem;
		letter-spacing: 0.02rem;
		font-weight: 900;
	}

	.blockquote-normal {
		padding-left: 18px;
		padding-right: 18px;
		font-size: var(--fs-blockquote-normal);
		color: var(--color-blockquote-normal);
		line-height: 1.2rem;
		letter-spacing: 0.02rem;
		font-weight: 400;
	}

	.subsection_title {
		padding-left: 8px;
		font-size: var(--fs-subsection_title);
		color: hsla(133, 58%, 53%, 1);
	}

	.document_class {
		background: hsla(0, 0%, 0%, 1);
		padding-top: 8px;
		padding-bottom: 8px;
		font-size: var(--fs-document_class);
		text-transform: uppercase;
		text-align: center;
		color: var(--color-document_class);
		border-radius: var(--border-radius-document_class);
	}

	.sections {
		background: var(--background-sections);
		padding: var(--padding-sections);
		width: var(--width-sections);
		color: var(--color-sections);
		border-radius: var(--border-radius-sections);
	}

	.nav_sections	{
		background: var(--background-nav_sections);
		padding: var(--padding-nav_sections);
		width: var(--width-nav_sections);
		color: var(--color-nav_sections);
		border-radius: var(--border-radius-nav_sections);
	}

	.preamble {
		background:	var(--background-preamble);
		padding-top: var(--padding-top-preamble);
		padding-left: var(--padding-left-preamble);
		padding-right: var(--padding-right-preamble);
		font-size: var(--fs-preamble);
		text-align: var(--text-align-preamble);
		line-height: var(--line-height-preamble);
		letter-spacing: var(--letter-spacing-preamble);
		color: var(--color-preamble);
		text-transform: uppercase;
		/*max-width: 80ch;*/
	}

	.postamble {
		background:	var(--background-postamble);
		padding-left: var(--padding-left-postamble);
		padding-right: var(--padding-right-postamble);
		font-size: var(--fs-postamble);
		text-align: left;
		line-height: 1.5rem;
		letter-spacing: 0.02rem;
		color: var(--color-postamble);
		/*max-width: 80ch;*/
	}

	.centered_heading {
		background:	var(--background-centered_heading);
		font-size: var(--fs-centered_heading);
		text-align: center;
		color: hsla(100, 100%, 100%, 1);
		text-transform: uppercase;
	}

	.link_descriptions {
		background: hsla(0, 98%, 8%, 1);
		padding-left: 8px;
		padding-right: 8px;
		font-size: var(--fs-link_descriptions);
		line-height: 1.5rem;
		letter-spacing: 0.02rem;
		font-weight: 900;
	}

	.sectioning {
		font-weight: var(--fw-bold-sectioning);
		text-transform: uppercase;
		color: hsla(100, 100%, 100%, 1);
	}

	.document_links {
		padding-left: 8px;
		font-weight: var(--fw-bold-document_links);
		color: hsla(100, 100%, 100%, 1);
		text-transform: uppercase;
	}

	.normal_links {
		font-size: var(--fs-normal_links);
		text-decoration: none;
		line-height: var(--line-height-normal_links);
		font-weight: var(--fw-bold-normal_links);
		color: var(--color-normal_links);
	}

	.normal_links:hover {
		background: var(--background-normal_links-hover);
		color: var(--color-normal_links-hover);
	}

	.subsection_normal_links {
		text-decoration: none;
		font-size: var(--fs-subsection_normal_links);
		line-height: var(--line-height-subsection_normal_links);
		font-weight: var(--fw-bold-subsection_normal_links);
		color: var(--color-subsection_normal_links);
	}

	.subsection_normal_links:hover {
		color: hsla(59, 100%, 73%, 1);
	}


	.transparent_gap {
		margin: 0;
		padding: 15px;
		color: hsla(0, 0%, 0%, 0); /*color is only needed to make content transparent.*/
	}



