strong
  em
    span H
    span e
    span l
    span l
    span o
  em
    span 1
    span 0
    span 2
    span 4

@import "https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap";

html,
body {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #111;
  font: normal normal 300 clamp(1vw, 70vmin, 15vw) / 100% "Bitcount Grid Double",
    system-ui;
  color: #bbb;
}

$gradient-colors: (
  #ff0000,
  #ff3e00,
  #fc6000,
  #f17e00,
  #e09900,
  #cab100,
  #afc500,
  #8ed742,
  #69e67b,
  #3df1aa,
  #00f9d3,
  #00fff7,
  #00f9d3,
  #3df1aa,
  #69e67b,
  #8ed742,
  #afc500,
  #cab100,
  #e09900,
  #f17e00,
  #fc6000,
  #ff3e00,
  #ff0000
);

strong {
  background-color: transparent;
  background-image: linear-gradient(135deg, $gradient-colors);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  appearance: none;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: clamp(
    calc(1vw / 60),
    calc(2vmin / 5),
    2vw
  ); // black circular stroke effect on text, remove this line to see the difference
  paint-order: stroke fill;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1vw, 16vmin, 4vw);
  z-index: 1;
  animation: hue 2s linear infinite;

  em {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    all: unset;

    span {
      animation: shake calc(1s / 20) ease infinite; /* subtle shake animation */

      @for $i from 1 through 6 {
        &:nth-child(#{$i + 1}) {
          animation-delay: #{$i * 0.2}s;
          @if $i % 2 == 1 {
            animation-direction: reverse;
          } @else if $i == 2 {
            animation-direction: alternate;
          } @else if $i == 4 {
            animation-direction: alternate-reverse;
          } @else {
            animation-direction: alternate;
          }
        }
      }
    }
  }
}

@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes shake {
  0% {
    margin: 0 1px 1px 0;
  }
  50% {
    margin: 1px 0 0 1px;
  }
  100% {
    margin: 0 1px 1px 0;
  }
}