html, body {
  margin: 0;
  padding: 0;
    background-color: #ffffff;
}
canvas  {
  display: block;
}

affichette {
    touch-action: pinch-zoom;

}

main {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

@font-face {
  font-family: typewriter;
  src: url("JMH Typewriter dry.otf");
}

@font-face {
  font-family: heyoctober;
  src: url("HeyOctober.ttf");
}

nav { margin: 0 0 15px;}

.navbar-brand { 
  font-family: "heyoctober" !important; 
  font-size: xx-large;
}

.navbar-dark .navbar-nav .nav-link {
  font-family: 'typewriter' !important;
}
.dropdown-item {
  font-family: 'typewriter' !important;
}

.parametres {
  background-color: #fefefe;
  width: 800px;

  padding: 20px 20px 20px 20px; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
    font-family: "typewriter"; 
    font-size: 14px;

}

* {box-sizing: border-box;}

/* Full-width input fields */
input[type=password], input[type], select {
 width: 30%; 
  padding: 5px;
  margin: 5px 0 5px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
  font-family: "typewriter"; 
  font-size: 16px;
}

input[type=checkbox] {
   width: 50px; 

}

/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus, input[type]:focus, select:focus {
  background-color: #ddd;
  outline: none;
}

input[type=number] {
  width: 40px;
}

input[type=range].custom-slider {
  -webkit-appearance: none;     /*nécessaire pour Chrome */
  padding: 5px;
      position: relative;
    top: 15px;
  font: inherit;                /* même rendu suivant font document */
  outline: none;
  color: #069;                  /* sert pour couleur de référence, via currentColor, pour le curseur */
  background: #f1f1f1;             /* sert pour couleur de fond de la zone de déplacement */
  /*box-sizing: border-box;    */   /* même modèle de boîte pour tous */
  transition: opacity .2s;
  cursor: pointer;
}

.boutons {
  width: 800px;
    height: 100px;
  display: inline-block;align: center;
}

.button {
  width: 350px;
  height: 100px;
  margin-left: 25px;
  background-color: #172983; 
  border: none;
  color: white;
  text-align: center;
  font-size: 20px;
  font-family: "typewriter"; 


}


    input[type=text] {
      width: 220px;
      height: 16px;
      padding: 0 0px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      box-sizing: border-box;
    }

    .example {
            display: inline;
      flex-wrap: wrap;
      flex-shrink: 0;
      width: 300px;
      margin-bottom: 30px;
    }

    .full .clr-field button {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }