/**********************************************************
  BLOCK
  Outermost container/wrapper tag for all blocks should have 
  the class "block" added to them. Typically attached to a 
  section tag.
**********************************************************/
.block {
  position: relative;
}

.block a {
  text-decoration: none;
}

.block a:hover {
  text-decoration: underline;
}

/********************************************************** 
  BLOCK COLORS 
  These are standardized colors for all blocks. Some of the 
  background color options may be redundant (when compared 
  to colors.css in global styles) but this is to ensure that 
  all blocks have a consistent style no matter their place.
***********************************************************/
/* White Backgrounds */
.block.--bg-white {
  background-color: white;
  color: black;
}

.block.--bg-white h1,
.block.--bg-white h2,
.block.--bg-white h3,
.block.--bg-white p {
  color: black;
}

.block.--bg-white a {
  color: var(--aged-gold);
}

/* Black Backgrounds */
.block.--bg-black {
  background-color: black;
  color: white;
}

.block.--bg-black h1,
.block.--bg-black h2,
.block.--bg-black h3,
.block.--bg-black p {
  color: white;
}

.block.--bg-black a {
  color: var(--boiler-gold);
}

/* Gray (Steel Gray) Backgrounds */
.block.--bg-steel {
  background-color: var(--steel-gray);
  color: white;
}

.block.--bg-steel h1,
.block.--bg-steel h2,
.block.--bg-steel h3,
.block.--bg-steel p {
  color: white;
}

.block.--bg-steel a {
  color: var(--boiler-gold);
}

/* Light Gray Backgrounds */
.block.--bg-light-gray {
  background-color: var(--light-gray);
  color: black;
}

.block.--bg-light-gray h1,
.block.--bg-light-gray h2,
.block.--bg-light-gray h3,
.block.--bg-light-gray p {
  color: black;
}

.block.--bg-light-gray a {
  color: var(--aged-gold);
}