@charset "UTF-8";
/* CSS Document */

Body{
	
	background-color: deeppink;
	animation-name: background;    
	animation-duration: 1s;
	animation-delay:0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;

}

img {
	
	width: 300px;
	height: 300px;
 
}

@keyframes background {
	
	0% {background-color: deeppink;}
	100% {background-color: aqua;}
	
}


@keyframes size {  
	
	0% {transform:scale(1);} 
	100% {transform:scale(1.5);}
}

@keyframes top_layer {
	
	0%    { opacity: 0;transform:scale(1);}
  	100%  { opacity: 1; transform:scale(1.5);}
}


red_heart_div{
	
	position: absolute;
	z_index:3;
	width: 300;
	height: 300;
	top: 50%;
	left: 50%;
    margin-left: -150px;
	margin-top: -150px;
	animation-name: top_layer;    
	animation-duration: 1s;
	animation-delay:0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;
}

water_heart_div{
	
	position: absolute;
	width: 300;
	height: 300;
	top: 50%;
	left: 50%;
    margin-left: -150px;
	margin-top: -150px;
	z_index:2;
	animation-name: size;    
	animation-duration: 1s;
	animation-delay:0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;
	
}