.timer {
  font-size: 10em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}

@keyframes blinker {
  50% {
    opacity: 0.3;
  }
}

.timer.my-turn {
  color: #0f0;
  animation: blinker 2s ease infinite;
}

.timer.over {
  color: #f00;
  animation: blinker 0.5s ease infinite;
}

.timer.loading {
  font-size: 2em;
  margin: auto;
  margin-bottom: 2.5em;
  margin-top: 2.5em;
}

.mb {
  margin-bottom: var(--spacing) !important;
}

.first-details {
  padding-top: var(--spacing);
  border-bottom: var(--border-width) solid var(--accordion-border-color);
  border-top: var(--border-width) solid var(--accordion-border-color);
}

:is(
    button,
    input[type="submit"],
    input[type="button"],
    [role="button"]
  ).outline.invalid,
input[type="reset"].outline {
  --color: var(--form-element-invalid-border-color);
  --background-color: transparent;
}

:is(
    button,
    input[type="submit"],
    input[type="button"],
    [role="button"]
  ).invalid,
input[type="reset"] {
  --background-color: var(--form-element-invalid-border-color);
  --border-color: var(--form-element-invalid-border-color);
  cursor: pointer;
}