/*
* Background Colors
*
* Background utility classes to add color to elements
*/

.background-sky {
  background-color: $ocean;
  background: linear-gradient($ocean, $regal);
  color: $snow;
}

.background-regal {
  background: $regal;
  color: $snow;
}

.background-coal {
  background: $coal;
  color: $snow;
}

.background-steel {
  background: $steel;
  color: $snow;
}

.background-silver {
  background: $silver;
  color: $snow;
}

.background-blue-grey-900 {
  background: #263238;
  color: $snow;
}

/*
* Background Images
*
*/

.background-lon-paper {
  background: url('/resources/images/backgrounds/lon-paper.png') bottom center no-repeat;
  background-size: 100%;
  background-position: fixed;
}
.background-superhero-paper {
  background: url('/resources/images/backgrounds/superhero-paper.png') bottom center no-repeat;
  background-size: 100%;
  background-position: fixed;
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background-image: url('/resources/images/backgrounds/superhero-paper-large.png');
  }
}




/*
* Text Colors
*
* Text color utility color classes
*/

.text-snow {
  color: $snow;
}