/* ---------------------------------------- 
Mia Zhang
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
	background:white;
}
div{
  
    position:center;

}
@keyframes change{
	0% {background-color:#1e4bbe;}
	50%{background-color:#7089ca;}
	100% {background-color:#1e4bbe;}
}

@keyframes yellowchange{
	0% {background-color:#f2f06b;}
	50%{background-color:#f2eeab;}
	100% {background-color:#f2f06b;}
}
@keyframes blackchange{
	0% {background-color:black;}
	50%{background-color:white;}
	100% {background-color:black;}
}

.black{
	animation:blackchange 3s linear infinite;
}
.blue{
	
	animation:change 3s linear infinite;

}
.blue div{
	position:center;


}
.yellow{
	
background:#f2f06b;
animation: yellowchange 3s linear infinite;
	
}
.rotate:hover{
	transform:rotate(145deg);
	transition:transform:4s;

}
.bird{width: 130px;
	height:110px;
	position:relative;
	display:inline-block;

}
.bird:hover{
	background:url(../images/bird.gif);
; 
	cursor:url(../images/earth.png);

}
.human:hover{
	background-image:url(../images/human.gif);
}
.sea{

}
.sea:hover{
	background-image: url(../images/sea.gif);} 
.red{
	background-color: #f2b0ab;
	animation: redchange 3s linear infinite;
}
	
    



.mz{

}
.mz:hover { 
	background:url(../images/giphy.gif);

	cursor: pointer;
	
}



.mz div { 
	
	
}