body {
  // fill screen
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;

  // center everything
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; }

@for $i from 1 through 5 {
  .gap#{$i} { gap: $i * 0.25rem; }
}

.centerChildren {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spaceBetween { justify-content: space-between; }
.spaceAround { justify-content: space-around; }
.spaceEvenly { justify-content: space-evenly; }

.spacer { flex:1; }

.hidden { visibility: hidden; }

.alignStart { align-self: flex-start; }
.alignCenter { align-self: center; }
.alignEnd { align-self: end; }