@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,300,500,700,900);

html, body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font: 900 20px/1 Alegreya Sans, sans-serif;
	font-size: 20px;
	font-size: calc(20px + 2vw);
}

body {
	perspective: 300px;
	transform-style: preserve-3d;
	background: linear-gradient(#222,#000);
	
	&:hover {
		h1 { transform: rotateY(0); }
		a {
			transform: translateZ(0);
		}
	}
}

h1 {
	transform: rotateY(15deg);
	transform-style: preserve-3d;
	color: whitesmoke;
	transition: transform 1s;
	
	a {
		display: inline-block;
		transform: translateZ(60px);
		transition: transform 1s;
		color: dodgerblue;
	}
}