body {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: start;     /* vertical */
  height: 100vh;           
  margin: 20px;       
}

/* .canevas { */
#histoDiv {
  display: block; /* pour que margin auto fonctionne */
  width: 80vw;
  height: 60vh;
  margin: 0px 0px 25px 0px;
  max-height: 60vh;
  overflow: auto; /* défilement si besoin */
}


.vContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#settingsCont {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin: 0px 0px 25px 0px;
}

.sliderSetting {
  display: flex;
  flex-direction: row;
  /* margin: 5px 5px 5px 5px; */
}

.slidersDiv {
  margin: 5px 5px 5px 5px;
}

.slider {
  margin: 3px 18px 9px 0px
}

#bu†tonsDiv {
  display: flex;
  justify-content: space-between;
  width: 200px;
}

.sliderValue {
  margin: 0px 5px 10px 0px;
}

#counterDiv {
  display: flex;
  justify-content: center;
  margin: 0px 0px 21px 0px;
  font-size: 1.3em;
  color: rgb(27, 25, 153);
}

@media (max-width: 700px) { 
    /* @media screen and (min-width: 30em) { */
    /* @media screen and (-webkit-min-device-pixel-ratio: 1),
            and (min-device-width: 1000px), 
            and (max-device-width: 1600px) { */

  #settingsCont {
    flex-direction: column;
    /* align-items: end; */
  }
}