<h1>
  <span class="intro">Make the web less</span>
  <span class="main" aria-label="boring" data-splitting>Boring</span>
</h1>

:root {
  --fluid-type-min: 2rem;
  --fluid-type-max: 10rem;
  --fluid-type-target: 5vw;
  --color: #dbe3ea;
}

body {
  background: #24313c;
  color: var(--color);
  padding: 2rem;
  font-family: "Cabin Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  display: grid;
  place-items: center;
}

h1 > span {
  line-height: 1;
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
  display: block;
}

.main {
  --fluid-type-min: 8rem;
  --fluid-type-max: 20rem;
  --fluid-type-target: 20vw;
  font-family: acier-bat-gris, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.7;
  margin-left: -0.06ch;
}

.main .char {
  cursor: zoom-in;
  transform-origin: center bottom;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.7, 1.8), color 400ms ease;
  color: var(--color);
  box-shadow: none;
}

.main .char:nth-child(3),
.main .char:nth-child(4) {
  letter-spacing: 0.02ch;
}

.main .char:hover {
  transform: scale(1.4);
  transition-duration: 200ms;
  text-shadow: 0px 0px 3px black, 0px 0px 20px var(--color);
  z-index: 1;
}

.main .char:nth-child(1):hover {
  --color: #ffd300;
}

.main .char:nth-child(2):hover {
  --color: #de38c8;
}

.main .char:nth-child(3):hover {
  --color: #8b5fda;
}

.main .char:nth-child(4):hover {
  --color: #86bbd8;
}

.main .char:nth-child(5):hover {
  --color: #d3f6db;
}

.main .char:nth-child(6):hover {
  --color: #eb9486;
}

Splitting();