:root {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #ddd;
  background-color: #222;

  animation:
    timer 0.1s step-end forwards infinite paused;
  --za: 1;
  --zb: 0;
  --value: calc(var(--za) + var(--zb) - 1);
}

main {
  position: relative;
  width: 300px;
  height: 150px;

  border: 1px solid #fff;
  border-radius: 8px;
  box-sizing: border-box;

  background-color: #030;
  overflow: hidden;

  font-size: 150px
}

label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
body:has(#a:checked ~ [for=a]:hover),
body:has(#b:checked ~ [for=b]:hover) {
  animation-play-state: running;
}
main::before {
  counter-set: value var(--value);
  content: counter(value);
}

#a:not(:checked) ~ [for=a] {
  z-index: var(--za);
}

#b:not(:checked) ~ [for=b] {
  z-index: var(--zb);
}

@keyframes timer {
  0% { --za: 1 } /* Even though paused, --za is set here */
 10% { --zb: 1 }
 20% { --za: 2 }
 30% { --zb: 2 }
 40% { --za: 3 }
 50% { --zb: 3 }
 60% { --za: 4 }
 70% { --zb: 4 }
 80% { --za: 5 }
 90% { --zb: 5 }
100% { --za: 0; --zb: 0 }
}

p {
  position: absolute;
  top: 55px;
  right: 0;
  margin: 0;
  font-size: 35px;
  color: #c60;
  transform: rotate(15deg);
  pointer-events: none;
}

a.refresh {
  position: absolute;
  right: 0;
  top: 0;
  padding: 8px 16px;
  color: #ddd;
  font-size: 16px;
  text-decoration: none;
  background-color: #060;
  border: 1px outset #090;
  border-radius: 8px;
  z-index: 6;

  &:hover {
    color: #fff;
  }
  
  &:hover:active {
    border-style: inset;
    background-color: #030;
  }
}

/* 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;
    z-index: 6;

    &:hover {
      opacity: 1;
    }
  }
}