h2 {
  font-size: x-large;
  margin-bottom: 5px;
}

.flex-container {
  display: flex;
  border: 1px dotted lightgray;
  background-color: white;
  height: 100px;
  margin: auto;
}

.space-box {
  width: 20%;
  height: 75%;
}

.flexbox {
  width: 25%;
  height: 100%;
}

.display-container {
  width: 300px;
  margin: auto;
}

#box-holder {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 75vh;
}

/* Visuals */
.red {
  background-color: var(--default-accent-orange);
}

.green {
  background-color: var(--default-accent-green);
}

.blue {
  background-color: var(--default-accent-blue);
}

.yellow {
  background-color: var(--default-accent-yellow);
}

.justify-center {
  justify-content: center;
}

.justify-space-evenly {
  justify-content: space-evenly;
}

.justify-space-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.align-flex-start {
  align-items: flex-start;
}

.align-flex-end {
  align-items: flex-end;
}

.flex-wrap {
  flex-wrap: wrap;
  height: 75px;
}

/* default: flex: 0, 1, auto; */
.grow {
  flex-basis: 50%;
  flex-grow: 2;
}

.shrink {
  flex-basis: 50%;
  flex-shrink: 1;
}

.basis {
  flex-basis: 75%;
}