:root {
  --background-marron: #594520;
  --base-marron: #502e26;
  --light-marron: #bd6e3f;
  --arrow-green: #63482a;
  --light-arrow: #5b4110;
  --red-marron: #48391a;
  --letter-color: #ad8339;

  --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 {
  /* Yellowish */
  filter: invert(77%) sepia(90%) saturate(102%) hue-rotate(19deg)
    drop-shadow(0 0 10px #f5e5ba) drop-shadow(0 0 5px #f5e5ba);
}

.dark-led {
  filter: invert(0%) sepia(9%) saturate(7%) hue-rotate(241deg) brightness(109%)
    contrast(101%) 
}

.light-led:hover {
  /* Yellowish */
  filter: invert(77%) sepia(90%) saturate(102%) hue-rotate(19deg)
    drop-shadow(0 0 10px #f5e5ba) drop-shadow(0 0 5px #f5e5ba)
    drop-shadow(0 0 20px crimson);
}
.dark-led:hover {
  filter: invert(0%) sepia(9%) saturate(7%) hue-rotate(271deg) brightness(109%)
    contrast(101%) drop-shadow(0 0 14px #4a0a50); 
}


/** The FAQ indeed */
.text-background {
    background-color: #aba65a;
}

.player-header-background {
    background-color: #413117;
}

.quote-case {
    background-color: #6b5325;
    color: #010;
}
.quote-case a{
    color: #010;
}


/** horreur */
.shmug {
  display: inline-block;
  animation: driftOnce 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation-delay: 5s;
}

@keyframes driftOnce {
  0%   { transform: none; }
  20%  { transform: translateX(-3px); }
  40%  { transform: translateX(2px); }
  60%  { transform: translateX(-1px); }
  100% { transform: none; }
}