body {
	background-color: darkblue;

}

figure#cat1{
	width: 50vw;
	height: 50vh;
	background-image: url(../img/cat1.png);
	background-size: cover;
	background-position: center;

}


figure#cat1:hover {
	width: 50vw;
	height: 50vh;
	background-image: url(../img/cat.jpeg);
	background-size: cover;
	background-position: center;
}


h1{
	font-size: 100pt;
	font-family: impact;
	color: yellow;
	text-align: center;

	animation: fade-in-float-up 2s 1;
	animation-delay: 5s;
	animation-fill-mode: forwards;
}
/*@keyframes fade-in {
	0%  	{opacity: 0; }
	100% 	{opacity: 1; }*/

.st0:hover {
		fill: #A37A31;
	}

	.st1:hover {
		fill: #83AAE2;
	}

	.st2:hover {
		fill: #EFD8AF;
	}

	.st3:hover {
		fill: #2748A8;
	}

@keyframes fade-in-float-up {
	0%  	{opacity: 0; transform: translateY(500px);}
	10%		{transform: scale(1);}
	50%		{transform: scale(10);}
	100% 	{opacity: 1; transform: scale(10);}


/*@keyframes fade-in-float-up {
	0%  	{opacity: 0; transform: translateY(500px);}
	50%		{transform: translateY(-200px);}
	100% 	{opacity: 1; transform: translateY(0px);}*/

/*@keyframes fade-in-float-up {
	0%  	{opacity: 0; font-size: 0pt;}
	100% 	{opacity: 1; font-size: 100pt;}*/


/*go to webstie animation.style to see more effects*/