style.css

@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root {
    --dot-diameter: 120px;
  --circle-border-width: 4px;
}

.circle-container {
    width: var(--dot-diameter);
    height: var(--dot-diameter);
    transform: rotate(-225deg);
    fill: none;
    stroke: #37b3cf;
    stroke-dasharray: 75 100;
    stroke-linecap: round;
  }

  .circle-container__background {
    fill: none;
    stroke: var(--default-color);
    stroke-width: var(--circle-border-width);
    stroke-dasharray: 75 100;
    stroke-linecap: round;
  }

.circle-container__progress {
  fill: none;
  stroke-linecap: round;
  stroke: url(#gradient);
  stroke-dasharray: 75 100;
  stroke-linecap: round;
  stroke-width: var(--circle-border-width);
  transition: stroke-dashoffset 1s ease-in-out;
}

.stop1 {
  stop-color: white;
}
.stop2 {
  stop-color: white;
}
#pos {
    position: absolute;
    top: 5rem;
}



.pourcent {
    color: white;
}

.boite {
    margin: 50px;
}

/* #ombre:hover{
  background-color: #cbeef6;
  width: 200px;
} */

#icons {
  margin: 20px;
}

.active {
  background-color: #a2c7cf;;
  border-radius: 10px;
}