body {
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: stretch;
}

.canvasDiv {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p5Canvas {
  margin-top: 2vh;
  margin-bottom: 2vh;
  align-self: center;
}

.settingDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.slider {
  margin: 20px;
}

.innerSettingContainer {
  margin: 20px;
}

@media only screen and (max-width: 600px) {

  body {
    overflow-x: hidden;
  }

  .container {
    width: 100vw !important;
    margin: 0px !important;
  }

  h1 {
    font-size: 32px;
  }

  .settingDiv {
    flex-direction: column;
  }
}