html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.root {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.flex-container {
  display: flex;
}

.flex-1 {
  display: flex;
  flex: 1;
}

.flex-2 {
  display: flex;
  flex: 2;
}

.flex-3 {
  display: flex;
  flex: 3;
}

.flex-4 {
  display: flex;
  flex: 4;
}

.padded {
  padding: 1em;
}

.input-text {
  display: flex;
  flex: 1;
  resize: none;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.center {
  justify-content: center;
}

.spaced {
  justify-content: space-around;
  row-gap: 1em;
}


.setting p {
  margin: 0;
  margin-bottom: 0.25em;
  font-size: 1.25em;
  text-align: center;
}

.text-display b {
  text-align: center;
  font-size: 7em;
}

.control {
  font-size: 2em;
  background: none;
  border: none;
  cursor: pointer;
}