.container {
  width: 600px;
  height: 600px;
  position: relative;
  padding: 60px;
}

.pink {
  width: 400px;
  height: 400px;
  background-color: pink;
}

.green {
  width: 300px;
  height: 300px;
  background-color: palegreen;
  position: absolute;
  top: 200px;
  left: 200px;
  padding: 20px;
  /* toggle the line below to apply a stacking context to the green square and see what happens when mix-blend-mode is applied to the black square */
/*   isolation: isolate; */
}

.black {
  width: 200px;
  height: 200px;
  position: absolute;
  left:-40px;
  top: -40px;
  background-color: black;   
/*   mix-blend-mode: overlay; */
}

.orange {
  width: 200px;
  height: 200px;
  position: absolute;
  left:-50px;
  top: -50px;
  background-color: orange;
}