body {
	
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
}

main {
	background: url('../img/chris.png') no-repeat center / 90%;
	
    display: inline-block;
  	animation: chris 3s 9s linear;
  	animation-iteration-count: 1;
}

@media all and (min-width: 100px)     {main {height: 65rem; width: 90%;}}
@media all and (min-width: 992px)     {main {height: 15rem; width: 15rem;}}


@keyframes chris {
	
	0% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
		
	}

	50% {
		transform: scale(-1, 1);
		-webkit-transform: scale(-1, 1);
		-moz-transform: scale(-1, 1);
		-o-transform: scale(-1, 1);
		-ms-transform: scale(-1, 1);
	}

	100% {
		transform: scale(1, 1);
		-webkit-transform: scale(1, 1);
		-moz-transform: scale(1, 1);
		-o-transform: scale(1, 1);
		-ms-transform: scale(1, 1);
	}
}

h1 {
	display: none;
}