<h1>
  <span>Resize</span> and <span>enjoy!</span>
</h1>

<div class="info"></div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (
        clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) -
          var(--lower-bound)
      ) / (var(--upper-bound) - var(--lower-bound))
  );
}

h1 {
  position: absolute;
  white-space: nowrap;

  span {
    display: inline-block;

    position: relative;
    bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction));
    left: calc((50% - min(var(--wideness) * 2, 1) * 50%) * var(--direction));
    transform: translate(
      calc((-50% - min(var(--wideness) * 2, 1) * -50%) * var(--direction))
    );
  }

  span:nth-child(1) {
    --direction: 1;
  }

  span:nth-child(2) {
    --direction: -1;
  }
}

/* Aesthetic Styles */

:root {
  --rem-value: clamp(10px, 3vw, 18px);
  --highlight-color: hsl(28 55.2% 56.3%);
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-size: var(--rem-value);

  font-family: "Montserrat", sans-serif;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;

  overflow: hidden;

  background: linear-gradient(
    45deg,
    rgba(255, 136, 102, 0.7) -50%,
    rgba(255, 221, 136, 0.4) 50%
  );
}

h1 {
  font-size: 4rem;
  text-transform: uppercase;

  color: var(--highlight-color);
  text-shadow: 0.3rem 0.3rem 0px
    hsl(from var(--highlight-color) h s calc(l - 20));
}

.info {
  display: flex;
  flex-flow: column;
  gap: 10px;

  position: absolute;
  text-align: right;

  top: 4rem;
  right: 4rem;
  counter-reset: wideness calc(var(--wideness) * 100) int-width var(--int-width);
  font-size: 16px;

  &::before {
    content: "Wideness: " counter(wideness) "%";
  }

  &::after {
    content: "Width: " counter(int-width) "px";
  }
}