@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
}

.wrapper {
margin: 0 auto;
width: 734px;
border-radius: 3%;
border: 1px solid #a42d2e;
height: 690px;
background: #eee;
position: relative;
overflow: hidden;

}
.window {
display: block;
width: 46.5%;
height: 270px;
float: left;
margin-left: 2%;
margin-top: 7%;
border: 2px solid #a42d2e;
border-radius: 10%;
background: #f4e3dc;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: relative;
-webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;


}

.window p {
margin: 0 5px;
margin-left: 10px;

}

h2 {
font-size: 210%;
text-align: center; 
margin-bottom: 0;
margin-top: 100px;
color: #a42d2e;
}

h3 {
font-size: 120%;
text-align: center; 
margin-bottom: 0;
margin-top: 4px;
color: #a42d2e;
}

.answer {
position: absolute;
display: none;
-webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
 
  font-size: 120%;
  
}

.show {
	display: block;
}

.answer p {
	margin-left: 50px;
	margin-right: 50px;
}

.answer h2 {
	font-size: 120%;
	margin-top: 50px;
}

img {
position: absolute;
bottom: 2%;
right: 2%;
cursor: pointer;
filter: drop-shadow(5px 4px 3px #666666);
}
.back {
	top: 2%;
right: 2%;
}


.left-1 {
	transform: translate(-105%, -105%);
}
.left-2 {
	transform: translate(105%, -105%);
}
.right-1 {
	transform: translate(-105%, 105%);
}
.right-2 {
	transform: translate(105%, 105%);
}

.center-1 {
	transform: scale(0);
}