.position-relative{
  position:absolute;
  top:0px;
  left:0px;
}


#container {
display: flex;
flex-direction: row;
flex-wrap: wrap; 
width:100%;
height: 100%;
position:fixed;
top:0;
left:0;

}

#container-1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
position:absolute;
}

#container-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.circle-yellow{

  width:200px;
  height: 200px;
  border-radius: 50%;
  background-color:#ffff75;
  margin:50px;
  mix-blend-mode: multiply;

}




.triangle-up {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 200px solid #60fba4;
      margin: 25px;
    }

    .triangle-blue {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 200px solid #46ffff6b;
      margin: 25px;
    }

    .triangle-down {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-top: 200px solid #d8ffff;
      margin: 25px;
    }
  
  



.circle1{
  width:40px;
  height:40px;
  margin-top:50px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  background-color: #c195f480;
  border-radius: 50%;
  box-shadow: 5px 5px 15px #4a494963;
  mix-blend-mode: exclusion;

}

.circle2{
  width:40px;
  height:40px;
  margin-top:100px;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 100px;
  background-color: #ff00ff;
  border-radius: 50%;
  mix-blend-mode: multiply;

}