@import url('https://fonts.googleapis.com/css?family=Acme|Varela+Round');

:root {
	--main-font: 'Varela Round', sans-serif;
	--accent-font: Acme, sans-serif;
	--color1: hsl(107, 81%, 72%);
	--background: hsl(107, 81%, 30%);
}

body {
	font-family: var(--main-font);
	background-color: var(--background);
	color: var(--color1);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	font-size: 400%;
}

@media (max-width: 60em) {
	body {
		font-size: 200%;
	}
}

@media (max-width: 40em) {
	body {
		font-size: 100%;
	}
}

h1 {
	font-family: var(--accent-font);
	font-size: 2em;
	text-transform: uppercase;
	margin: 0;
	animation: shutter ease-out 3s infinite;
}

@keyframes shutter {
	0% {
		transform: translate(0, 0);
	}

	90% {
		transform: translate(0, 0);
	}

	91% {
		transform: translateX(-0.2em);
	}

	95% {
		transform: translateX(0.2em);
	}

	99% {
		transform: translateX(-0.1em);
	}

	100% {
		transform: translate(0, 0);
	}
}

header {
	padding: 1em;
}