<H1>Experiment with blend-mode</H1>
<div class="typo">
  <p>T</p>
  <p>Y</p>
  <p>P</p>
  <p>O</p>
  <p>G</p>
  <p>R</p>
  <p>A</p>
  <p>P</p>
  <p>H</p>
  <p>Y</p>
</div>
<div class="bubbles">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

@import url(https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap);

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-family: Bowlby One SC;
  font-size: 2.5vw;
  color: mediumpurple;
}

.typo {  
  :nth-child(1) {
    color: lightgreen;
  }
  :nth-child(2),
  :nth-child(6),
  :nth-child(10) {
    color: yellow;
  }
  :nth-child(3),
  :nth-child(7) {
    color: pink;
  }
  :nth-child(4),
  :nth-child(8) {
    color: lightblue;
  }
  :nth-child(5),
  :nth-child(9) {
    color: lightgreen;
  }
  :not(:first-child) {
    margin-left: -6.2vw;
  }

  p {
    display: inline;
    font-family: Bowlby One SC;
    font-size: 18vw;
    line-height: 18vw;
    margin: 0;
    mix-blend-mode: multiply;
  }
}

.bubbles {
  height: 10vw;
  width: 70vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    display: inline-block;
    height: 6vw;
    width: 6vw;
    border-radius: 50%;
    background-color: black;
    mix-blend-mode: multiply;
  }

  :nth-child(1) {
    background-color: lightgreen;
  }
  :nth-child(2),
  :nth-child(6),
  :nth-child(10) {
    background-color: yellow;
    margin-left: -1vw;
  }
  :nth-child(3),
  :nth-child(7) {
    background-color: pink;
    position: absolute;
    top: 0;
  }
  :nth-child(3) {
    left: 4vw;
  }
  :nth-child(4),
  :nth-child(8) {
    background-color: lightblue;
    position: absolute;
    bottom: 0;
  }
  :nth-child(4) {
    right: 3vw;
  }
  :nth-child(5),
  :nth-child(9) {
    background-color: lightgreen;
  }

  :nth-child(10) {
    background-color: lightblue;
  }

  :nth-child(11) {
    background-color: pink;
  }
  :nth-child(12) {
    background-color: yellow;
  }
}