whose-turn-is-it/index.css

.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;
}

.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;
}