html, body {
  overscroll-behavior-y: contain;
}

.card {
  cursor: pointer;
  box-shadow: 0 0 1vmin #00000099;
  border-radius: 1vmin;
  transition: box-shadow 0.1s, top 0.1s;
  z-index: 0;
}
.card:hover {
  box-shadow: 0 0 2vmin 1vmin #00000044;
  z-index: 1;
}
.button {
  cursor: pointer;
  box-shadow: 0 0 1vmin #00000099;
  border-radius: 1vmin;
  transition: box-shadow 0.1s, opacity 0.05s;
  z-index: 0;
}
.button:hover {
  box-shadow: 0 0 2vmin 0.5vmin #00000044;
  z-index: 1;
}

@property --num {
  syntax: "<integer>";
  initial-value: 20;
  inherits: false;
}

#hp {
  transition: --num 0.5s;
  counter-set: num var(--num);
}
#hp::after {
  content: counter(num);
}