<div class="page-wrap">
  <div class="container">
    <h1><span>C</span><span>S</span><span>S</span> <span>B</span><span>l</span><span>e</span><span>n</span><span>d</span></h1>
    <p>CSS Blend Modes let us blend an element&rsquo;s background layer with another layer. They allow blending between background images, gradients, and background colors.</p>
    <form>
      <label for="color">Pick a CSS Blend Mode:</label>
      <select id="color" class="jsColor">
        <option value="normal">normal</option>
        <option value="color">color</option>
        <option value="color-burn">color-burn</option>
        <option value="color-dodge">color-dodge</option>
        <option value="darken">darken</option>
        <option value="difference">difference</option>
        <option value="exclusion">exclusion</option>
        <option value="hard-light">hard-light</option>
        <option value="hue">hue</option>
        <option value="lighten">lighten</option>
        <option value="luminosity">luminosity</option>
        <option value="multiply">multiply</option>
        <option value="overlay">overlay</option>
        <option value="saturation">saturation</option>
        <option value="screen">screen</option>
        <option value="soft-light">soft-light</option>
      </select>
    </form>
  </div>
</div>

body {
  margin: 0;
  font-family: Georgia, serif;
}

.page-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url('https://picsum.photos/id/1039/6945/4635') no-repeat, linear-gradient(to left, #225378, #1695A3);
  background-blend-mode: normal;
  background-size: cover;
}

.container {
  width: 80%;
  color: #FFF;
}

h1 {
  font-size: 8rem;
  margin-bottom: .5rem;
  letter-spacing: -1.25rem;
  color: #1695A3;
}

h1 span:nth-child(2n) {
  color: #225378;  
}

h1 span {
  mix-blend-mode: screen;
}

p,
label {
  font-size: 1.5rem;
  font-weight: 700;
}

select {
  margin-top: 1rem;
  display: block;
}

@media screen and (min-width: 1024px) {
  .page-wrap {
    padding-right: 2.5%;
    justify-content: flex-end;
  }    
  
  .container {
    max-width: 45%;
  }
  
}

/* Get the Form Element */
const form = document.querySelector('form');
/* Get the Background Container */
const background = document.querySelector('.page-wrap');
/* Create function to change the blend mode to the user's selection */
const updateBlendMode = () => {
  const selection = document.querySelector('.jsColor').value;
  background.style.backgroundBlendMode = selection;
};
/* Don't let the form submit */
form.addEventListener('submit',(e) => {
  e.preventDefault();
});
/* Update the blend mode when the user changes the form */
form.addEventListener('change',() => {
  updateBlendMode();
});

/* Initially update the blend mode to the default on page load */
updateBlendMode();