body{
  font:15px/1.1em arial, sans-serif;
  background:lightgray;
  height: 100%;
  margin: 0;
}

* {
  padding: 0;
  box-sizing: border-box;
  font-family: helvetica;
  font-weight: lighter;
}

#container {
    width: 100%;
    height: auto;
    /* background-color: blue; */
}


#canvas {
  padding: 1vw;
  width: 100%;
}

ul {
  margin: 0 0 0 0%;
  list-style: none;
  width: 22%;
}

li#font-size label {

  border-radius: 20px;
  border: 1px solid black;
  padding: 5px;
  margin:0px 10px 10px 10px;
  padding:8px 10px 6px 14px;
  width: 100%;
  text-align: center;
}

button {
  /* border: none;*/
  background: none;

  border-radius: 20px;
  border: 1px solid black;
  padding: 5px;
  margin:0px 10px 10px 10px;
  padding:8px 10px 6px 14px;
  font-size: 15px;
  width: 100%;
  cursor: pointer;
}

/* #reglage > ul > li#volume {
width:28%;
} */
/*
#reglage > ul > li:nth-child(1) {width: 25%;}

#reglage > ul > li:nth-child(2) {width: 28%;}


#reglage > ul > li:nth-child(4) {width: 15%;}

#reglage > ul > li:nth-child(5) {width: 28%;}
 */

footer {
   position:absolute;
   bottom:0;
   width:100%;
   /* background:#6cf; */
   margin: 0;

}

#reglage {
  /* background-color: red; */
}


label input[type="range"] {
    vertical-align: middle;
}

.selected{
  background-color: black;
  color:lightgray;
}