:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --white: #fff;
  --mask:  #fff4;
  --light: #ddd;
  --mid:   #aaa;
  --dark:  #222;
  --cross: #900;
  --bg:    #030;
  --plain: #060;
  --hover: #090;

  --form:  300px;
  --half:  150px;
  --pad:     8px;
  --brdr:    1px;
  --font:    24px;

  --size:   44px;
  --semi:  calc(var(--size) / 2);

  --left1:  40px;
  --left2: calc(var(--left1) + var(--semi));
  --left3: calc(var(--left1) + var(--semi) * 2);
  --left4: calc(var(--left1) + var(--semi) * 4);
  --left5: calc(var(--left1) + var(--semi) * 5);
  --left6: calc(var(--left1) + var(--semi) * 6);
  --left7: calc(var(--left1) + var(--semi) * 7);
  --left8: calc(var(--left1) + var(--semi) * 8);

  --space: 3px;
  --col1: calc(var(--left4) - var(--size) - var(--space));
  --row2: calc(var(--size) + var(--space));
  --col3: calc(var(--left4) + var(--size) + var(--space));
  --border: var(--brdr) solid var(--white);

  --over:    calc(var(--size) + var(--space));
  --win:     "You scored ";
  --ner:     " points in ";
  --time:    "s!";
  --message: "You ran out of time!";
  --z-end:    0;
  --w-height: 0;
  --f-height: 0;

  counter-set:
    c1 0
    c2 0
    c3 0
    c4 0
    c5 0
    c6 0
    c7 0
    score 0
    timer 0
  ;

}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  color: var(--light);
  background-color: var(--dark);
}


form {
  position: relative;
  width: var(--form);
  height: var(--half);
  border: var(--brdr) solid var(--white);
  border-radius: var(--pad);
  box-sizing: border-box;
  background-color: var(--dark);
  overflow: hidden;
}

input {
  position: absolute;
  left: -999vw;
}


/* AVAILABLE LETTERS */
[class|=layer] {
  label {
    position: absolute;
    top: 0;
    width: var(--size);
    height: var(--size);
    font-size: var(--size);
    line-height: var(--size);
    text-align: center;
    border: var(--border);
    background-color: var(--bg);
    box-sizing: border-box;
    cursor: pointer;
  }

  label.a,
  label.r {
    left: var(--col1);
  }

  label.i,
  label.s {
    left: var(--left4);
  }

  label.n,
  label.t {
    left: var(--col3);
  }

  label.r,
  label.s,
  label.t {
    top: var(--row2);
  }
}


/* LETTERS THAT CAN BE CHOSEN */

/* Allow selection only at the current layer */
[class|=layer]:not(:has(> label :checked)) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Hide a letter that has been selected at all layers */
form:has([id|=a]:checked) .a,
form:has([id|=i]:checked) .i,
form:has([id|=n]:checked) .n,
form:has([id|=r]:checked) .r,
form:has([id|=s]:checked) .s,
form:has([id|=t]:checked) .t {
  display: none;
}

/* Count div.layer-X out, if it has a letter checked */
[class|=layer]:has(> [id|=undo]:not(:checked)) {
  opacity: 0;
  pointer-events: none;
  counter-increment: score;
}

/* Undo labels */
[for|=undo] {
  position: absolute;
  bottom: 0;
  left: -99vw;
  width: var(--size);
  height: var(--size);
  text-align: right;
  line-height: 0.9em;
  color: var(--cross);
  background-color: var(--mask);
  cursor: pointer
}

/* Non-starter letters */
.layer-1 .n,
.layer-1 .r,
.layer-1 .s,
.layer-1 .t { /* invalid */
  pointer-events: none;
  color: var(--mid);
  border-color: var(--mid);
  cursor: default;
}


/* CHOSEN LETTERS  */
form {
  &:has(.layer-1 .a :checked) {  /* A */
    p#word span:nth-child(4)::after {
      counter-set: c4 1;
      width: var(--size);
      border: var(--border);
    }

    [for=undo-1] {
      left: var(--left4);
    }

    .layer-2 .i,
    .layer-2 .r { /* invalid */
      pointer-events: none;
      color: var(--mid);
      border-color: var(--mid);
      cursor: default;
    }

    &:has(.layer-2 .n :checked) { /* AN */
      p#word span:nth-child(5)::after {
        counter-set: c5 3;
        width: var(--size);
        border: var(--border);
      }

      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      .layer-3 .s { /* invalid */
        pointer-events: none;
        color: var(--mid);
        border-color: var(--mid);
        cursor: default;
      }

      &:has(.layer-3 > label [id]:checked) {
        /* [id] added to increase specificity */
        &:has(.layer-3 .i :checked) { /* IAN */
          p#word span:nth-child(3)::after {
            counter-set: c3 2;
            width: var(--size);
            border: var(--border);
          }

          .layer-4 .r,
          .layer-4 .s,
          .layer-4 .t { /* invalid */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }
        }

        &:has(.layer-3 .r :checked) { /* RAN .. rain, rains, trains, train, strain, rant, rants */
          p#word span:nth-child(3)::after {
            counter-set: c3 4;
            width: var(--size);
            border: var(--border);
          }

          .layer-4 .s { /* invalid */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }

          &:has(.layer-4 .i :checked) { /* RAIN .. rains, trains, train, strain */
            p#word span {
              &:nth-child(5)::after {
                counter-set: c5 2;
                width: var(--size);
                border: var(--border);
              }
              &:nth-child(6)::after {
                counter-set: c6 3;
                width: var(--size);
                border: var(--border);
              }
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left5);
            }

            &:has(.layer-5 .s :checked) { /* RAINS .. trains */
              p#word span:nth-child(7)::after {
                counter-set: c7 5;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left8);
              }

              &:has(.layer-6 .t :checked) { /* TRAINS */
                p#word span:nth-child(1)::after {
                  counter-set: c1 6;
                  width: var(--size);
                  border: var(--border);
                }

                [for|=undo] {
                  left: -999vw;
                }
              }
            }

            &:has(.layer-5 .t :checked) { /* TRAIN .. strain */
              p#word span:nth-child(2)::after {
                counter-set: c2 6;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left1);
              }

              &:has(.layer-6 .s :checked) { /* STRAIN */
                p#word span:nth-child(1)::after {
                  counter-set: c1 5;
                  width: var(--size);
                  border: var(--border);
                }

                [for|=undo] {
                  left: -999vw;
                }
              }
            }
          }

          &:has(.layer-4 .t :checked) { /* RANT .. rants */
            p#word span:nth-child(6)::after {
              counter-set: c6 6;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .layer-5 .i { /* invalid */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .s :checked) { /* RANTS */
              p#word span:nth-child(7)::after {
                counter-set: c7 5;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left8);
              }

              .layer-6 .i { /* invalid */
                pointer-events: none;
                color: var(--mid);
                border-color: var(--mid);
                cursor: default;
              }
            }
          }
        }

        &:has(.layer-3 .t :checked) { /* ANT .. rant, rants, ants, rants */
          p#word span:nth-child(6)::after {
            counter-set: c6 6;
            width: var(--size);
            border: var(--border);
          }

          [for|=undo] {
            left: -999vw;
          }
          [for=undo-3] {
            left: var(--left6);
          }

          &:has(.layer-4 .i :checked) { /* ANTI */
            p#word span:nth-child(7)::after {
              counter-set: c7 2;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .layer-5 .r,
            .layer-5 .s { /* invalid */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }
          }

          &:has(.layer-4 .r :checked) { /* RANT .. rants*/
            p#word span:nth-child(3)::after {
              counter-set: c3 4;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left2);
            }

            .i { /* invalid at all coming layers */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .s :checked) { /* RANTS */
              p#word span:nth-child(7)::after {
                counter-set: c7 5;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left8);
              }
            }
          }

          &:has(.layer-4 .s :checked) { /* ANTS .. rants*/
            p#word span:nth-child(7)::after {
              counter-set: c7 5;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .i { /* invalid at all coming layers */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .r :checked) { /* RANTS */
              p#word span:nth-child(2)::after {
                counter-set: c2 4;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left1);
              }
            }
          }
        }

        [for|=undo] {
          left: -999vw;
        }
        [for=undo-3] {
          left: var(--left3);
        }
      }
    }

    &:has(.layer-2 .s :checked) { /* AS */
      p#word span:nth-child(5)::after {
        counter-set: c5 5;
        width: var(--size);
        border: var(--border);
      }
      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      .layer-3 .i,
      .layer-3 .n,
      .layer-3 .r,
      .layer-3 .t { /* invalid */
        pointer-events: none;
        color: var(--mid);
        border-color: var(--mid);
        cursor: default;
      }
    }

    &:has(.layer-2 .t :checked) { /* AT .. ant, anti, rant, rants, ants, rants */
      p#word span:nth-child(5)::after {
        counter-set: c5 6;
        width: var(--size);
        border: var(--border);
      }
      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      .layer-3 .i { /* invalid */
        pointer-events: none;
        color: var(--mid);
        border-color: var(--mid);
        cursor: default;
      }

      &:has(.layer-3 > label [id]:checked) {
        &:has(.layer-3 .n :checked) { /* ANT .. anti, rant, rants, ants, rants */
          p#word span {
            &:nth-child(5)::after {
              counter-set: c5 3;
              width: var(--size);
              border: var(--border);
            }
            &:nth-child(6)::after {
              counter-set: c6 6;
              width: var(--size);
              border: var(--border);
            }
          }

          [for|=undo] {
            left: -999vw;
          }
          [for=undo-3] {
            left: var(--left4);
          }

          &:has(.layer-4 .i :checked) { /* ANTI */
            p#word span:nth-child(7)::after {
              counter-set: c7 2;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .layer-5 .r,
            .layer-5 .s { /* invalid */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }
          }

          &:has(.layer-4 .r :checked) { /* RANT .. rants*/
            p#word span:nth-child(3)::after {
              counter-set: c3 4;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left2);
            }

            .i { /* invalid for all coming layers*/
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .s :checked) { /* RANTS */
              p#word span:nth-child(7)::after {
                counter-set: c7 5;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left8);
              }
            }
          }

          &:has(.layer-4 .s :checked) { /* ANTS .. rants*/
            p#word span:nth-child(7)::after {
              counter-set: c7 5;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .i { /* invalid for all coming layers*/
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .r :checked) { /* RANTS */
              p#word span:nth-child(2)::after {
                counter-set: c2 4;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left1);
              }
            }
          }
        }

        [for|=undo] {
          left: -999vw;
        }
        [for=undo-3] {
          left: var(--left3);
        }

        &:has(.layer-3 .r :checked) { /* RAT .. rant, rants, rats, rants */
          p#word span:nth-child(3)::after {
            counter-set: c3 4;
            width: var(--size);
            border: var(--border);
          }

          [for|=undo] {
            left: -999vw;
          }
          [for=undo-3] {
            left: var(--left3);
          }

          .i { /* invalid for all coming layers */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }

          &:has(.layer-4 .n :checked) { /* RANT .. rants */
            p#word span {
              &:nth-child(5)::after {
                counter-set: c5 3;
                width: var(--size);
                border: var(--border);
              }
              &:nth-child(6)::after {
                counter-set: c6 6;
                width: var(--size);
                border: var(--border);
              }
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left5);
            }

            &:has(.layer-5 .s :checked) { /* RANTS */
              p#word span:nth-child(7)::after {
                counter-set: c7 5;
                width: var(--size);
                border: var(--border);
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left8);
              }
            }
          }

          &:has(.layer-4 .s :checked) { /* RATS .. rants */
            p#word span:nth-child(6)::after {
              counter-set: c6 5;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }

            .i { /* invalid for all coming layers */
              pointer-events: none;
              color: var(--mid);
              border-color: var(--mid);
              cursor: default;
            }

            &:has(.layer-5 .n :checked) { /* RANTS */
              p#word span {
                :nth-child(5)::after {
                  counter-set: c5 3;
                  width: var(--size);
                  border: var(--border);
                }
                &:nth-child(6)::after {
                  counter-set: c6 6;
                  width: var(--size);
                  border: var(--border);
                }
                &:nth-child(7)::after {
                  counter-set: c7 5;
                  width: var(--size);
                  border: var(--border);
                }
              }

              [for|=undo] {
                left: -999vw;
              }
              [for=undo-5] {
                left: var(--left4);
              }

              .i { /* invalid for all coming layers */
                pointer-events: none;
                color: var(--mid);
                border-color: var(--mid);
                cursor: default;
              }
            }
          }
        }

        &:has(.layer-3 .s :checked) { /* SAT */
          p#word span:nth-child(3)::after {
            counter-set: c3 5;
            width: var(--size);
            border: var(--border);
          }

          .layer-4 .i,
          .layer-4 .n,
          .layer-4 .r { /* invalid */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }
        }

        [for|=undo] {
          left: -999vw;
        }
        [for=undo-3] {
          left: var(--left3);
        }
      }
    }
  }

  &:has(.layer-1 .i :checked) { /* I .. in, sin, tin, tins */
    p#word span:nth-child(5)::after {
      counter-set: c5 2;
      width: var(--size);
      border: var(--border);
    }

    [for=undo-1] {
      left: var(--left4);
    }

    .a,
    .r { /* invalid for all coming layers */
      pointer-events: none;
      color: var(--mid);
      border-color: var(--mid);
      cursor: default;
    }

    &:has(.layer-2 .n :checked) { /* IN .. sin, tin, tins */
      p#word span:nth-child(6)::after {
        counter-set: c6 3;
        width: var(--size);
        border: var(--border);
      }
      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      &:has(.layer-3 > label [id]:checked) {
        /* [id] added to increase specificity */
        &:has(.layer-3 .t :checked) { /* TIN .. tins */
          p#word span:nth-child(4)::after {
            counter-set: c4 6;
            width: var(--size);
            border: var(--border);
          }

          &:has(.layer-4 .s :checked) { /* TINS */
            p#word span:nth-child(7)::after {
              counter-set: c7 5;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }
          }
        }

        &:has(.layer-3 .s :checked) { /* SIN */
          p#word span:nth-child(4)::after {
            counter-set: c4 5;
            width: var(--size);
            border: var(--border);
          }

          .t { /* invalid for all coming layers */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }
        }

        [for|=undo] {
          left: -999vw;
        }
        [for=undo-3] {
          left: var(--left3);
        }
      }
    }

    &:has(.layer-2 .s :checked) { /* IS */
      p#word span:nth-child(6)::after {
        counter-set: c6 5;
        width: var(--size);
        border: var(--border);
      }
      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      .n,
      .t { /* invalid for all layers */
        pointer-events: none;
        color: var(--mid);
        border-color: var(--mid);
        cursor: default;
      }
    }

    &:has(.layer-2 .t :checked) {
      /* IT */
      p#word span:nth-child(6)::after {
        counter-set: c6 6;
        width: var(--size);
        border: var(--border);
      }
      [for|=undo] {
        left: -999vw;
      }
      [for=undo-2] {
        left: var(--left5);
      }

      &:has(.layer-3 > label [id]:checked) {
        /* [id] added to increase specificity */
        &:has(.layer-3 .n :checked) { /* NIT .. nits */
          p#word span:nth-child(4)::after {
            counter-set: c4 3;
            width: var(--size);
            border: var(--border);
          }

          &:has(.layer-4 .s :checked) {
            /* NITS */
            p#word span:nth-child(7)::after {
              counter-set: c7 5;
              width: var(--size);
              border: var(--border);
            }

            [for|=undo] {
              left: -999vw;
            }
            [for=undo-4] {
              left: var(--left7);
            }
          }
        }
        &:has(.layer-3 .s :checked) { /* SIT */
          p#word span:nth-child(4)::after {
            counter-set: c4 5;
            width: var(--size);
            border: var(--border);
          }

          .n { /* invalid for all layers */
            pointer-events: none;
            color: var(--mid);
            border-color: var(--mid);
            cursor: default;
          }
        }

        [for|=undo] {
          left: -999vw;
        }
        [for=undo-3] {
          left: var(--left3);
        }
      }
    }
  }
}


/* CURRENT WORD */
@counter-style letters {
  system: cyclic;
  symbols: "A" "I" "N" "R" "S" "T" "";
}

p#word {
  position: absolute;
  width: 100%;
  margin: 0 var(--brdr);
  bottom: 0;

  display: flex;
  justify-content: center;

  font-size: var(--size);
  line-height: var(--size);
  background-color: var(--bg);
  border-top: var(--border);

  span {
    text-align: center;

    &::after {
      display: inline-block;
      box-sizing: border-box;
    }

    &:nth-child(1)::after {
      content: counter(c1, letters);
    }

    &:nth-child(2)::after {
      content: counter(c2, letters);
    }

    &:nth-child(3)::after {
      content: counter(c3, letters);
    }

    &:nth-child(4)::after {
      content: counter(c4, letters);
    }

    &:nth-child(5)::after {
      content: counter(c5, letters);
    }

    &:nth-child(6)::after {
      content: counter(c6, letters);
    }

    &:nth-child(7)::after {
      content: counter(c7, letters);
    }
  }
}


/* Time, Score and Play Again */

p {
  font-size: var(--font);
}

p#time,
p#score {
  position: absolute;
  width: 75px;
  text-align: center;
  margin: 0.65em 0 0;

  &::after {
    display: inline-block;
    width: 100%;
  }
}

p#time {
  left: 0;
}
p#time::after {
  content: counter(timer) "s";
}

p#score {
  right: 0;
}
p#score::after {
  content: counter(score);
}

#game-over {
  position: absolute;
  width: var(--form);
  top: 0;
  bottom: var(--over);
  background-color: #030;
  text-align: center;
  z-index: var(--z-end);
}

p.message {
  margin: var(--pad) 0;

  &::before,
  &::after {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
  }

  &::before {
    height: var(--w-height);
    content: var(--win) counter(score) var(--ner) counter(timer) var(--time);
  }
  &::after {
    height: var(--f-height);
    content: var(--message);
  }
}

button,
.button {
  position: absolute;
  left: var(--left2);
  right: var(--left2);
  top: var(--row2);
  text-align: center;
  padding: var(--pad) 0;
  color: var(--light);
  text-decoration: none;
  background-color: var(--plain);
  border: var(--brdr) outset var(--hover);
  border-radius: var(--pad);
}

button {
  &:hover {
    color: var(--white);
  }

  &:hover:active {
    border-style: inset;
    background-color: var(--bg);
  }
}

.start {
  position: absolute;
  left: 0;
  width: var(--form);
  height: var(--half);
  background-color: var(--bg);
  pointer-events: none;

  span {
    font-size: var(--font);
  }

  .button {
    pointer-events: all;
    cursor: pointer;
  }

  .sub {
    position: absolute;
    left: 0;
    bottom: 0.5em;
    width: 100%;
  }
}


/* Playing and Winning */
form:has(.start input:checked) {
  --z-end: -1;
  animation: timer 100s step-end forwards;
}
.start:has(input:checked) {
  display: none;
}

form:has(#undo-6:not(:checked)) {
  --z-end: 1;
  animation-play-state: paused;
  --w-height: auto;
}


/* 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;
    }
  }
}

@keyframes timer {
   0% { counter-increment: timer   0; }
   1% { counter-increment: timer   1; }
   2% { counter-increment: timer   2; }
   3% { counter-increment: timer   3; }
   4% { counter-increment: timer   4; }
   5% { counter-increment: timer   5; }
   6% { counter-increment: timer   6; }
   7% { counter-increment: timer   7; }
   8% { counter-increment: timer   8; }
   9% { counter-increment: timer   9; }
  10% { counter-increment: timer  10; }
  11% { counter-increment: timer  11; }
  12% { counter-increment: timer  12; }
  13% { counter-increment: timer  13; }
  14% { counter-increment: timer  14; }
  15% { counter-increment: timer  15; }
  16% { counter-increment: timer  16; }
  17% { counter-increment: timer  17; }
  18% { counter-increment: timer  18; }
  19% { counter-increment: timer  19; }
  20% { counter-increment: timer  20; }
  21% { counter-increment: timer  21; }
  22% { counter-increment: timer  22; }
  23% { counter-increment: timer  23; }
  24% { counter-increment: timer  24; }
  25% { counter-increment: timer  25; }
  26% { counter-increment: timer  26; }
  27% { counter-increment: timer  27; }
  28% { counter-increment: timer  28; }
  29% { counter-increment: timer  29; }
  30% { counter-increment: timer  30; }
  31% { counter-increment: timer  31; }
  32% { counter-increment: timer  32; }
  33% { counter-increment: timer  33; }
  34% { counter-increment: timer  34; }
  35% { counter-increment: timer  35; }
  36% { counter-increment: timer  36; }
  37% { counter-increment: timer  37; }
  38% { counter-increment: timer  38; }
  39% { counter-increment: timer  39; }
  40% { counter-increment: timer  40; }
  41% { counter-increment: timer  41; }
  42% { counter-increment: timer  42; }
  43% { counter-increment: timer  43; }
  44% { counter-increment: timer  44; }
  45% { counter-increment: timer  45; }
  46% { counter-increment: timer  46; }
  47% { counter-increment: timer  47; }
  48% { counter-increment: timer  48; }
  49% { counter-increment: timer  49; }
  50% { counter-increment: timer  50; }
  51% { counter-increment: timer  51; }
  52% { counter-increment: timer  52; }
  53% { counter-increment: timer  53; }
  54% { counter-increment: timer  54; }
  55% { counter-increment: timer  55; }
  56% { counter-increment: timer  56; }
  57% { counter-increment: timer  57; }
  58% { counter-increment: timer  58; }
  59% { counter-increment: timer  59; }
  60% { counter-increment: timer  60; }
  61% { counter-increment: timer  61; }
  62% { counter-increment: timer  62; }
  63% { counter-increment: timer  63; }
  64% { counter-increment: timer  64; }
  65% { counter-increment: timer  65; }
  66% { counter-increment: timer  66; }
  67% { counter-increment: timer  67; }
  68% { counter-increment: timer  68; }
  69% { counter-increment: timer  69; }
  70% { counter-increment: timer  70; }
  71% { counter-increment: timer  71; }
  72% { counter-increment: timer  72; }
  73% { counter-increment: timer  73; }
  74% { counter-increment: timer  74; }
  75% { counter-increment: timer  75; }
  76% { counter-increment: timer  76; }
  77% { counter-increment: timer  77; }
  78% { counter-increment: timer  78; }
  79% { counter-increment: timer  79; }
  80% { counter-increment: timer  80; }
  81% { counter-increment: timer  81; }
  82% { counter-increment: timer  82; }
  83% { counter-increment: timer  83; }
  84% { counter-increment: timer  84; }
  85% { counter-increment: timer  85; }
  86% { counter-increment: timer  86; }
  87% { counter-increment: timer  87; }
  88% { counter-increment: timer  88; }
  89% { counter-increment: timer  89; }
  90% { counter-increment: timer  90; }
  91% { counter-increment: timer  91; }
  92% { counter-increment: timer  92; }
  93% { counter-increment: timer  93; }
  94% { counter-increment: timer  94; }
  95% { counter-increment: timer  95; }
  96% { counter-increment: timer  96; }
  97% { counter-increment: timer  97; }
  98% { counter-increment: timer  98; }
  99% { counter-increment: timer  99; }
 100% {
    counter-increment: timer 100;
    --z-end: 1;
    --f-height: auto
  }
}