.header {
  margin: 1%;
  background-color: gray;
  text-align: center;
  font-size: 11px;
  font: Arial;
  color: White;
  padding: 1px;
}

.center {
  text-align: center;
  width: 50%;
  height: 50%;
  margin: auto;
  background-color: lightgray;
  padding: 20px;
}

.lissajous {
  margin: 1%;
  background-color: lightgray;
}

#canvas {
  width: 63%; 
  height: 95%;
  margin-top: 1%;
  margin-left: 1%;
  float: right;
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

.options {
  width: 33%; 
  height: 95%;
  margin-right: 1%;
  margin-top: 1%;
  float: left;
  background-color: darkgray;
  border-width: 2px;
  border-style: solid;
  border-color: black;

  overflow-y: scroll;
  overflow-x: hidden;
  text-align: center;
  align-content: center;
}

.option {
  margin: 10px;
  width: 100%;
  background-color: gray;
  text-align: center;
}

.slider {
  width: 80%;
  height: 25px;
}

.button_on {
  margin: 10px;
  width: 80%;
  height: 25px;
  background-color: lightgreen;
}

.button_off {
  margin: 10px;
  width: 80%;
  height: 25px;
  background-color: lightcoral;
}

.button {
  margin: 10px;
  width: 80%;
  height: 25px;
  background-color: antiquewhite;
}

img {
  display: block;
  margin: 0 auto;
  width: 80%;
}