/* Reset en basis */
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #000000;
}

/* Hoofdcontainer: verticaal stacken */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centreren horizontaal */
  gap: 5px;
  padding: 5px;
}

/* Input- en controls-sectie: verticaal onder elkaar */
#input,
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
  background: rgb(0, 0, 0);
  padding: 5px 5px;
  width: 100%;
  align-items: center; /* centreren horizontaal */
  justify-content: center; /* centreren verticaal */
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Helvetica font */
}

/* Label + input mooi naast elkaar */
#input label,
#controls label {
  color:rgb(255, 255, 255);
  margin-right: 5px;
  font-weight: 500;
}

#input input,
#controls input,
#input select {
  margin-right: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Helvetica font */
}

/* Canvas wrapper */
#svg-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 10px;
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}