:root {
  --colorMatching: #5FC2D9;
  --jaune: #F2AE30;
  --bleu: #23518C;
  --rouge: #D93B3B;
  --turn: 0deg;
}

[data-theme="dark"] {
  --backgroundColor: black;
  --colorset1: white;
  --colorset2: black;
  --colorset3: var(--colorMatching);
  --colorset4: white;
  --colorset5: black;
  --colorset6: white;
  --colorset7: white;
}

[data-theme="light"] {
  --backgroundColor: var(--bleu);
  --colorset1: black;
  --colorset2: white;
  --colorset3: var(--colorMatching);
  --colorset4: var(--rouge);
  --colorset5: var(--jaune);
  --colorset6: var(--jaune);
  --colorset7: lightgrey;
}

[v-cloak] {
  display: none;
}

#searchContainer {
  z-index: 998;
}

#searchContainer.scrolled-search {
  background-color: var(--backgroundColor);
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 4px solid var(--colorset6);
}

i {
  vertical-align: 0.125em;
}

body {
  background-color: var(--backgroundColor);
}

.btn:hover, i:hover, .spinner-grow {
  color: var(--colorset1);
}

h1 {
  font-weight: bolder;
  color: var(--colorset6);
  text-align: center;
  border-bottom: 10px double var(--colorset6);
  cursor: url('img/richard.png'), auto;
  user-select: none;
}

h2 {
  color: white;
  font-weight: bolder;
}

.list-group-item {
  padding: 0 5px;
  background-color: var(--colorset2);
  color: var(--colorset1);
  border-bottom-color: var(--colorset7);
}

.card {
  border-width: 4px;
  background-color: var(--colorset2);
  color: var(--colorset2);
  border-color: white;
}

.matching-song {
  background-color: var(--colorset3);
  color: black;
  border: none;
}

.card-title {
  color: var(--colorset4);
  font-variant: small-caps;
  font-weight: bolder;
}

.autobr {
  display: inline-block;
}

.form-check-input:checked {
  background-color: var(--colorset5);
}

#backtotop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: white;
}

#social {
  position: fixed;
  bottom: 10px;
  left: 10px;
  color: rgb(255, 255, 255);
}

#social a {
  color: white;
}

#theme-switcher {
  background-color: transparent;
  position: absolute;
  top: 10px;
  color: white;
}

/* SCROLLBAR */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--colorset6) var(--backgroundColor);
}

*::-webkit-scrollbar {
  width: 18px;
  background: var(--colorset5);
}

*::-webkit-scrollbar-track {
  background: var(--backgroundColor);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--colorset6);
  border: 3px solid var(--backgroundColor);
}

/* RICHARD */
.richardized {
  background-image: url('img/richard.png');
  background-repeat: repeat;
}

#richard {
  position: fixed;
  top: 3%;
  right: 3%;
  transform: rotate(var(--turn));
  z-index: 999;
}