:root {
  --item-min-width: 40px;
  --item-min-height: 40px;
  --item-color: #b9d2ff;
  --start-button-color: #14c514;
  --start-button-touched-color: #11af11;
}

.wrapper {
  font-family: Arial, Helvetica, sans-serif;
}

.storage__heading {
  margin: 20px;
}

.storage__inner {
  display: flex;
  margin: 20px;
  min-height: calc(var(--item-min-height) + 12px);
}

.conveyor__heading {
  margin: 20px;
}

.conveyor__inner {
  display: flex;
  margin: 20px;
}

.output__heading {
  margin: 20px;
}

.output__inner {
  display: flex;
  margin: 20px;
  min-height: calc(var(--item-min-height) + 12px);
}

.item {
  min-width: var(--item-min-width);
  min-height: var(--item-min-height);
  line-height: var(--item-min-height);
  padding: 0 5px;
  text-align: center;
  margin: 5px;
  border: 1px solid;
  background-color: var(--item-color);
  box-sizing: border-box;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--item-min-width) + 20px);
  min-height: calc(var(--item-min-height) + 20px);
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
}

.stage:last-child {
  border-right: 1px solid #000000;
}

.start-button-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.start-button {
  font-size: 16px;
  padding: 10px 30px;
  cursor: pointer;
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: var(--start-button-color);
}

.start-button:hover {
  background-color: var(--start-button-touched-color);
}

.start-button:disabled {
  background-color: var(--start-button-touched-color);
  cursor: not-allowed;
}