:root {
  --maximum-page-width: 2000px;

  /******* imported font and its available weights *******/
  --font-family: 'Heebo', Helvetica, Arial, sans-serif;
  --light: 300;
  --medium: 500;
  --font-size-default: 18px;
  --font-size-small: 14px;

  /******* color scheme *******/
  --accent-color: #18294F; /* used for buttons and maybe accent banners */
  --accent-color-dark: #070C18; /* user for footer and nav */
  --accent-text-color: #FFFFFF; /* the text color that looks good on top of the color above ^ */

  --content-background-color: #FFFFFF; /* background of the site-container */
  --content-text-color: #000000; /* the text color that looks good on top of the color above ^ */

  --page-background-color: #EEEEEE; /* background of the entire page */
  --page-text-color: #000000; /* the text color that looks good on top of the color above ^ */

  --sale-color: #9A0000; /* the red color to use for sale announcements */
  --sale-text-color: #FFFFFF; /* the text color that looks good on top of the color above ^ */

  --disabled-color: #CCCCCC; /* the color to make things that are disabled, e.g. disabled buttons */
  --border-color: #CCCCCC; /* default border color for the site content */
  /****************************/


  /******* reusable styles *******/
  --default-border: 1px solid var(--border-color);
  --button-color-active: var(--accent-color);
  --button-color-inactive: var(--disabled-color);
  --table-heading-background-color: var(--accent-color);
  --table-heading-text-color: var(--accent-text-color);
  --link-color: var(--accent-color);
  /*******************************/

  --breadcrumb-separator: ">"
}

* {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-weight: var(--light);
  font-size: var(--font-size-default);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw; /* ensures that the page always fills the browser window */
  background-color: var(--accent-color-dark);
}

h1 {
  font-weight: var(--medium);
}

form {
  margin: 0;
}

a, a:active, a:visited {
  text-decoration: none;
  color: var(--link-color);
  font-size: inherit;
}

a:hover {
  text-decoration: underline;
}

table, tr, th, thead, td {
  font: inherit;
}

#site-container {
  background-color: var(--page-background-color);
  color: var(--page-text-color);
  width: 100vw; /* ensures that the page always fills the browser window */
}

/***************************************
 hides class 'desktop-only' on mobile
 used for:
    - site-navigation list items
    - breadcrumbs list
 ***************************************/
@media only screen and (max-width: 1023px) {
  .desktop-only {
    display: none!important;
  }
}

/***************************************
 hides class 'mobile-only' on desktop
 used for:
    - site-navigation list items
 ***************************************/
@media only screen and (min-width: 1024px) {
  .mobile-only {
    display: none!important;
  }
}