body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

.header-image {
  height: 140px;
  /* Maintain the height to avoid overlapping */
  width: 100%;
  background: url('pictures/ROADMAPTITRE2.png') no-repeat center center;
  background-size: contain;
  /* Ensures the image is fully visible */

  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.background-image {
  /* No need for specific height here; image dictates size */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}



/* DICKDDJWDJWDJDWJDWJDWJWD */



/* Scrollbar sizing */
::-webkit-scrollbar {
  width: 18px;
  height: 16px;
}

/* Thumb (draggable part) */
::-webkit-scrollbar-thumb {
  background:
    url('scrollbar/scroll-thumb.svg') no-repeat center center / 80%,
    linear-gradient(#bcd1f8, #bcd1f8);
  border-radius: 4px;
  /* Adjust the rounded corners of the rectangle */
  border: 2px solid transparent;
  background-clip: content-box, padding-box;
  /* Move the thumb slightly to the left */
  margin-left: -2px;
}

::-webkit-scrollbar-thumb:horizontal {
  background:
    url('scrollbar/scroll-thumb-horizontal.svg') no-repeat center center / 80%,
    linear-gradient(#bcd1f8, #bcd1f8);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box, padding-box;
  /* Move the horizontal thumb slightly to the left if needed */
  margin-left: -2px;
}

/* Track (part the thumb slides within) */
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
  /* Rounded corners for the track */
}

/* Up button */
::-webkit-scrollbar-button:start {
  background-image: url('scrollbar/scroll-arrow-up.svg');
  background-color: #d4d4d4;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  /* Rounded corners for the button */
}

/* Down button */
::-webkit-scrollbar-button:end {
  background-image: url('scrollbar/scroll-arrow-down.svg');
  background-color: #d4d4d4;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 4px;
  /* Rounded corners for the button */
}

/* Hide extra up button */
::-webkit-scrollbar-button:start:decrement {
  display: none;
}

/* Hide extra down button */
::-webkit-scrollbar-button:end:increment {
  display: none;
}

/* Horizontal scrollbar buttons */

/* Hide extra left button */
::-webkit-scrollbar-button:horizontal:start:decrement {
  display: none;
}

/* Hide extra right button */
::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
}

/* Reverse button actions */
/* When clicking the up button, it should go down */
::-webkit-scrollbar-button:start:decrement {
  background-image: url('scrollbar/scroll-arrow-down.svg');
}

/* When clicking the down button, it should go up */
::-webkit-scrollbar-button:end:increment {
  background-image: url('scrollbar/scroll-arrow-up.svg');
}