:root {
  --primary-color: #474e5e;
  --secondary-color: #dfdded;
  --tertiary-color: #313641;
  --quaternary-color: #1e1f26;
  --quinary-color: #555B6E;
  --highlight-color: #f92b59;
}

body {
  font-size: clamp(1rem, 0.25rem + 1.5625vw, 1.25rem);
  font-family: 'JetBrains Mono', monospace;
  background-color: #353A47; 
  color: var(--secondary-color); 
  margin: 0;
}

h1 {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: .5rem 1rem;
  width: fit-content;
  font-size: clamp(1rem, 0.25rem + 1.5625vw, 1.25rem);
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--secondary-color);
  margin: 0;
  gap: .5rem;
}

h1::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='2' d='m8 8l4 4m0 0l4 4m-4-4l4-4m-4 4l-4 4'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  cursor: pointer;
}

h1::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 9V7h14v2zm0 4v-2h14v2zm0 4v-2h14v2zM4 9q-.425 0-.712-.288T3 8t.288-.712T4 7t.713.288T5 8t-.288.713T4 9m0 4q-.425 0-.712-.288T3 12t.288-.712T4 11t.713.288T5 12t-.288.713T4 13m0 4q-.425 0-.712-.288T3 16t.288-.712T4 15t.713.288T5 16t-.288.713T4 17'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.title {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--quaternary-color);
  z-index: 100;
}

#combinaisons {
  background-color: var(--tertiary-color);
}

.el {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.el:hover {
  opacity: 1;
}

.phrase {
  opacity: 1;
  margin: 0;
  padding: 0.5rem;
  transition: background-color 0.3s ease;
  width: 100%;
}

.phrase:hover {
  background-color: #474e5e;
}

.mot-fixe {
  color: var(--highlight-color);
}