<section class="outline-container">
  
  <!-- first text -->
  <p class="element" style="--index: 2;">
    <span style="index: 2;">
      Peas
    </span>
  </p>
  
  <!-- second text -->
  <p class="element" style="--index: 1;">

    <span style="--index: 1">Peas</span>

  </p>
</section>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  display: grid;
  height: 100vh;
  width: 100%;
  place-items: center;
  background: #FB2E26;
  overflow-y: hidden;
}
.outline-container{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 10rem;
  z-index: 20;
}
.element{
  display: grid;
  place-items: center;
  position: absolute;
  font-size: 9rem;
  text-align: center;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
}

.element:nth-child(1), .element:nth-child(2){
  color: #03989E;
  -webkit-text-stroke: .5rem white;
}

.element::before, .element::after{
  content: "Peas";
  position: absolute;
}

.element:nth-child(1)::before{
  z-index: calc(var(--index) - (var(--index) * 2) - 1);
  -webkit-text-stroke: 1.5rem #9E0903;
}
.element:nth-child(1)::after{
  z-index: calc(var(--index) - (var(--index) * 2) - 2);
  color: white;
  -webkit-text-stroke: 3rem black;
}

.element:nth-child(2) > span{
  position: relative;
  z-index: calc(var(--index) - (var(--index) * 2) - 4);
  -webkit-text-stroke: 4rem white;
}

.element:nth-child(2)::before{
  z-index: calc(var(--index) - (var(--index) * 2) - 4);
  -webkit-text-stroke: 5rem #9E0903;
}

.element:nth-child(2)::after{
  z-index: calc(var(--index) - (var(--index) * 2) - 5);
  -webkit-text-stroke: 6.5rem black;
}