:root {
  --background-marron: #5e3f34;
  --base-marron: #502e26;
  --light-marron: #bd6e3f;
  --arrow-green: #63482a;
  --light-arrow: #5b4110;
  --red-marron: #632811;
  --letter-color: #df945d;

  --medium-brown: #7e5830;

  --outlined-small-width: 1px;
  --outlined-large-width: 2px;
}
.the-header {
  height: 188px;
  background-color: var(--light-marron);
  background-image: url("header.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 53%;
}

/** Glowing, or normal, filters. This should
 *  apply to glowing element, light glowing 
 * and "dark" glowing 
 **/

.light-led{
  filter: invert(55%) sepia(74%) saturate(898%) hue-rotate(351deg)
    brightness(100%) contrast(105%);
}
.dark-led {
  filter: invert(0%) sepia(9%) saturate(7%) hue-rotate(241deg) brightness(109%)
    contrast(101%);
}

.light-led:hover {
  filter: invert(55%) sepia(74%) saturate(898%) hue-rotate(340deg)
    brightness(100%) contrast(105%);
}
.dark-led:hover {
    filter: invert(0%) sepia(9%) saturate(7%) hue-rotate(271deg) brightness(109%)
    contrast(101%);
  }
  

/** The FAQ indeed */
.text-background {
    background-color: #E6C18F;
}
.player-header-background {
    background-color: #5B4110;
}

.quote-case {
    background-color: #7e5830;
    color: #df945d;
}

.quote-case a{
    color: #df945d;
}