index.css

:root {
  --themeClr: hsl(359, 60%, 65%);
  --invert: 1;
  --from: 0%;
  --code-font: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  background: #fff;
}
#main {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#display {
  font-family: var(--code-font);
  user-select: none;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 22vw, 9rem);
  font-weight: 700;
  font-style: oblique;
  color: var(--themeClr);
  filter: invert(var(--invert));
  mix-blend-mode: difference;
}
#display_counter {
  user-select: none;
  color: var(--themeClr);
  filter: invert(var(--invert));
  mix-blend-mode: difference;
}

#main::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: rotate(0.02deg) translateY(var(--from));
  will-change: transform;
  background-color: var(--themeClr);
  transition: transform 1020ms linear 0s;
}
.time-input {
  display: flex;
  justify-content: space-evenly;
}
.set-longbreak {
  display: flex;
  justify-content: space-between;
}
.autoBreak,
.autoStart,
.themeMode {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.autoBreak {
  margin-bottom: 0.5rem;
}
.notify-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.volume-slider {
  margin-top: 1em;
  display: flex;
  align-items: center;
}