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

@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; /* So transformations work */

    position: relative;
    bottom: calc(1.2lh * var(--direction));
    left: calc(50% * var(--direction));
    transform: translate(calc(-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));
}