: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;
  --light-grey: #aeaebf;
  
  --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;
}
.button {
  background-color: var(--background-marron);
  border-radius: 12px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  color: var(--letter-color);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.visual-block {
  border: 1px solid black;
  margin: 20px;
  padding: 10px;
  background-color: var(--background-marron);
}