index.css

img {
  width: min(2.5em, calc((100vw - 5.25em) / 8));
}

button, select, input[type="number"] {
  font-size: 0.8333rem;
}

menu {
  position: relative;
}

/* The screen widths here are rounded up to an integer number of ems. */
@media screen and (min-width: 25em) {
  menu {
    columns: 2;
  }
}

@media screen and (min-width: 37em) {
  menu {
    columns: 3;
  }
}

@media screen and (min-width: 48em) {
  menu {
    columns: 4;
  }
}

:root {
  --meter-length: 0;
}

.meter {
  height: 0.75em;
  border-radius: 0.5em;
  border: 1px solid rgb(127 127 145 / 51.6%);
  width: min(18em, calc(100vw - 8.9375em));
  position: relative;
  background-color: rgb(127 127 127 / 16.4%);
  overflow: hidden;
}

.meter::before {
  position: absolute;
  content: '';
  height: 100%;
  width: var(--meter-length);
  background-color: #00a960;
}

.animated .meter::before {
  transition: width 0.5s ease-in-out;
}

.meter::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent calc(16.6666667% - 0.03125em),
    rgb(127 127 145 / 51.6%) calc(16.6666667% - 0.03125em) calc(16.6666667% + 0.03125em),
    transparent calc(16.6666667% + 0.03125em) calc(33.3333333% - 0.03125em),
    rgb(127 127 145 / 51.6%) calc(33.3333333% - 0.03125em) calc(33.3333333% + 0.03125em),
    transparent calc(33.3333333% + 0.03125em) calc(50% - 0.03125em),
    rgb(127 127 145 / 51.6%) calc(50% - 0.03125em) calc(50% + 0.03125em),
    transparent calc(50% + 0.03125em) calc(66.6666667% - 0.03125em),
    rgb(127 127 145 / 51.6%) calc(66.6666667% - 0.03125em) calc(66.6666667% + 0.03125em),
    transparent calc(66.6666667% + 0.03125em) calc(83.3333333% - 0.03125em),
    rgb(127 127 145 / 51.6%) calc(83.3333333% - 0.03125em) calc(83.3333333% + 0.03125em),
    transparent calc(83.3333333% + 0.03125em)
  );
}

select[id$="-select"] {
  margin-bottom: 1.5em;
}

button[id^="limit-"] {
  margin-top: 0.25em;
}

menu:empty {
  margin: 0.25em 0;
}

.info::before {
  content: "\002139\00fe0e";
  text-decoration: dotted underline;
}

#rivals {
  margin-top: 0.5em;
  min-height: 2.5em;
}

@media (min-width: 39em) {
  #stats-display {
    display: grid;
    width: fit-content;
    grid-template-columns: auto auto;
  }

  #rivals {
    margin-left: 1em;
  }
}

#checkbox-all {
  position: absolute;
  left: 1.75em;
}

label[for="checkbox-all"] {
  padding-left: 0.25em;
}

#output td {
  padding: 0 0.5em;
}

#kart-preview img,
#rivals img {
  margin-bottom: -0.75em;
  margin-left: 0.25em;
}