body {
  margin: 0;
  color: #ddd;
  background-color: #222;

  --timing: ease-in-out;

  counter-reset: countdown 10;
}

body:has(#linear:checked) {
  --timing: linear;
}

body:has(#step-end:checked) {
  --timing: step-end;
}

main {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

div#settings {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 12px;
  height: 48px;

  div {
    display: flex;
    justify-content: space-between;

    label {
      flex: 1;
    }
  }
}

div#animation {
  margin: 16px 36px 0 0;
  background-color: #f00
}

div#animation::after {
  font-size: 256px;
  color: #222;
  line-height: 1em;
  content: counter(countdown);
}

body:has(input#paused:checked) div#animation,
body:has(input#play:checked) div#animation {
  animation-name: timer;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: var(--timing);
}

body:has(input#paused:checked) div#animation {
  animation-play-state: paused;
}

@keyframes timer {
  0% { background-color: #f00; }
 10% { background-color: #f80; }
 20% { background-color: #ff0; }
 30% { background-color: #0f0; }
 40% { background-color: #0cf; }
 50% { background-color: #06f; }
 60% { background-color: #33f; }
 70% { background-color: #00f; }
 80% { background-color: #80f; }
 90% { background-color: #f0f; }
100% { background-color: #f00; }
}


/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}