* {
  padding: 0;
  margin: 0;
  font-family: Consolas;
}

.dark-mode {
  background-color: black;
  filter: invert(1);
}

main {
  min-height: calc(100vh - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: calc(96px / var(--size));
  --size: 1;

  @media (width <= 1280px) { --size: 1.5; }
  @media (width <= 800px) { --size: 2; }
  @media (width <= 560px) { --size: 3; }
  @media (width <= 400px) { min-height: calc(100vh - 48px); --size: 4; }
  @media (width <= 320px) { --size: 5; }
}

.speed { position: relative; }

.speed span {
  position: absolute;
  right: 0;
  pointer-events: none;
}

input[type=range] {
  width: calc(740px / var(--size));
  appearance: unset;
  padding: 0 calc(52px / 2 - 26px);
  outline: none;

  &::-webkit-slider-thumb {
    height: calc(52px / var(--size));
    width: calc(52px / var(--size));
    appearance: unset;
    background-color: black;
  }
}

footer {
  height: 32px;
  font-size: 24px;
  padding: 0 8px;

  @media (width <= 640px) { font-size: 16px; }
  @media (width <= 400px) { height: 48px; }
}

button {
  border: none;
  background-color: transparent;
  font-size: 24px;
  cursor: pointer;
}