:root {
  /* ==== Info bubbles ==== */
  --info-bubbles-max-width: 375px;
  --info-bubbles-width-pourcent: 90vw;
  --bubble-offset-x: 6;
  --bubble-offset-y: -5;
  --bubble-margin: 30;
}

.info-bubbles {
  position: absolute;
  box-sizing: border-box;
  padding: 13px 17px;
  display: none;
  z-index: 1;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, rgb(32, 31, 31) 0%, rgb(32, 32, 32) 100%);
  color: rgb(235, 223, 223);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  width: var(--info-bubbles-width-pourcent);
  max-width: var(--info-bubbles-max-width);
  text-align: justify;
  overflow-wrap: break-word;
  hyphens: auto;
}

.info-bubble-display-and-hide {
  display: flex;
  visibility: hidden;
  position: fixed;
  left: 0;
  top: 0;
}