<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas voluptate expedita sint deserunt, quaerat possimus quas aliquam provident quis quam voluptates iste non nostrum incidunt aperiam, reprehenderit ea? Velit, sequi?</p>

@import url("https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@400;800&display=swap");

:root {
  --razzmatazz: oklch(0.65 0.3 4.5);
  --goldenyellow: oklch(0.9 0.2 90);
  --tangerine: oklch(0.7 0.28 53);
}

p {
  font-size: 2rem;
  max-width: 36ch;
  color: var(--tangerine);
  background: white;

  &::first-letter {
    initial-letter: 3 2;
    font-weight: 800;
    padding-right: 1rem;
    background: linear-gradient(
      to right,
      var(--razzmatazz),
      var(--goldenyellow)
    );
    color: transparent;
    -webkit-background-clip: text;
  }
}

body {
  display: grid;
  place-items: center;
  height: 100dvh;
  font-family: "Grenze Gotisch", serif;
}