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

  /* .page_top */
  --background-page_top: hsla(0deg 98% 8% / 100%);
  --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(37deg 100% 50% / 100%);

  /* .cowboy_up */
  --background-cowboy_up: hsla(0deg 98% 8% / 100%);
  --padding-cowboy_up: 5px;
  --color-cowboy_up: hsla(43deg 100% 62% / 100%);
  --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(37deg 100% 50% / 100%);

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

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

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

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

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

  /* .preamble */
  --background-preamble: hsla(0deg 98% 8% / 100%);
  --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(37deg 100% 50% / 100%);

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

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

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

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

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

  /* .nav_blocks */
  --background-color-nav_blocks: hsla(0deg 0% 0% / 100%);
  --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(37deg 100% 50% / 100%);
  --color-nav_links-hover: hsla(59deg 100% 73% / 100%);

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

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

  /* .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(37deg 100% 50% / 100%);

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

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

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

.skip_to_links {
  position: absolute;
  top: 0;
  padding: 0.5rem 1.5rem;
  line-height: 1.8rem;
  font-size: 1rem;
  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(36deg 100% 90% / 100%);
  text-decoration: none;
  border-radius: 0 0 0.25rem 0.25rem;
  transition: transform 325ms ease-in;
}

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

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

.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(17deg 100% 58% / 100%);
}

/* START MEDIA QUERY */

@media only screen and (max-width: 600px) {
  .skip_to_links {
    padding: 0.2rem 0.6rem;
    width: max-content;
    line-height: 1rem;
    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(0deg 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);
  padding: 3px;
}

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

.content {
  background: hsla(0deg 98% 8% / 100%);
  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(133deg 58% 53% / 100%);
}

.document_class {
  background: hsla(0deg 0% 0% / 100%);
  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(100deg 100% 100% / 100%);
  text-transform: uppercase;
}

.link_descriptions {
  background: hsla(0deg 98% 8% / 100%);
  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(100deg 100% 100% / 100%);
}

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

.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);
  padding: 3px;
}

.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);
  padding: 3px;
}

.subsection_normal_links:hover {
  color: hsla(59deg 100% 73% / 100%);
}

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

*:focus {
    outline: 3px solid pink;
    padding: 3px;
}
 
.contact__form {
  padding-left: 8px;
  padding-right: 8px; }
    
.copyright {
  background: black;
  padding-left: 8px;
  padding-right: 8px;
  font-size: var(--fs-link_descriptions);
  line-height: 1.5rem;
  letter-spacing: 0.02rem;
  font-weight: 900;
}