.wheels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  padding: 1em;
  float: left;
  clear: both;
}

.wheels > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.wheels > div > div {
    display: flex;
    flex-wrap: wrap;
    float: left;
    clear: both;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;

    border: 0.1em solid;
    border-radius: 50%;
}

.wheels .harmonics > div {
    flex-direction: row;

    width: 5em;
    height: 5em;
}

.wheels .ratios > div {
    flex-direction: column;

    width: 11.5em;
    height: 11.5em;
    padding: 0.5em;
}

.wheels .biggest> div {
    flex-direction: column;

    width: 13em;
    height: 13em;
    padding: 0.5em;
}

.wheels > div > div > span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.fraction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin: 0.2em;
}

.fraction > span:first-child {
    border-bottom: 0.06em solid;
    padding: 0 0.15em 0.1em;
}

.fraction > span:last-child {
    padding-top: 0.1em;
}

.scale {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 2em;
  padding: 0.3em;
  float: left;
  clear: both;
}

/* Stop subscripts messing up alignment */
.scale > span {
    line-height: 1.5em;
}

/* Offset the steps to be between the pitches */
.scale > span:nth-child(odd) {
  transform: translateX(-1em);
}