:root {
		--color-primary: #FF902E;
		--color-bg: #000;
		--color-text: #fff;
		--base-unit: 1rem;
	}

	/* sancreek-regular - latin-ext_latin */
	@font-face {
	  font-family: 'Sancreek';
	  font-style: normal;
	  font-weight: 400;
	  src: local(''),
		   url('../fonts/sancreek-v13-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		   url('../fonts/sancreek-v13-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	}

	html,body {
		height: 100%;
	}
	body {
		font-size: 130%;
		line-height: 1.3;
		font-family: monospace;
		background-color: var(--color-bg);
		background-color: #485B71;
		color: var(--color-text);

		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

		background-image: url(/img/meric-dagli-xxbh8yBkFVM-unsplash.jpg);
		background-size: cover;
		background-blend-mode: luminosity;
		background-repeat: no-repeat;
		overflow-y: hidden;
	}
	main {
		padding: calc( var(--base-unit) *2);
		background-color: rgba(0,0,0,0.4);
		filter: drop-shadow(0 0 2em #000);
		text-align: center;
	}
	footer {
		padding: var(--base-unit);
		font-size: 75%;
		justify-self: flex-end;
		color: rgba(255,255,255,0.8);
	}
	footer a {
		color: currentColor;
	}
	footer a:hover,
	footer a:focus,
	footer a:active {
		color: var(--color-text);
	}
	blockquote {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1.5em;
		width: 40%;
		min-width: 20em;
		text-align: left;
		color: var(--color-primary);
		line-height: 1.6;
		font-weight: bold;
	}
	h1 {
		font-family: 'Sancreek';
		font-weight: normal;
		text-transform: uppercase;
		letter-spacing: 0.025em;
	}
	button {
		border: 1px solid currentColor;
		padding: calc( var(--base-unit) * 0.5 ) var(--base-unit);
		color: currentColor;
		background-color: var(--color-bg);
		transition: all ease-in-out 0.2s;
	}
	button:hover,
	button:active,
	button:focus {
		color: var(--color-primary);
		background-color: var(--color-text);
	}