:root {
  --color-break: #060505;
  --color-primary: #ffae6b;
  --color-second: #c3f5ff;
  --color-accent: #aaa;
  --color-focus: #060505;
}

html {
  font-size: 32vmin;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 100%;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-top: env(safe-area-inset-top, 0px);
  text-align: center;
  background-color: var(--color-break);
}

.break,
.break p {
  color: var(--color-second);
}

.break .button {
  box-sizing: border-box;
  border: solid #ddd;
  border-radius: 0.3em;
  padding: 0.2em;
  margin-top: 0.8em;
  margin-left: 0.5em;
}

.break img {
  width: 1.2em;
}

.break .timer-circle-background {
  fill: rgb(6, 5, 5 / 0.7);
}

.break .timer-circle-outer {
  stroke: var(--color-second);
}

.break .timer-circle-black {
  stroke: var(--color-break);
  stroke-width: 3.6;
}

.break .timer-circle-gray {
  stroke: var(--color-second);
  stroke-width: 4;
}

.focus,
.focus p {
  color: var(--color-primary);
}

.focus .button {
  box-sizing: border-box;
  border: solid #ddd;
  border-radius: 0.3em;
  padding: 0.2em;
  margin-top: 0.8em;
  margin-left: 0.5em;
}

.focus img {
  width: 1.2em;
}

.focus .timer-circle-background {
  fill: rgb(255, 242, 204 / 0.7);
}

.focus .timer-circle-outer {
  stroke: var(--color-primary);
}

.focus .timer-circle-black {
  stroke: var(--color-focus);
  stroke-width: 3.6;
}

.focus .timer-circle-gray {
  stroke: var(--color-primary);
  stroke-width: 4;
}

#oxbutton {
  font-size: 0.12rem;
  font-family: "BIZ UDPGothic", serif;
}

.button {
  display: inline-block;
}

p {
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 0em;
  vertical-align: middle;
  color: var(--color-break);
}

img {
  object-fit: contain;
  object-position: center bottom;
  width: 0em;
  vertical-align: middle;
}

#timer-label-value {
  font-family: "BIZ UDGothic", serif;
  font-display: swap;
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
  white-space: nowrap;
  text-align: center;
  word-spacing: normal;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.05rem;
}

#timer-label-description {
  font-family: "BIZ UDPGothic", serif;
  font-size: 0.25rem;
}

#timer-master {
  height: 3rem;
  position: relative;
  width: 3rem;
}

.timer-group {
  fill: none;
  stroke: none;
}

.timer-label {
  align-items: center;
  display: flex;
  height: 3rem;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 3rem;
}

.timer-circle-outer {
  stroke-linecap: butt;
  stroke-width: 4;
  transition: 0.2s linear all;
}

.timer-svg {
  transform: rotate3d(1, -1, 0, 180deg);
  transform-origin: center center;
}