body{
font-size:20px;
background-color: white;
}

#front{
mix-blend-mode: screen;
    position:fixed;
     display:inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
}

.square2 {
width: 300px;
  height: 300px;
  background-color:pink;
    margin: 60px;
    -webkit-transition: background-color 2s ease-out;
-moz-transition: background-color 2s ease-out;
-o-transition: background-color 2s ease-out;
transition: background-color 2s ease-out;
}

.square2:hover{
    background-color:#ffda35;
}

#back {
  mix-blend-mode: screen;
  display:absolute;
  flex-direction:row; 
  flex-wrap:wrap;
  justify-content:center;
}

.square1 {
    width: 200px;
  height: 200px;
  background-color:pink;
  display:inline-block;
  padding:10px;
  margin:30px;
}

.square1:hover {
  background-color:#b637ff;
z-index: 2;
}